0

Problem:

I have a form that has a couple fields, but also asks for the user to upload files. Potentially, the user might upload multiple files, so we are saving them (kinda like saving drafts), but the form doesn't get submitted until the user hits the "submit" button.

The file upload is a drag and drop that will show a progress bar for each file. Once the upload process completes, the progress bar changes to a checkmark.

enter image description here

Question:

Does the user need to be told that each uploaded file has been saved?

Or is it expected behavior that the files will, in fact, be saved? ie, as a user, if I refresh before form submission, I just see them there?

I just thought it'd be weird to say "Saved!" after a file has been uploaded and the progress bar disappears because you typically don't say that in that type of interaction.

Technical limitation

We aren't able to save form field inputs, we're only able to save file uploads.

If the user refreshes the page, they'll lose their form inputs, but their files will still be there.

2
  • I think the progress bar turning into a checkmark or "saved" work fine, and communicate the same thing. Mike's auggestion, below, to add a Remove feature is next level UX. Feb 3 at 9:24
  • As a user, if refresh before form submission, I expect my uploads to be lost.
    – essbee
    Feb 6 at 9:53

1 Answer 1

2

NOTE: You don't have any visual mocks, so I'm putting in a rough sketch of a fairly common pattern. I'll update my answer as needed.

Oftentimes when a file is successfully uploaded, there's a representation of the file (usually the file name, and an icon for the file type).

Next to the file, there's often a 'Remove' link or icon, so the user can manage the uploads. This indicates to the user that the file has successfully uploaded (otherwise, what's to remove?).

enter image description here

Since the Submit button is below the file upload area, users will see evidence of the files presence (and the ability to keep adding / deleting) before proceeding.

4
  • 1
    Also maybe have the option of downloading the same file after uploading.
    – raghu
    Feb 3 at 11:51
  • Mike M - Thanks! That mockup resembles what I have, so that's great. My thought is though - I don't know if any of these still communicates that uploaded files are intact after a refresh. I understand they're able to manage it, but I don't think the user will be able to put two and two together? Open to be convinced otherwise :)
    – J Bo
    Feb 6 at 18:38
  • Mike M - I just updated my question to include a quick mockup. The problem is, there are form inputs (which we aren't able to auto-save for technical reasons). The problem is, forms don't typically get auto-saved too, so I don't think it's intuitive to the user that file uploads will be auto-saved?
    – J Bo
    Feb 6 at 19:20
  • @raghu Most users don't expect an autosave when other parts of the form do not save (but you know that already). Is there a reason that the engineers made it autosave just for uploads? This seems like a risky operation for the user. What is the domain you're dealing with here?
    – Mike M
    Feb 10 at 13:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.