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 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
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.
Rank 1
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?
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}