Manually invoke sorting or uploading

[modbender]

I want to know to invoke sorting manually. A case I would need this would be, supposedly I change the order of uploaded images by dragging it around and then decide that the order of the images I have is not what I want, and then want to reset the sorting according to name of the files or such, so I want to reset the changes in ordering I have done, so I want it to be in sorted form as it was when I uploaded it or sorted according to file name. I create a button to sort but I don't know what to do.

I want the same for manually starting uploading for all images at the same time.

Help please.

[m-inan]

Hi, @modbender you can follow the changes in the rankings by using the onSortEnd method in the documents. Also, if you want to make changes to the images, you can create a reference for the RUG component and update it with the setState method.

ref.current.setState({ images: new_sorted_images })

If that doesn't help you can post an example via codesandbox.

[modbender]

@m-inan lol what I posted came back to me (though you probably didn't know about it)... https://github.com/m-inan/react-upload-gallery/issues/22#issuecomment-927302402 What I meant was to trigger inbuilt sorting mechanism if it had any. Also I wanted to ask(unrelated to this issue) is there any way to customize DragArea or that whole component, it's just that I use dark mode on my site and it's not all that easily, though it's not hard to see or anything right now, but if I overlap the color with drag area's then it might end up being hard. Also Card component too. Since I use Material-UI.

[m-inan]

There is no different structure in the ordering in the library, so only the onChange and onSorted functions are triggered.

setSort(images, diff) {
  this.setState({ images }, () => {
    this.props.onChange(images);
    this.props.onSortEnd(images, diff);
  });
}

Have you seen this file for customizing all components? Customize I guess these are what you need.

[modbender]

So the last thing I wanted to know. How to trigger upload manually. What I want to do is drag drop images >> Sort images >> Upload them. Regarding this I wanted to ask, how is the image sorting order passed on to backend since I didn't yet test submitting this. If I wanted to edit my previously uploaded image order, so I will first get the data, add them to initialState (omitting the specific details), but how is the approach to editing only the order of images here and submitting?

[m-inan]

@modbender If I understood correctly, instead of starting the upload right after selecting the images, you want to reorder them first and then upload them to the backend in that order.

[modbender]

Yes @m-inan

[m-inan]

@modbender Unfortunately the structure is not very suitable for this. But there is an example that I hope will work for you.

let marked = [];

function App() {
  const ref = React.useRef();

  const onChange = (images) => {
    // new_sorted_images = images.sort();

    if (!ref.current) return;

    // updating reordered images
    ref.current.setState({ images: new_sorted_images }, () => {
      images.map((image) => {
        // we get it out of the loop by checking that it's not loaded before
        if (image.done == false && !marked.includes(image.uid)) {
          marked.push(image.uid);
          ref.current?.tryUpload(image.uid, image.file);
        }
      });
    });
  };

  return (
    <Rug
      ref={ref}
      autoUpload={false}
      onChange={onChange}
    />
  );
}