Upload -> ListItemUI reversing the order

1 Answer 159 Views
Styling / Themes Upload
Adrian
Top achievements
Rank 1
Adrian asked on 20 May 2021, 08:34 PM

Hello,

 

I am trying to display a list of images with buttons that delete them when clicked. I'm using the Upload component and utilizing the 'listItemUI' attribute and it works wonderfully. However, I am trying to reverse the order of the elements displayed so that the most recent is at the top and the least recent is at the bottom.

 CustomListItemUI(e) {
        return (
            <ul id="custom-list-item-UL">
                {e.files.map((el, index) => {
                    if (el.Thumbnail_URL) {
                        return (
                            <li
                                className="k-file"
                                key={index}
                            >
                                <div className="k-file-single">
                                    <img src={el.Thumbnail_URL} onClick={() => this.toggleDialog(el)} />
                                </div>
                                <button
                                    type="button"
                                    onClick={async () => {
                                        this.actualUploader.current.onRemove(el.uid);
                                        await this.props.deleteImage(el.ID);
                                    }}
                                    tabIndex="-1"
                                >
                                    <span aria-label="Remove" title="Remove" className="k-icon k-i-delete">
                                    </span>
                                </button>
                            </li>
                        );
                    } else {
                        return (
                            <li key={index}>
                                <Loader errorsPresent={el.validationErrors} />
                                {
                                    el.ID || el.validationErrors?.length >= 0 ? <button
                                        type="button"
                                        onClick={async () => {
                                            this.actualUploader.current.onRemove(el.uid);
                                        }}
                                        tabIndex="-1"
                                    >
                                        <span aria-label="Remove" title="Remove" className="k-icon k-i-delete">
                                        </span>
                                    </button>
                                        : null
                                }
                            </li>
                        );
                    }
                })
                }
            </ul>
        );
    }
I pass the calling of the above method to the aforementioned 'listItemUI' attribute on the Upload component.

I have tried sorting the data that goes into the <ul> and it doesn't make a difference.

I have tried putting display: flex, and flex-direction: column-reverse, and this works but places the scroller at the bottom with the most early upload (which is also not what I want). Is there some kind of sorting attribute or method I can use to achieve what I want?

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 24 May 2021, 05:49 AM

Hello, Adrian,

Thank you for the details.

This occurs as the listItemUI is fired for each item once.

This is why if we have to reverse the order, we have to use controlled mode and reverse the files array, before passing it to the Upload. I made an example showcasing this:

https://stackblitz.com/edit/react-z8qwj1?file=app/main.jsx

I hope this is helpful.

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

David
Top achievements
Rank 1
commented on 10 May 2023, 05:27 AM

If listItemUI is fired for each item, then what is the point of passing the `files` prop from the <Upload> father?
it will always have 1 element in the array...

Is there a way for <Upload> component to give me an array of all the files waiting for upload, a callback finction maybe?
Konstantin Dikov
Telerik team
commented on 11 May 2023, 07:35 AM

The props.files within the listItemUI can contain multiple files when "batch" is set to "true" and multiple files are selected at once. In any other case, props.files will contain only the currently rendered item.

As for accessing all files, with the controlled mode you will have access to the files from the state variable, but you can also use the Upload ref:

  const uploadRef = React.useRef(null);
  
  const CustomListItemUI = (props) => {
    console.log(uploadRef.current.files);
   ...
    );
  };

  return (
    <Upload
      ref={uploadRef}

Tags
Styling / Themes Upload
Asked by
Adrian
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or