EasyDropzoneJS – open-source JavaScript library for drag&drop files | Hacker News Reader

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

gitlab.com

39 pointspazvanti11 comments

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/ 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.

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

Looks good, i would hide the button and make the dropzone area clickable.

That is one option. Will see if I can make it configurable and/or dependent on the theme.

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

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.

https://developer.mozilla.org/en-US/docs/Glossary/IIFE

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.

Wow. So snarky. Much devel. XD

Reply on news.ycombinator.com