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

    33

    This website collects cookies to deliver better user experience

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