How to integrate Uppy with existing images

Uppy
1

I’m making a basic CRUD webapp with Laravel / Inertia / Vue.

I’ve got Uppy’s dropzone fully working for images on my Create Car page, but I didn’t think about the Edit Car page in advance.

I may already have images in my DB so now I need to let the user:

  1. See existing images.
  2. Delete existing images.
  3. Add new images.

Does Uppy support 1 and 2 properly?

Regarding 1: I imagine I can inject the image data into Uppy so that the FilesGrid shows them, but I would also need to be able to skip those when processing on the backend, because they’ve been processed before.

Regarding 2: FilesGrid provides a remove button, but that just removes the image from the “to be uploaded” list. For images previously uploaded I need to do run some backend code so they are removed from DB and disk right when the user clicks Remove. Unless, I can diff the missing images when processing on the backend, and delete them at that point.

It’s a little more complicated than I expected.

I’m very much considering splitting the images field into two instead. Letting the user manage existing images without Uppy, and adding more with Uppy. That way the only thing I need to modify in my existing Uppy integration is how many more images are allowed. (max images - existing images = max uppy images)

That would be a lot simpler, but maybe not as pretty for the user.

What do you do?

2

We don’t have support for digital asset management (yet) so for now I recommend separating the functionality and only present Uppy when uploading new files and build something yourself for showing files previously uploaded files