Remove/delete images from File or Drag&Drop upload component?

Hey WeWeb folks, I’ve got a number of image uploads that my users can do. It doesn’t seem like either the file upload component or the drag&drop upload component allow for the user to remove the image.

Is that correct, or am I missing a setting somewhere? I assume this is related to the fact that we don’t have a lot of WeWeb file storage controls right now too? (e.g. this issue cc @Joyce )

I haven’t tried it yet but I expect I can manually create a “delete image” button that removes the URL from the user’s record in the database, although it wouldn’t actually delete the file from WeWeb. Would be nice to do both!

Supabase is great for this, you might want to take a look

Hi @elyseholladay :wave:

Do you need the user to be able to remove the image before submitting the form or do you need to be able to delete the image from the WeWeb CDN afterwards?

Right now, if you use the Upload file workflow action without adding custom code, the file will be uploaded to WeWeb’s CDN. To delete, you would have to do it manually. We are working on a workflow action to allow you to delete files from WeWeb’s CDN but for now, it’s how it works.

That said, on Wednesday we released a new update that makes it easier for you to send a file directly to your backend.

Here’s the video tutorial we made for Xano:

We will make one for Supabase as well once we’ve updated the plugins to support the v2 of Supabase. In any case, the logic of encoding the file in the format required by your backend will be similar.

Does that help?

Thanks @Joyce. I’m using WeWeb storage, and will probably keep that instead of Xano storage, for now anyway. But great tutorial, thanks!

In my case it’s not so much that I need to delete the file from WeWeb, just remove it from the user’s record. Of course, deleting from WeWeb would be nice just so we don’t rack up a bunch of unused images in storage.

Example: The user can upload a headshot and a personal photo (like of them doing something fun/not work related). Right now, once they upload an image, they can replace it, but they can’t remove it. So if they wanted to not have a personal photo, they… can’t.

I’d love to see how other folks have handled this, but like I said, I’m sure I can make a delete flow to remove images.

Appreciate it!

One way that comes to mind:

  • when the user uploads a profile photo, update the user record in your database with a link to the photo uploaded to the WeWeb CDN
  • on your user profile page in WeWeb, add a “Remove image” button that makes a POST request to update the user record with an empty field instead of an image URL

Does that make sense?

Not sure what the best UX would be for this. Can’t think of a tool that allows me to have no profile pic after I added one but surely it’s possible!