Recently I worked on a project where I had to develop a page with multiple areas in which a user can drop or click to upload a single image and then create a thumbnail for it. As any developer would do at first, I went shopping on the grid to find a library that would do the job for me. After doing some research I was able to find a couple of nice JavaScrip libraries, but I eventually ended up implementing my own. The reason was that the libraries I found were either too generic or too hard to customize.
UnoDropZone is the tool implemented to easily create single image drop zone areas. The library will convert the targeted html elements into a drop/click area to allow loading a single image. The loaded image automatically changes into a thumbnail. You can find the full code and some documentation I wrote under the following Git repo UnoDropZone
Here are some examples:1. Basic example
Create html container element (such as div) and add a class called 'file-upload'
2.With callback function
Add a new attribute called 'data-callback' and set the value to the full function name. The function will be called back after loading the thumbnail and it will return the container element as a parameter.
Call back message:
3. Custom Style
The html structure is simple and easily customizable by adding your own css styling.
No comments:
Post a Comment