Need to transform design to code? Don't hardcode it, Avocode it!
See how
GET A FREE MONTH
Code
·
LAST UPDATED
August 3, 2016

Droparea: HTML5 file Drag and Drop component

Head of Product & Co-founder at Avocode and a former Lead Product Developer and Co-founder at MadebySource.

"I still write code. In fact that's what I love doing most."

Building a well-designed product takes time and versioning. As the project goes forward, more and more design revisions appear, therefore keeping all of them organized is crucial. In order to let our users have everything organized, we wanted to add the well-known drag & drop feature to the Avocode manager.

Two scenarios of drag-and-dropping

1. Take a design file and add it to the project

2. Add a revision to the design

Essentially we needed to submerge multiple dropareas into another droparea in React. Since there was no open-source library which would allow us to do that, we developed our own. We were inspired by the interface of a library called react-dropzone, made by Param Aggarwal and completely rewrote it to fit our needs.

You're welcome to use the Droparea in your projects

Give us some love and upvote our library on GitHub with a star. Thank you!

Let us know how this library works for you in the comments down below.

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: