How to remove image from previews queue??

[MTG2000]

Hi there.

I've started just recently using this library, so I'm not yet very familiar with all of its features.
But I wanna say that this is some really really awesome work!!
I think this seems so far the easiest file uploading library I've ever used.

I'm trying to build a multi-images uploading component, where previews are shown for each image while it's being uploaded.
And things are good for now.

But the small problem I'm facing is: how to handle the case where an image from those images fails uploading??
Maybe because of a network error, or maybe the api rejected it, or the user aborted that.

I know I can use the useItemErrorListener to detect when an error happens and show an alert to the user for example.
But I also want to allow the user to click an 'X' button on the image for example to remove it from the queue.

I went through the docs for quiet a bit of time, but the closest thing I could find was the clear() method on the previewMethodsRef, but I believe this will remove all the items together, not a single one.

So is there currently a way to achieve this???

And thanks a lot in advance!!

[yoavniran]

Hi @MTG2000

Thanks for the feedback. Glad to hear you find Uploady easy to use. That has always been one of the main goals :)

As to your question. I think this code example will help you. It shows how a more complex queue UI can be achieved.

If you want to remove the item from the UI, its just a matter of not rendering the preview component based on a specific item state.
You can also show the error/aborted state rather than remove it completely as the example shows.

I hope this helps.

Its important to emphasize that the intention behind UploadPreview is to provide a simple and extensible component but its not fit for every scenario. Using the event hooks you're free to build the type of UI to your exact requirements.

(moving this to the discussions area)

[MTG2000]

Hey @yoavniran

So your suggestion is that when I want to remove a specific preview from the list, I could for example set a state and then return always null for this component, right??
I think it wouldn't really hurt the performance because I don't think the number of supposedly deleted preview items will be a lot.

But still, I personally think that it would really help if we could treat these previews container component as a controlled component, because right now, implementing something where previews are a part of a bigger component that manages a bunch of photos for example will require quiet a bit of not-simple hacking.
And it would be solved if this parent component was able to manage the previews it's showing using a controlled-component way.

I hope that what I said makes some sense 😅

[yoavniran]

Thats very good input and I will consider this for the future. I will see if there are changes that make sense to make in the existing component or whether a new one is warranted.

But remember, the focus of Uploady is on the logic and hooks and much less on components. Its this philosophy that leads to as few and as simple components as possible in this core library. There's definitely room for someone to build more complex components on top of the existing functionality. 😄