Removing a file from the UI does not delete the uploaded asset

[titusgahissy]

When uploading files, we see this remove button.

In the current behavior, the file is removed from the UI while keeping the uploaded asset.

The expected behavior should be for the uploaded file to be also deleted. I understand that the file delete resource is protected by the secret key, but I think there should be a secure way to achieve that.

Also, if developers want to do this on their server side, is it possible to have an event callback when the file is deleted?

[ljwagerfield]

I understand that the file delete resource is protected by the secret key...

This is correct 👍

...but I think there should be a secure way to achieve that.

I agree!

The challenge here is disallowing the user from deleting files after they're submitted to your app.

This implies your backend needs to step in, as Upload.io isn't aware of that boundary, and we can't trust the user to tell us.

Here's a couple of solutions that require your backend's assistance...

Option 1) "used files" table

1. Maintain a used_file_paths table in your application's database.
2. Whenever a user submits a filePath received from React Uploader to your API -- and you use it -- then save it to the used_file_paths table.
3. Add an API endpoint to your backend API that allows file deletions, but ignores/errors the requests if the file exists in the used_file_paths table.
4. Call this API endpoint from the React Uploader component when remove is clicked (we'd need to provide a callback to allow you to do this).

Option 2) File TTLs + CopyFile

1. Use TTLs to expire all uploaded files.
2. In your backend API, on form submit, use the CopyFile operation to "promote" files to a permanent location (and allow the original file to expire after say 1 hour).

Please do propose better alternatives if you're aware of any! 😄

[titusgahissy]

A big selling point of Upload.io is the user experience. A backend-oriented solution is still a viable thing, sure, but it adds complexity.

Option 1) Short-lived (access) tokens

What if for every uploaded file, you add a short-lived token (with the permission to delete just that file) that the remove action will then use to delete the asset? No backend, everyone is happy ... but it will add some work on your side... definitely.

Regarding the backend option:

1. I open a modal containing images to upload
2. I upload 20 images
3. I remove 15
4. I close the whole popup (I pressed ESC without paying attention)
5. I upload (again) the 5 images I wanted to keep in step 3
6. I hit send

So the backend will never receive the 15 removed files to start with. Also, the 5 images left in step 3 are uploaded but not tracked by the backend.

And there is another "issue", the 5 images left in step 3 but not sent to the backend.

Option 2) upload sessions/group

Uploadcare has a very nice way of handling this.

Introducing an upload group id can help manage files and also give an id to the backend to confirm the upload.

By confirming I mean:

1. In the dashboard there can be an option to purge unconfirmed files after X hours/days (or NOT)
2. When the auto purge is enabled, the upload group id can then be use to confirm the upload

[ljwagerfield]

What if for every uploaded file, you add a short-lived token (with the permission to delete just that file) that the remove action.

That's an interesting suggestion.

Users could possibly delete files, though, after they've submitted them to your app?

I'm trying to think how we'd prevent those edge cases from manifesting as nasty surprises/bugs for our users.

give an id to the backend to confirm the upload

We have considered making TTLs cancellable (via secret API key only).

This means the user would upload a file (or many files), they're automatically given a TTL of X hours/days, then if/when they're submitted to your backend API, your backend API removes the TTLs.

The terminology is different, but the workflow and end result is identical IINM, with the exception of a strict group.

FWIW option 2 in this message is similar and supported today -- using TTLs and CopyFile would be similar to "purging files" (TTL) and "confirming the upload" (by using CopyFile to copy the file to a permanent location in your backend API). Again, the workflow is the same AFAIK: there's backend involvement + same number of requests in both approaches.