EasyDropzoneJS – open-source JavaScript library for drag&drop files
1–10 of 12 posts
Re: EasyDropzoneJS – open-source JavaScript library for drag&drop files
#2The past few days I've been working on a personal project and needed to add file-upload functionality to an existing form. So, I was searching for something to make things elegant and allow also drag&drop, not just the traditional file browser.
I could not find anything that fit my needs (DropzoneJS required too much workaround to work with my existing form), so I decided to make my own from scratch. It turned out quite well so I decided to make it open-source, since I think other may find it useful.
You can find the code here: https://gitlab.com/ppopescu/easydropzonejs/ You can see a demo on my personal blog: https://petrepopescu.tech/easydropzonejs/
### Features
- Easy to integrate and use
- Looks nice even with the default theme
- It is theamable, and only requires update to the css file
- Does not require any external libraries like JQuery (it is made with pure JS and CSS)
- Small and lightweight, currently having less than 4kb for both the JS and CSS files
- Shows you the thumbnail preview for images (configurable)
- Easy to configure (even though there are only a few configuration options)
Any suggestions of improvements (or even better, code submissions) are greatly appreciated. Please, tell me what you think and if you think that this is useful and I should continue development.
Re: EasyDropzoneJS – open-source JavaScript library for drag&drop files
#3The past few days I've been working on a personal project and needed to add file-upload functionality to an existing form. So, I was searching for something to make things elegant and allow also drag&drop, not just the traditional file browser. I could not find anything that fit my needs (DropzoneJS required too much workaround to work with my existing form), so I decided to make my own from scratch. It turned out qu…
Looking good and great job! I noticed an errant apostrophe in the README: While the library is in it's early stages should read While the library is in its early stages Thanks for giving the world this!
Re: EasyDropzoneJS – open-source JavaScript library for drag&drop files
#4You shouldn't pollute window with stuff if you don't have to. You created a function called `h` among with a few other things.
Otherwise good job making a thing that has been made many times before
Re: EasyDropzoneJS – open-source JavaScript library for drag&drop files
#5You shouldn't pollute window with stuff if you don't have to. You created a function called `h` among with a few other things. Otherwise good job making a thing that has been made many times before
To the author, here's a common pattern you can use to avoid defining global variables unless it's needed.
;(function() {
const dropzoneDefaults = { ... }
class EasyDropzone { ... }
const h = function() { ... }
// Export to global
window.EasyDropzone = EasyDropzone
})()Re: EasyDropzoneJS – open-source JavaScript library for drag&drop files
#6You shouldn't pollute window with stuff if you don't have to. You created a function called `h` among with a few other things. Otherwise good job making a thing that has been made many times before
To the author, here's a common pattern you can use to avoid defining global variables unless it's needed. ;(function() { const dropzoneDefaults = { ... } class EasyDropzone { ... } const h = function() { ... } // Export to global window.EasyDropzone = EasyDropzone })()
Thanks. Will definitely try to improve the code. JavaScript is not my main language and I still have many tricks that I should learn.
Re: EasyDropzoneJS – open-source JavaScript library for drag&drop files
#7You shouldn't pollute window with stuff if you don't have to. You created a function called `h` among with a few other things. Otherwise good job making a thing that has been made many times before
It has been made many times, but I could not find something that works easily out of the box. After I made it, decided to share it since others may find it useful.
Re: EasyDropzoneJS – open-source JavaScript library for drag&drop files
#8The past few days I've been working on a personal project and needed to add file-upload functionality to an existing form. So, I was searching for something to make things elegant and allow also drag&drop, not just the traditional file browser. I could not find anything that fit my needs (DropzoneJS required too much workaround to work with my existing form), so I decided to make my own from scratch. It turned out qu…
Looking good and great job! I noticed an errant apostrophe in the README: While the library is in it's early stages should read While the library is in its early stages Thanks for giving the world this!
Thanks. Will update the file
Re: EasyDropzoneJS – open-source JavaScript library for drag&drop files
#9Earlier quoted context omitted.
To the author, here's a common pattern you can use to avoid defining global variables unless it's needed. ;(function() { const dropzoneDefaults = { ... } class EasyDropzone { ... } const h = function() { ... } // Export to global window.EasyDropzone = EasyDropzone })()
Thanks. Will definitely try to improve the code. JavaScript is not my main language and I still have many tricks that I should learn.
Here is some information about this pattern, it's called Immediately Invoked Function Expression. It's a way to create a function scope so that all variables are local, except for any that you want to "export" as a global.
Re: EasyDropzoneJS – open-source JavaScript library for drag&drop files
#10The past few days I've been working on a personal project and needed to add file-upload functionality to an existing form. So, I was searching for something to make things elegant and allow also drag&drop, not just the traditional file browser. I could not find anything that fit my needs (DropzoneJS required too much workaround to work with my existing form), so I decided to make my own from scratch. It turned out qu…
Looks good, i would hide the button and make the dropzone area clickable.