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

**URL:** <https://community.weweb.io/t/remove-delete-images-from-file-or-drag-drop-upload-component/5062>\
**Category:** How do I?\
**Created:** [October 25, 2023, 11:24pm UTC](https://community.weweb.io/t/remove-delete-images-from-file-or-drag-drop-upload-component/5062 "2023-10-25T23:24:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![elyseholladay](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/elyseholladay/32/3921_2.png) [@elyseholladay](https://community.weweb.io/u/elyseholladay)\
**Post date:** [October 25, 2023, 11:24pm UTC](https://community.weweb.io/t/remove-delete-images-from-file-or-drag-drop-upload-component/5062/1 "2023-10-25T23:24:13Z")

</div>

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](https://community.weweb.io/t/how-to-programmatically-delete-files-uploaded-to-wewebs-cdn/1962/12) 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!

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [October 26, 2023, 7:44am UTC](https://community.weweb.io/t/remove-delete-images-from-file-or-drag-drop-upload-component/5062/2 "2023-10-26T07:44:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [October 27, 2023, 8:58am UTC](https://community.weweb.io/t/remove-delete-images-from-file-or-drag-drop-upload-component/5062/3 "2023-10-27T08:58:26Z")

</div>

Hi @elyseholladay 👋

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:

[![](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9e77c65dcf1a7946a523a61fb51081bd0afdf51a.jpeg "Upload a file directly to Xano without writing a line of code") ](https://www.youtube.com/watch?v=vyEQhtr8nM0)

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?

---

<div class="post-metadata">

**Author:** ![elyseholladay](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/elyseholladay/32/3921_2.png) [@elyseholladay](https://community.weweb.io/u/elyseholladay)\
**Post date:** [October 27, 2023, 9:27pm UTC](https://community.weweb.io/t/remove-delete-images-from-file-or-drag-drop-upload-component/5062/4 "2023-10-27T21:27:02Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [October 30, 2023, 11:53pm UTC](https://community.weweb.io/t/remove-delete-images-from-file-or-drag-drop-upload-component/5062/5 "2023-10-30T23:53:29Z")

</div>

> [@elyseholladay](#):
>
> 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.

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!
