Upload multiple images and rename them using drag & drop UI using dropzone.js
Tags: javascript, ux, webdev, php
Published: 2022-01-01 11:18:17

## 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](https://raw.githubusercontent.com/sahilkashyap64/dropzone-sortablejs-multiupload-rename/master/img/UI%20formultiupload%20and%20rename.png)


## 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](https://sahilkashyap64.github.io/dropzone-sortablejs-multiupload-rename/)
[video demo](https://user-images.githubusercontent.com/32007662/147849196-5ba3c92c-1fd4-49e4-a83f-e7e998ba05bb.mp4)
[Github](https://github.com/sahilkashyap64/dropzone-sortablejs-multiupload-rename)
- For backend check gist [code](https://gist.github.com/sahilkashyap64/7db7a3d0e2877158bcd293223564707e)

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.

- Backend code to get the pagination and search in search2
[Article:Optimal way to large data in dropdown](https://dev.to/sahilkashyap64/pagination-in-selectbox-dropdown-optimal-way-to-show-large-data-in-selectbox-using-select2-3fcg)
- Sql query multi-update with specified ids [Credits](https://dev.to/kodeas/bulk-update-multiple-records-with-separate-data-laravel-4j7k)
```sql
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
```php
   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"]);
}
}
```