Drag-n-drop file upload

    This article is a bit old now, see GIT repo and feel free to fork it

    As a continuation of previous article about new issues in html5, I found a demo where file upload is already working with usual drag and drop on to the browser Firefox 3.6. Mostly its all draft and hacks right now. If you look at the code, you can see browser-specific params like


    A file is send with similar ajax method sendAsBinary (). Since there are no confirmation, it may be a bit dangerous because user can accidentally send entire C: Windows directory. So it still needs all kinds of filters and validations as to what specifically can be uploaded and how deep.

    Jquery dnd-upload

    I wrote two jquery-plugins - one to support Firefox 3.6 (Namoroka) HTML5 upload, and one to support Google gears. You can use both together..

    The easiest option for gears:


    Note that the key received from the server the file is "file" (in PHP its $ _FILES [ "file"] respectively ). And here is an extended example of code initialization..

    var dragndropConfig={
         onProgress:function(event) {
             if (event.lengthComputable) {
                 var percentage = Math.round((event.loaded * 100) / event.total);
                 if (percentage < 100) {
                    $('#some_progress_div').html('Uploading file..'+percentage+'%');
        onComplete:function(event,txt) { 
    if (window.google && google.gears){

    Attention, Google gears still has bugs associated with such loading and has apparently halted development state because of upcoming html5 features. Also Chromium doesn't seem to support event.dataTransfer.files listing and although it has items() method, object inside is of blob type and cannot be converted to binary/string...

    See also plupload

    Btw. You can use this plugin under the same terms as jQuery is distributed
    comments powered by Disqus
    • Priya
      Will this functionality work with all browsers or only in FF?
    • Only versions that support HTML5
    • manisha
      can you send me the proper coading for this demo which you have mentioned because for me jquery and ajax is new.
    • Gh61
      Sorry, where is code to upload via google gears.
      $.uploadg=function(input, opt) is missing. :( PLS I need this
    • Gears is no longer supported by Google.. but here you go
    • Gh61
      Thank you for quick answer, but i have one more question. Where i can get from "onProgress:function(event)" form event fileName of uploaded file?
    • Not sure what you mean. Example above in the article shows how to define these handlers, but what is the format of parameter may vary. Try using firebug with console.log() to see whats returned
    • Gh61
      I need some way to get Name of uploaded file. Is it possible?
      Don't you recognize that it's high time to get the home loans, which can realize your dreams.
    • Travis
      Works fine for me in Firefox and Safari. Recently under Chrome however I have been getting the following error: "Uncaught TypeError: Not enough arguments" on line 65. Any suggestions as to how this can be fixed? Thanks for the great script!
    • See updated version in github https://github.com/tot-ra/upload5
    • Thomas Vanhoutte
      Thanks for the link :)