How to upload a dropped file.

[Jan Badenhorst]

Hi all,

Currently I have a form with a file input, where users can browse to a file on their local drives and upload it. The form also captures some other user defined meta-data for the file that is being uploaded.

This works well, as I use goog.net.IframeIo, and from there specifically the sendFromForm method.

I thus have an existing form with working file-upload functionality.

Now I would like to also give my users drag-and-drop file upload support: Drag a file from the desktop, and drop it on an element which triggers a file upload (assuming the other form fields were still filled in by hand).

I use the  goog.events.FileDropHandler.EventType.DROP event as it is fired by goog.events.FileDropHandler to manage the file drop part of the workflow.

At the next step I am stumped:

How do I let my form know about the file that needs to be uploaded?

I tried:

1. Letting my existing form know about the file details. But I can't set the value of the existing file input field because of browser security.
   
2. So i tried creating a new file input field on the fly, and attaching it to my existing form, but still have no idea how to let this field know about the dropped file?
   
3. I can even create a whole new form on the fly, but still: how do I let the form know about the dropped file?

Any help will be appreciated.

Regards Jan

[Rhys Brett-Bowen]

I had a go at this recently as well - what you need is the FormData
(https://developer.mozilla.org/en/XMLHttpRequest/FormData) object.
Haven't tried using it with the IframeIo but works well with the
traditional XMLHttpRequest method, something like:

var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
var form = new FormData();
form.append('data', file);
xhr.send(form);

where file is your File object and url is the upload URL

On May 3, 8:47 am, Jan Badenhorst <janhendrik.badenho...@gmail.com>
wrote:

> Hi all,
>
> Currently I have a form with a file input, where users can browse to a file
> on their local drives and upload it. The form also captures some other user
> defined meta-data for the file that is being uploaded.
> This works well, as I use goog.net.IframeIo, and from there specifically
> the sendFromForm method.
> I thus have an existing form with working file-upload functionality.
>
> Now I would like to also give my users drag-and-drop file upload support:
> Drag a file from the desktop, and drop it on an element which triggers a
> file upload (assuming the other form fields were still filled in by hand).
> I use the  goog.events.FileDropHandler.EventType.DROP event as it is
> fired by goog.events.FileDropHandler to manage the file drop part of the
> workflow.
>
> At the next step I am stumped:
> How do I let my form know about the file that needs to be uploaded?
>
> I tried:
>

>    1. Letting my existing form know about the file details. But I can't set

>    the value of the existing file input field because of browser security.

>    2. So i tried creating a new file input field on the fly,

>    and attaching it to my existing form, but still have no idea how to let
>    this field know about the dropped file?

>    3. I can even create a whole new form on the fly, but still: how do I

[Jan Badenhorst]

Thanks. This puts me on the right path.

I have server side form validation at the moment, which fails as it is expecting a form, and not the direct form data. 

I can populate the formData object with the values of the existing fields like so:

    goog.structs.forEach(goog.dom.forms.getFormDataMap(this.addFilePanel_.form_),

      function(value, key) {

          formData.append(key, value);

      });

which means all the other form inputs are passed along.

So it looks as if if I am going to have to point the form submit to one url, and the drag-drop submit to another.