DEV Community

Cover image for Upload multiple images and rename them using drag & drop UI using dropzone.js
Sahil kashyap
Sahil kashyap

Posted on • Updated on

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

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)

UI drawn using excalidraw

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

  1. Dropdown with search and pagination using select2.
  2. Upload images name on specified id in DB in single update query.
  3. Move all the pics in a folder.
UPDATE db.channels
SET image = CASE  
              WHEN id = 86 THEN "AETV"
              WHEN id = 56 THEN "AHC"
           END 
WHERE ID IN (86, 56)
Enter fullscreen mode Exit fullscreen mode
  • 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"]);
}
}
Enter fullscreen mode Exit fullscreen mode

Discussion (3)

Collapse
bitrusdev profile image
Yusuf Bitrus

Nice project

Collapse
sahilkashyap64 profile image
Sahil kashyap Author

Thank you :D

Collapse
jeanpierre14 profile image
Grace El Bisimwa

Thank you guys ☺️☺️... I hope this gonna help people 💪