Skip to content
droparea is a HTML5 drag and drop image/file uploader jQuery plugin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENCE
README.textile
droparea.jquery.json
droparea.js
index.html
post.php
upload.php

README.textile

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

You can’t perform that action at this time.