KBE
Reputation: 21
Upload multiple images, display a list with filename and new filename, and handle renaming on both source and destination directories(Laravel + AJAX)?
I’m working on a Laravel project where I need to implement a multiple image upload feature with the following requirements:
- Shared Directories:
The source folder and destination folder are network-shared paths. After uploading the files to the destination folder with the new names, the files should be renamed in the source folder as well.
My Problem:
However, I’m struggling with:
Renaming the files in both the source directories.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Upload with Rename</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h2>Upload and Rename Images</h2> <input type="file" id="images" multiple> <table id="imageTable" border="1"> <thead> <tr> <th>Preview</th> <th>Original Filename</th> <th>New Filename</th> <th>Actions</th> </tr> </thead> <tbody></tbody> </table> <button id="uploadImages">Upload</button> <!-- Modal for Preview --> <div id="previewModal" style="display: none;"> <span id="closeModal" style="cursor: pointer;">Close</span> <img id="previewImage" src="" style="max-width: 100%; height: auto;"> </div> <script> $(document).ready(function() { // Handle image selection $('#images').change(function(event) { let files = event.target.files; let tableBody = $('#imageTable tbody'); tableBody.empty(); // Clear previous data $.each(files, function(index, file) { let fileRow = `<tr> <td><img src="${URL.createObjectURL(file)}" width="100" height="100"></td> <td>${file.name}</td> <td><input type="text" name="newFilename[]" class="newFilename"></td> <td><button class="deleteRow">Delete</button></td> </tr>`; tableBody.append(fileRow); }); }); // Handle double click to preview image $(document).on('dblclick', '#imageTable tbody tr', function() { let imgSrc = $(this).find('img').attr('src'); $('#previewImage').attr('src', imgSrc); $('#previewModal').show(); }); // Close the image preview modal $('#closeModal').click(function() { $('#previewModal').hide(); }); // Handle delete row $(document).on('click', '.deleteRow', function() { $(this).closest('tr').remove(); }); // Upload images $('#uploadImages').click(function() { let formData = new FormData(); let files = $('#images')[0].files; // Loop through each file and add to FormData $('#imageTable tbody tr').each(function(index, row) { let newFilename = $(row).find('.newFilename').val(); if (newFilename === '') { // Remove row if new filename is empty $(row).remove(); } else { formData.append('images[]', files[index]); formData.append('newFilenames[]', newFilename); } }); // AJAX to upload images and rename $.ajax({ url: '/upload-images', method: 'POST', data: formData, processData: false, contentType: false, success: function(response) { alert('Images uploaded successfully!'); }, error: function(err) { alert('Error uploading images.'); } }); }); }); </script> </body>
Route code:
Route::post('/upload-images', 'ImageController@uploadImages');
Controller code:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
class ImageController extends Controller
{
public function uploadImages(Request $request)
{
$images = $request->file('images');
$newFilenames = $request->input('newFilenames');
$sourcePath = '\\\\172.20.1.201\\source\\';
$destinationPath = '\\\\172.20.1.201\\destination\\';
foreach ($images as $index => $image) {
$originalName = $image->getClientOriginalName();
$newName = $newFilenames[$index] . '.' . $image->getClientOriginalExtension();
// Save to destination directory
$destinationFullPath = $destinationPath . $newName;
Storage::disk('network')->putFileAs($destinationPath, $image, $newName);
// Rename file in source folder
$sourceFullPath = $sourcePath . $originalName;
$newSourcePath = $sourcePath . $newName;
if (file_exists($sourceFullPath)) {
rename($sourceFullPath, $newSourcePath);
}
}
return response()->json(['message' => 'Images uploaded and renamed successfully']);
}
}
I have tried above code for delete that time also same error message:
// Move the file to destination and remove from the source folder
if ($file->move($destinationPath, $newName)) {
if (File::exists($source)) {
File::delete($source); // Removing the file from the source directory
}
}
Error Message:
The process cannot access the file because it is being used by another process (code: 32)
We are using file upload Html form some time we will select file from any random folder also that time we will not take care of rename file into source folder.
Upvotes: 2
Views: 49