Add & Remove before upload with preview

[Pooyahmti]

Hi. I am designing an interface which allows the user to add as much as photos they want which are aggregated in a list and sent when a certain button is clicked.
For each item in the list there should be a preview thumbnail and a remove button which will completely remove the item from list and pending queue.
The closest example I found was this sandbox but in this example there is no preview and also when u click delete button the item still remains in the list.

I've tried to use useBatchAddListener and keep the list of files in a state but the problem is that useBatchAddListener doesn't pass a URL for files so I can't render the thumbnails.
Also when using UploadPreview component I have to use getUploadPreviewForBatchItemsMethod because of the autoUpload set to false and using state to make a list of files inside UploadPreview component doesn't work.

I'll be happy if anyone can suggest a solution.

[yoavniran]

Hi @Pooyahmti

I thought I had published a guide about doing this, but perhaps I started thinking or even working on one but never got around to finishing.

So, something for me to do :)
In the meantime, you can find this storybook example (WithDifferentBatchItemsMethod) and see its code.

This example does something very similar to what you're asking about.

Let me know if you have questions.

[Pooyahmti]

Thank you for answering I've checked out the example, the main problem is that clearing preview doesn't clear the upload queue.
I'll be looking forward for your guide.

[yoavniran]

clearing previews does just that.
If you wish to actually cancel the uploads, take a look at abortItem and clearPending