Upload multiple images in Laravel 11 with preview and deletion.

Laravel 11 introduces a simple and efficient way to manage the upload of multiple images, allowing developers to implement preview and deletion functionality. This new approach makes it easier for users to select, view, and remove images before finalizing uploads, thereby enhancing the user experience in web applications. Below is a detailed explanation of how to implement this feature in your Laravel project.

Installation and Environment Configuration

Before you begin, ensure that you have Laravel 11 installed in your development environment. If you haven't done so yet, you can follow the official Laravel documentation to complete the installation. Additionally, you will need to make a couple of configurations in your .env file to enable file storage:

FILESYSTEM_DRIVER=public

Don't forget to run the command to create the file storage:

php artisan storage:link

Creating the Database Migration

To store the uploaded images, you first need to create a migration in the database. This is done by creating a new table that will contain relevant information about each image. Use the following command:

php artisan make:migration create_images_table --create=images

In the created migration, add the following code:

public function up()
{
    Schema::create('images', function (Blueprint $table) {
        $table->id();
        $table->string('file_path');
        $table->timestamps();
    });
}

Finally, run the migration with:

php artisan migrate

Implementing the Controller

Next, you will need a controller to handle the image upload logic. You can create a new one with the following command:

php artisan make:controller ImageController

Once created, add the following functions:

public function store(Request $request)
{
    $images = $request->file('images');

    foreach ($images as $image) {
        $path = $image->store('images', 'public');

        Image::create([
            'file_path' => $path,
        ]);
    }

    return back()->with('success', 'Images uploaded successfully');
}

Creating the View

Next, you need to design the view from which users will be able to upload images. In the corresponding Blade file, you can use the following code:

<form action="{{ route('images.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <input type="file" name="images[]" multiple onchange="previewImages(event)">
    <div id="preview"></div>
    <button type="submit">Upload Images</button>
</form>

<script>
function previewImages(event) {
    const preview = document.getElementById('preview');
    preview.innerHTML = '';
    const files = event.target.files;

    for (let i = 0; i < files.length; i++) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.width = '100px';
            img.style.margin = '10px';
            preview.appendChild(img);
        };
        reader.readAsDataURL(files[i]);
    }
}
</script>

This code allows users to select multiple images and see a preview of them immediately after selection.

Deleting Images

To implement the deletion functionality, add an additional method in the controller:

public function destroy($id)
{
    $image = Image::findOrFail($id);
    Storage::disk('public')->delete($image->file_path);
    $image->delete();

    return back()->with('success', 'Image deleted successfully');
}

In the view, you can add a delete button next to each uploaded image.

Conclusion

With these steps, you can effectively implement a multi-image upload system in Laravel 11, complete with preview and delete options. This advancement not only enhances the functionality of your application but also offers a more user-friendly experience.

I encourage you to keep reading more news of this kind on my blog. Don’t miss it!