Craig Jones

Hi there 👋

My name is Craig. I am a Software Engineer based in the NW of England. This blog will be a dump of my learnings. Expect it to be littered with Tech articles, DIY and trying to learn more about my Ford Focus ST.


Multi Image Upload using React Dropzone, Laravel and Amazon S3

Laravel React Dropzone
Laravel React Dropzone


Having scoured the internet for a comprehensive guide on implementing a multi-image upload system using Laravel, React Dropzone, and Amazon S3, I found myself coming up short. Fueled by the need to bridge this gap, I’ve decided to create my own guide based on the requirements I encountered. It’s worth noting that I am relatively new to Laravel, having only used it a few times, and PHP is not my native programming language. So, expect some room for improvement.


This guide assumes a basic understanding and setup:

  • An active AWS account with an S3 bucket for storing images.
  • An existing Laravel project (I’m using a Laravel Breeze starter kit with React).
  • A model with a json field, cast as an array, to store multiple image URLs.

Base Setup + Setting up Image Upload/Delete Endpoints

AWS Configuration in .env

Update the .env file with your AWS credentials and bucket information:

# .env


Create a ‘filesystem disk’ in config/filesystems.php:

// config/filesystems.php

'disks' => [
    // ...
    'property_images' => [
        'driver' => 's3',
        'key' => env('AWS_ACCESS_KEY_ID'),
        'secret' => env('AWS_SECRET_ACCESS_KEY'),
        'region' => env('AWS_DEFAULT_REGION'),
        'bucket' => env('AWS_BUCKET'),
        'url' => env('AWS_URL'),
        'endpoint' => env('AWS_ENDPOINT'),
        'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
        'throw' => false,
        'visibility' => 'public',
        'root' => 'property-images',

Controller Methods

In your controller (PropertyController in my example), add methods for image upload and delete:

// PropertyController.php

public function image_upload(Request $request)
    $images = [];

    if ($files = $request->file('files')) {
        foreach ($files as $image) {
            $image_name = time() . rand(1, 100) . '.' . $image->extension();
            $image = Storage::disk('property_images')->putFileAs('', $image, $image_name);
            $images[] = Storage::disk('property_images')->url($image_name);

    return response()->json(["file_urls" => $images]);

public function image_delete(Request $request)
    $content = $request->all();
    $image_url = $content['image_url'];

    return response()->json(["deleted_file_url" => $image_url]);


Set up routes for the created methods:

// routes/web.php

use App\Http\Controllers\PropertyController;

Route::post('/image-upload', [PropertyController::class, 'image_upload'])->name('');
Route::post('/image-delete', [PropertyController::class, 'image_delete'])->name('image.delete');

Dropzone JS and the View Component

Install react-dropzone:

npm install --save react-dropzone

Include Dropzone CSS in resources/views/app.blade.php:

<!-- resources/views/app.blade.php -->

<!-- CSS -->
<link rel="stylesheet" href="" integrity="sha512-7uSoC3grlnRktCWoO4LjHMjotq8gf9XDFQerPuaph+cqR7JC9XKGdvN+UwZMC14aAaBDItdRj3DcSDs4kMWUgg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Create a MyDropzone component:

// resources/js/Components/Dropzone.jsx

import React, { useCallback } from 'react';
import { IoMdCloseCircle } from 'react-icons/io';
import axios from 'axios';
import { useDropzone } from 'react-dropzone';

const MyDropzone = ({ images, setData }) => {
  const onDrop = useCallback((acceptedFiles) => {
          files: acceptedFiles
          headers: {
            'Content-Type': 'multipart/form-data'
      .then(({ data }) => {
        setData('images', images.concat(data.file_urls));
      .catch((error) => {

  const handleDeleteImage = (image) => {
      .post('/image-delete', {
        image_url: image.split('/property-images/')[1]
      .then(() => {
          images.filter((img) => img !== image)
      .catch((error) => {

  const { getRootProps, getInputProps, isDragActive } = useDropzone({

  return (
      <div className="border-dashed border-4 border-slate-300 rounded-xl p-8 mb-4 flex justify-center font-montserrat hover:cursor-pointer" {...getRootProps()}>
        <input {...getInputProps()} />
        {isDragActive ? <p>Drop the files here ...</p> : <p>Drag 'n' drop some files here, or click to select files</p>}
      <div className="grid grid-cols-3 md:grid-cols-6 gap-2">
        {images?.map((image) => (
          <div className="relative" key={image}>
            <IoMdCloseCircle onClick={() => handleDeleteImage(image)} className="absolute top-2 right-2 bg-white rounded-full text-red-700 text-xl" />
            <img className="object-cover h-32 w-full" src={image} alt="" />

export default MyDropzone;


In conclusion, this guide provides a comprehensive solution for implementing a multi-image upload system using React Dropzone, Laravel, and Amazon S3. By following these steps, you can seamlessly integrate image upload and deletion functionalities into your web application.

Next steps could include adding error handling mechanisms, enhancing the user interface, and implementing additional features such as a loading state during image uploads. Thank you for reading, and I hope this guide proves beneficial in your development journey.