20
Upload multiple images and rename them using drag & drop UI using dropzone.js
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)
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"]);
}
}
20