5

Is it possible to include "drag and drop'd" files in a form submission? There are plenty of options for uploading asynchronously.

Is it possible to capture the file data and include it in a form field?

I'm using Rails as my server so ideally the data for the image would fit in to a form like follows:

<form multipart='multipart' >
  <select name='files[type_id]'>
     ...
     ...
  </select>
  <!-- FILE DATA ?  -->
  <div id="file_drop_spot">

  </div>

</form>
recursive_acronym
  • 2,981
  • 6
  • 40
  • 59

1 Answers1

0

I found this issue on it: drag drop files into standard html file input

I do not believe it is possible, but you could achieve the effect. When you submit the form, prevent its default behaviour and start uploading the file with ajax. When the file upload is complete you point to the form again and submit it, without preventing its default behaviour.

Something like:

<form id="form">
     <input type="text" name="someText"></input>
     <input id="submitButton" type="submit" onclick="uploadFile()"></input>
</form>

And then the javascript:

function uploadFile() {

    document.getElementById("submitButton").disabled = true;
    // Some ajax code to upload the file and then on the success:
    success: function() {

        document.getElementById("form").submit();

    }
    return false; // Prevent the form from submitting

}
Community
  • 1
  • 1
Christian Jørgensen
  • 337
  • 1
  • 7
  • It would be more of a work around because the record the file needs to be associated with will not have been created yet – recursive_acronym Sep 01 '12 at 17:41
  • Hm, I see... But ajax really is just a post, as if it was from a form. I would recommend reading up on how a form actually sends file data and then send the whole thing with ajax. Backend should not need any changes based on ajax or a normal form submit. I believe ;-) – Christian Jørgensen Sep 01 '12 at 17:59