Upload multiple images and rename them using drag & drop UI using dropzone.js

#javascript #ux #webdev #php

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"]);
}
}