4 ms·

EasyDropzoneJS – open-source JavaScript library for drag&drop files

39 points by pazvanti 3y ago

pazvanti 3y ago
The 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/ https://gitlab.com/ppopescu/easydropzonejs/ You can see a demo on my personal blog: https://petrepopescu.tech/easydropzonejs/ 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.
- rendall 3y ago
  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!
  - pazvanti 3y ago
    Thanks. Will update the file
- GrumpyNl 3y ago
  Looks good, i would hide the button and make the dropzone area clickable.
  - pazvanti 3y ago
    That is one option. Will see if I can make it configurable and/or dependent on the theme.
mkoryak 3y ago
You 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
- lioeters 3y ago
  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 })()
  - pazvanti 3y ago
    Thanks. Will definitely try to improve the code. JavaScript is not my main language and I still have many tricks that I should learn.
    - lioeters 3y ago
      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. https://developer.mozilla.org/en-US/docs/Glossary/IIFE https://developer.mozilla.org/en-US/docs/Glossary/IIFE
- pazvanti 3y ago
  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.
- jurimasa 3y ago
  Wow. So snarky. Much devel. XD

39 points by pazvanti 3y ago

The 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/ https://gitlab.com/ppopescu/easydropzonejs/ You can see a demo on my personal blog: https://petrepopescu.tech/easydropzonejs/ 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.

rendall 3y ago
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!
- pazvanti 3y ago
  Thanks. Will update the file
GrumpyNl 3y ago
Looks good, i would hide the button and make the dropzone area clickable.
- pazvanti 3y ago
  That is one option. Will see if I can make it configurable and/or dependent on the theme.

mkoryak 3y ago

You 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

lioeters 3y ago
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 })()
- pazvanti 3y ago
  Thanks. Will definitely try to improve the code. JavaScript is not my main language and I still have many tricks that I should learn.
  - lioeters 3y ago
    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. https://developer.mozilla.org/en-US/docs/Glossary/IIFE https://developer.mozilla.org/en-US/docs/Glossary/IIFE
pazvanti 3y ago
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.
jurimasa 3y ago
Wow. So snarky. Much devel. XD