Droparea
droparea is a jQuery plug-in for HTML5 drag-and-drop (images and files).
Originally it has:
- client-side image resizing with canvas on browser option
- data url option for sending a file/image as a text field with ajax
- click event for browsing files
Tested on:
- GoogleChrome (Linux; v. 23)
- Mozilla Firefox (Linux; v. 17)
Usage
<div class="droppable"> <input type="file" name="my_image" data-post="/upload_my_image?parent_model_id=7" data-crop="true" /> </div> <script> $('.droppable').droparea({ instructions: "", start: function() { alert('Let\'s rock!'); } }); </script>
Options available
Note: If you want to post more data while uploading a file, you can use “data tag”.
For example: data-custom="custom-data"
data-width, data-height : Optional but required for canvas resizing. data-crop : Optional. This is crop option for canvas resizing. [true/false] data-canvas : Canvas resizing option. Default value is false. data-post : Optional. This is an URL for direct posting. data-type : Optional. File tld. [png, jpg, zip] Separate with coma if more than one.
Contributors
- goker.cebeci , the author
- shybovycha , the contributor