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

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