Ajax file upload error handling and processing logic

Question

Suppose I have a form with the following user flow:

1. User selects value from select list
2. File upload field appears
3. User selects files to upload
4. As soon as the selection is made, files start to upload via ajax
5. On successful upload, the server responds with the url where the file can be accessed (googledrive/host/...)
6. The url will be saved into a hidden input field and when form is submitted the url will be saved into the database

How do I handle the logic when:

a) The form never gets submitted after the files are uploaded
b) The user wants to change his/her files after they are uploaded
c) The internet connection is interrupted and files are not uploaded

Should I send the files only when the form is submitted (ie. no ajax upload after file selection)?

Should I force the user to reload the whole form when an error occurred (eg. connection interrupted)?

How do I plan a logical flow of handling these cases, and what are best practices?

Answer 1

a) To handle this, you should ask yourself how important is the file uploading in relationship with the others inputs. Is it in first place correct to upload the file without any other content? If it would be a file storage service/app it could be right (as gDrive), but not so much in general cases when you have other data closely related with the file you are uploading. To add a comment to your files sometimes could be mandatory (so you prevent submitting before some comment is done), optional or not even necessary, it depends on your app.

It is highly recommendable that all operations related with file uploading are done in the same action, so the errors will be for the whole uploading operation and not just a part of it. That way it's easier for you to handle errors and to prevent the user to get confused about the state of the system.

b) Following your current approach, you could show a list of the uploaded files and let them choose to delete them or other functionality your app is capable of. In this point the "submit all or nothing" approach could be the same, just show a list of uploaded files, a delete button and a confirmation dialog.

c) If your intention is to make a "silent upload" you could just retry to upload when the form is submitted, and don't show any message, but I don't find any point on sending the data "twice" to the server. If you just want to save time, you should inform the user about the success/failure of the after-select automatic upload. Anyway below I explain why this is not a good practice.

Should I send the files only when the form is submitted (ie. no ajax upload after file selection)?

In general: Yes, that is the common practice.

On 5 and 6, you are sending data from the server to the client, and then sending the same data from the client back to the server, that is not necessary and will tend to produce the kind of problems you are asking about. If you want the show the download URL to the user, you can just add a it to the view when the server response is success.

Imagine the user selects the wrong file and it starts uploading, that will bad, both to the user and to you/ your app. You always want the users to select the file/s to upload, show some preview (at least the name of the file, the extension/type if there's more than one possible file type, and if it don't make your UI a mess a preview always is nice too) so then can review the content in the client side and prevent unnecessary interactions with the server and problems like unwanted uploads. Dropzone.js preview example.

Should I force the user to reload the whole form when an error occurred (eg. connection interrupted)?

This scenario is one of the problems I mention will appear following the two-step uploading approach. Depending on how important the file uploading is in your app in relationship with the other inputs, you should evaluate if it's okay to upload the other inputs and just throw a message to inform the file could not be uploaded, or if you want to invalidate the whole form, that decision depends on your specific page/app.

How do I plan a logical flow of handling these cases, and what are best practices?

Select file
Show Preview
Submit
(Depending on your app and decition) Accept only File + otherFields success as valid, or accept them separately and inform the user about the part that went wrong.

Answer 2

If the form's only purpose is to add an image, then 5 & 6 are redundant, as the server already knows the URL, so there's no additional step necessary. But I suppose there are more fields to be processed and you just want to upload the image in advance while the user's still filling out the rest of the form.

If that's the case, then the question you should ask yourself is: "Is it necessary to provide feedback about the upload before the user submitted the form?"

Because if the image is only relevant to the user after they submitted the form, then there's no need to display the URL and additional information anyway. If you want to do "some work" while the user's filling out the rest of the form, then just quietly start uploading the image in the background and just throw it away (i.e. delete) if any of a) b) or c) occurs.

Answer 3

This depends on whether the file is treated as a different entity from the form itself. For example, in Confluence (Wiki) when users upload attachments to a wiki page, the attachments are indeed uploaded before the wiki page is saved/canceled. The attachments remain saved in the system even if the wiki page is deleted and appear (in recent uploads) when next time user tries to upload another attachment. If you attach a file with same name, it will overwrite the existing file.