Comments (4)
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 .
from file-upload-with-preview.
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.
from file-upload-with-preview.
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 :)
from file-upload-with-preview.
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.
from file-upload-with-preview.
Related Issues (20)
- How to access already added images while editing a form? HOT 2
- FileUploadWithPreview is not a constructor (extended with examples) HOT 2
- May I use html_form submit to backend? HOT 2
- how to capture the event with jquery? HOT 1
- There is no name attribute to get the image on backed HOT 4
- Beginner overloaded HOT 2
- Can I use this inside react [just react] ? HOT 2
- Name attribute not present in sending request to server. HOT 6
- file_upload_with_preview__WEBPACK_IMPORTED_MODULE_4__.FileUploadWithPreview is not a constructor HOT 4
- Use in Next js and Tailwind HOT 3
- bug on chooseFile label HOT 2
- Question: can I attach event to element, not to window? HOT 12
- Save in local storage HOT 2
- How to attach to previously initialized instance of FileUploadWithPreview? HOT 4
- How to dynamically click the clear button? HOT 1
- Added event confusion with presets and new add HOT 3
- IE11 HOT 3
- How to Change Input file label? HOT 1
- Need to Show The Browse Button HOT 1
- Rendered order of PresetFiles
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from file-upload-with-preview.