Have a file input form upload when a user clicks “open”

Question

I am wondering if this flow is possible:

1. Click a button that says "Upload". It is styled very differently from the usual . It does not show the "No file selected" text.

2. The usual file browser pops open. The user chooses a file to upload. They click the "open" button in the file browser.

3. Upon clicking "open", the file browser is closed (like normal) and the file immediately begins uploading (unlike normal where it requires a submit).

4. I detect when the file is finished uploading, and direct to another page.

Here is how I would try to implement it:

1. Custom CSS on input button - this doesn't seem to hard.
2. No changes needed
3. Detect when the input value is changed. Once I detect that it has changed, trigger a submit.
4. ???? How can I detect when a file is finished uploading?

Answer 1

If you use a form submit, the file finished uploading when the (likely POST) request is complete.

To trigger the submit when the input value change, use form.submit() in JavaScript.

$('#file_input').change(function() {
    $(this).closest('form').submit();
});

Your server should send back the redirect as a response (e.g. status code 301, 302, 303, etc.).

Answer 2

Depends on how you are thinking to implement it. But here's what I did in one of my projects.

Step 1 Uploaded the file using Ajax :

upload file using jquery ajax How to upload a file using jQuery.ajax and FormData Google

Step 2 On upload finish, my server-side script returns a JSON - Depends on what server-side language you're using.

Step 3 I parse that json to see if the upload was successful and then take necessary steps