Dropzone.js Multiupload with rename functionality
Scenrio: User wants to upload logos of tv channels/sports team etc, if he uploads one by one it is a hassle.
- Rough design, how UI might look(How I intially imagined it to be)
Used these js lib
| Lib | Version | Use |
|---|---|---|
| dropzone.min.js | ^5.9.3 | Multi drop images |
| Sortable.js | ^* | Sort dropzone instances |
| select2.min.js | ^4.0.13 | For multiselect |
| jquery.js | ^0.3.1 | simple add/remove items from dom |
Using Html drag and drop API, was able to create the ui.
Renaming is done via server side(Laravel php),I just pass 2 arrays
- Files
- Names
Simply merge the arrays,save the file.
UI hosted on github
video demo
Github
- For backend check gist code
Edit:
Github link added of UI
- Dropdown with search and pagination using select2.
- Upload images name on specified id in DB in single update query.
- Move all the pics in a folder.
- Backend code to get the pagination and search in search2 Article:Optimal way to large data in dropdown
- Sql query multi-update with specified ids Credits
UPDATE db.channels SET image = CASE WHEN id = 86 THEN "AETV" WHEN id = 56 THEN "AHC" END WHERE ID IN (86, 56) - Move images to specified folder,and run sql query at end
function upload(Request $request) { $images = $request->file('file'); // dump($images); // $filenameArr=$request->filenames; $customnameArr=$request->description; $keys = array_keys( $customnameArr ); $size = sizeof($images); // dump($customnameArr); $ids = []; $cases = []; $params = []; for($x = 0; $x < $size; $x++ ) { $toFilename = $customnameArr[$keys[$x]].'.'.$images[$x]->extension(); // echo "<br>"; // echo "key: ". $keys[$x] . ", value: ". $customnameArr[$keys[$x]] . "\n"; $images[$x]->move(public_path('/uploads/channellogo'), $toFilename); $cases[] = "WHEN {$keys[$x]} then ?"; $ids[] = $keys[$x]; $params[] = $toFilename; } $ids = implode(',', $ids); $cases = implode(' ', $cases); if (!empty($ids)) { // UPDATE db.channels // SET image = CASE // WHEN id = 86 THEN "AETV" // WHEN id = 56 THEN "AHC" // END // WHERE ID IN (86, 56) \DB::update("UPDATE channels SET `image` = CASE `id` {$cases} END WHERE `id` in ({$ids})", $params); return response()->json(['success' => "Images uploaded"]); } } 
Top comments (3)
Nice project
Thank you :D
Thank you guys ☺️☺️... I hope this gonna help people 💪