How to let users delete a file using native file upload component & restrict file size?

[collabworkVic]

Hi there! I am curious what would be the best way to add an “x” or something into the native file upload to allow users to delete the file they uploaded if they happen to upload the wrong file? I know if they upload the correct one it will replace the file but users may struggle to know that right off the bat.

Also what would be the best way to restrict file size?

[Joyce]

Hi @collabworkVic

@collabworkVic

Also what would be the best way to restrict file size?

The real restriction will happen on the backend but, in terms of UX, you can work with the file size variable in a workflow to display an error message to your users when they upload a file that’s too large.

@collabworkVic

what would be the best way to add an “x” or something into the native file upload to allow users to delete the file they uploaded if they happen to upload the wrong file?

Here’s how you could do it:

1- add a delete icon next to the progress bar

2- only render the delete icon when files have finished uploaded

3- trigger a workflow on click of the delete icon to remove the item from the fileURLs variable that comes with the upload element

Does that help?

[collabworkVic]

Hi @Joyce thank you so much for your help! This works perfect! I will explore more about sending a error message for file sizes as well.