Giters

johndatserakis / file-upload-with-preview

🖼 Simple file-upload utility that shows a preview of the uploaded image. Written in TypeScript. No dependencies. Works well with or without a framework.

Home Page:https://johndatserakis.github.io/file-upload-with-preview

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Can i sort the array?

xsaad67 opened this issue · comments

commented

I mean If I've uploaded the files can i then reorder them through jquery sortable?

commented

Hey @xsaad67 - in the next few days we are going to introduce a few methods that should make the sorting possible. They may require you to keep a separate list just for sorting, but it should integrate nicely into the component.

We'll update this thread when ready - thank you.

commented

Thanks for the quick response. Just if you don't mind can i ask will it be completed in this month or if you can guide how can i implement it by my own I'll be grateful of you :)

commented

Hey @xsaad67, yea @DeniseWalter will probably have an implementation of this done by the end of this week, if not sooner.

As I mentioned before, be aware the sorting will require you to keep a separate container where you actually do the sorting - but the new methods will let you update the preview panel. In the future we'll begin to look into whether we can introduce drag-and-drop sorting directly into the component.

We'll update here - thanks.

commented

Hey @xsaad67 - @DeniseWalter has completed the work on the latest update to the component.

You will now be able to manipulate the files in the preview pane. Of course, depending on your framework this will be different in each case - but because you mentioned jQuery Sortable we went ahead and set up an example for you where we have sorting turned on using jQuery Sortable.

You can see the codepen here.

As you'll see, this is a basic setup of file-upload-with-preview. What we've done is imported jQuery and the other deps needed for jQuery Sortable (checkout the project settings in CodePen to see the exact files). Also this is using file-upload-with-preview v4.0.2 so make sure you have that updated.

Basically, when a file is dragged and moved to a new position, we subscribe to the update event that will let us know the new order. This is done using the data-upload-token value.

We then match this value up and build a new array based on this order. Then finally we replace the cachedFileArray using the exposed upload.replaceFiles() method.

So there you go - you should be good to allow sorting in your FileUploadWithPreview instance. Thank you @DeniseWalter .