Reverse Batch

[dz3n]

Hi,

I'm trying to reverse the batch in order to keep it on the previewComponent in same order as I store it in database.

[UPLOADER_EVENTS.BATCH_ADD]: (batch) => {
  batch.items = [...batch.items.reverse()];
},

I used this event, and it works, but now the uploading start from right to left which is kinda annoying.

Can I use different approach to achieve this or to fix the uploading to start again from the first (left) item

Thanks!

[yoavniran]

hey @dz3n why not change the order on the display side?
you can create a custom retrieve method for the preview that will reverse the order of the batch items before its hands them to the preview.

See documentation here:

https://react-uploady.org/docs/api/utils/getUploadPreviewForBatchItemsMethod/

Will look something like this:

import { getUploadPreviewForBatchItemsMethod } from "@rpldy/upload-preview";

const useMyCustomItemsRetriever = (cb) => {
     useBatchAddListener((batch) => {
           cb({ items: batch.items.reverse() });
     });
}

const MyUploadPreview = getUploadPreviewForBatchItemsMethod(useMyCustomItemsRetriever);

 //... render <MyUploadPreview/> instead of the default <UploadPreview/>

[dz3n]

@yoavniran Thank you for your answer. Your code works, but unfortunately I end up with same issue.

https://i.imgur.com/2Py7DtB.gif

The images are displayed reversed, but when the uploading start, it starts from right to left

[yoavniran]

Right. Well, you're only changing the UI side so of course the order is reversed.
I guess I didnt understand the problem in the initial question.

If you want to affect the actual upload order you should be able to do that with the batch-start event, which does let you return a modified set of items.

[UPLOADER_EVENTS.BATCH_START]: (batch) => {
      return {
         items: batch.items.reverse(),
      };
},

[dz3n]

@yoavniran Thanks.

REQUEST_PRE_SEND(BATCH-START) event handlers must return same items with same ids

This is the error I got. Any idea why this is happening?

[yoavniran]

that's a bug, unfortunately.
I will open an issue for it and fix soon

[yoavniran]

Hey @dz3n I looked into this and it seems a bit more complex to solve than I initially thought.
It requires a more complex refactor to enable re-order at a stage such as the batch-start event.

I'd like to understand your flow better to see if there's something else I can do or advise on your end.

I'm trying to reverse the batch in order to keep it on the previewComponent in same order as I store it in database.

Why is it different from the order of items added on the client?
And how does your client learn about the DB order?

[dz3n]

Hey @yoavniran

Well, my goal was to make PreviewComponent as part of the list of existing photos which I'm serving from back-end. The problem was If I add few more photos to this list, they are displayed in specific order but when I refresh the page, the order of the new photos gets reversed.

In fact I'm able to make the reverse in back-end, which will solve my problem.

if you think this reordering is too complex and it's not very important, feel free to ignore it at this stage.

Thank you for your help!