dropzone VS sortablejs

Or roll your own and use something like DropZone.

Just two example libraries: FilePond, DropZone

Here, we will see laravel 8 dropzone multiple files upload, So I will teach you to upload files using dropzone js in laravel 8, Dropzone is a javascript jquery plugin, using dropzone.js we can select one by one image with preview. After choosing an image from browse we can see the preview of the image. dropzone.js also provide filter like we can make validation for max upload, a specific image, or file extension like png, jpg, GIF, etc.

We use Dropzone JS to support uploading files. Under Cuprite, uploading stopped working and an ERR_ACCESS_DENIED error was shown in the JavaScript console each time a test attempted to upload a file.

In standard HTML5 you can perform file uploads through . Additionally there are packages like dropzone and react-dropzone that can handle this task very well. However, inspired in the last ones, there was created something new and more powerful: dropzone-ui.

Hello guys it's been a minute! I was on a small break but now am back and in this tutorial we are going to learn how we can upload multiple images to a Django back end. By default the Django behavior is that you select a single image and upload it to the server then repeat which begs the question isn't that a time consuming and tedious process, say if we have 1000 images? It is. Fortunately, there is a tool that can help us go around this problem, a JavaScript library called Dropzone . Let's not waste more seconds, let's get into it!

github

Dropzone allows you implement “drag and drop” features on your website. It is also highly customizable with custom code. It’s lightweight, doesn’t depend on any other library (like jQuery).

We can also pass all the options for SortableJS as the second parameter. See SortableJS Docs.

SortableJS is a touch-friendly library that enables drag-and-drop sorting of lists. Its simple API and flexibility make it a go-to solution for implementing sortable lists, providing an intuitive user experience for rearranging items on the fly.

Sortable.js

We've been using SortableJS for years for similar functionality.

https://sortablejs.github.io/Sortable/

Well, it worked. But only for one case: dragging stuff within only one column. You see, stimulus-sortable uses SortableJS under the hood, which is powerful.

Maybe: https://github.com/SortableJS/Sortable Can do this not sure.

Well, there are obvious leading contenders like `https://sortablejs.github.io/Sortable/` and, within the `vue` space, `https://sortablejs.github.io/vue.draggable.next/`. Most of the stuff I looked at was unmaintained (lots not updated for vue3).

I really disliked the vuedraggable was handling nesting, and it's just a wrapper around a sortable. At the end of the day, my problem was simple enough that I didn't want a 500kb dependency. If you're wanting to do something like the OP but with nesting, I'd definitely start by looking at Sortable, though (maybe wrapping it the way you want).

Have you looked into alternatives to SortableJS btw? It's a good library but it's also pretty big (43kb) based on https://github.com/SortableJS/Sortable/blob/master/Sortable.min.js.