Using FileDrop as standard input element

[alexdemartos]

Hi,

I'm trying to add a file in a form using the plugin, but not sending it anywhere, just using it as if an standard was used. The drag&dropped file will be uploaded later when user finishes filling the form (with additional data).

I'm reading the documentation but it's not clear if this is possible or what options should I use. Main problem is elements only contains the file during the drag&drop process, but then it gets removed.

Any help would be appreciated, thank you.

[ProgerXP]

I'm not sure what you are trying to do.

Do you want to have a file component that looks just like standard <input type="file"> and that user can select a file into and upload when the form is submitted? If so, then why do you need any custom file upload like FileDrop? It's easiest to just use <input>, it also lets user drag & drop a file.

[alexdemartos]

Thanks for your response.

The idea is to have the same behaviour as <input type="file"> but also adding the possibility to "drop a file" in. The main problem I'm facing is I want to submit a complete <form> after all fields have been completed, not as soon as they drag the file in.

I hope this makes some sense, and thanks again for your help.

[ProgerXP]

Standard <input> also accepts drag & drop (at least in Firefox and Chrome) and better than that, browser will trigger normal checks like checking require, pattern, onsubmit and all that, treating input type=file as part of the form. With custom file input like FileDrop it will be more complex to make the input behave like that.

The main problem I'm facing is I want to submit a complete

after all fields have been completed, not as soon as they drag the file in.

You can submit the file as soon as you wish, not necessary when it's been dropped. Common use is to create an input, wait until user drops a file and then upload it. However, this is not a requirement. There's sendTo() method that triggers the actual upload, it's typically called in upload event but you don't have to.

So I'd do this:

• create the input
• wait for upload event and set some internal flag that user has selected a file
• on form submission, call sendTo() and wait until the file has been uploaded (or an error occurred) using done and error events in fd.File instance
• in done, submit the form for real (send it to the server)
• in error - abort submission and alert the user

Another problem than blending FileDrop input into regular form is that you can't simultaneously upload the file and send the form unless you're using native input - browser will stop XHR request (file upload) as soon as you let the form submission start.

[alexdemartos]

Great, that makes perfect sense.

Thanks for your help.