Question

I’m working on an application (in Node.js, which is irrelevant for this case) which allows the user to upload an image. It works fine using a form with an input (type=”file”) field.

However, what I want is to be able to upload an image using HTML5 drag and drop instead. As far as i’ve come it’s possible to drag an image to the client, and the image thumbnail is displayed in a div. However I really need some help with getting the file upload working.

The thing is that I want to use the form that i’m using right now, and (somehow) pass the file’s path to the input field, i.e. the flow will work exactly as it do now, but instead of choosing a file by browsing it I want to attach it to the input field by drag and drop.

In the js code below for drag and drop the file that was dragged to the client is stored in the variable “file”, and i’m able to use “file.name”, “file.type” and “file.size” exactly the same way as it works since before with the form. However, I can’t access the files “path” (file.path) which makes it impossible to access the file server side for uploading the same way as I do it since before.

The question is, is it possible to pass the file object to the input field after the file has been dragged to the client, so that I can click on “submit” and upload the file? If so, how could this be done?

Thanks in advance!

the dropbox as well as the form i’m using for file uploads:

<div id='upload'>
    <article>
        <div id='holder'>
            <p id='status'>File API and FileReader API not supported</p>
        </div>
    </article> 

    <form method='post' enctype='multipart/form-data' action='/file-upload'>
        <p>
            <input type='file' name='thumbnail'>
        </p>
        <p>
            <input type='submit'>
        </p>
    </form>
</div>

the code for drag and drop:

uploadImage: function(){
    var holder = document.getElementById('holder'),
        state = document.getElementById('status');

    if (typeof window.FileReader === 'undefined') {
      state.className = 'fail';
    } else {
      state.className = 'success';
      state.innerHTML = 'File API & FileReader available';
    }

    holder.ondragover = function () { this.className = 'hover'; return false; };

    holder.ondragend = function () { this.className = ''; return false; };

    holder.ondrop = function (e) {
      this.className = '';
      e.preventDefault();

      var file = e.dataTransfer.files[0],
          reader = new FileReader();

      reader.onload = function (event) {
        holder.style.background = 'url(' + event.target.result + ') no-repeat center';
      };

      reader.readAsDataURL(file);

      return false;
    };
},

Answer 1

You cannot use the file input to add the file data.
Nevertheless, what you can do (among other technics) is to use the base64 (natively available through the reader.onload event as event.target.result, when using readAsDataURL method) encoded data and put it into an hidden field :

html

<article>
    <div id='holder'>
        <p id='status'>File API and FileReader API not supported</p>
    </div>
</article> 

<form method='post' enctype='multipart/form-data' action='/file-upload'>
        <input type='file' name='thumbnail' />
        <input type='hidden' name='base64data' />
        <input type='submit' formenctype='application/x-www-form-urlencoded' />
</form>

js

reader = new FileReader();
reader.onload = function (event) {
    document.getElementById('base64data').setAttribute('value', event.target.result);
};
reader.readAsDataURL(file);

From the server side you’ll be able to get the base64 encoded data from the file, just decode it and use it as you want.

While submitting the form, you could also change the “enctype” attribute (done through the formenctype attribute) and remove the basic html file input, since the data will be post in a text field.