Drag and Drop File Upload in React & Laravel — Step-by-Step Tutorial Part 1
In this tutorial, we will create a drag-and-drop file uploader using React 19 and Laravel 12. The user will choose a file, and we will store it in our database. In this tutorial, we will handle only one file upload at a time. In this first part, we will handle the backend.
Create the File Model & Migration
First, let's create the file model and migration using the command:
php artisan make:model File -m
Inside the migration, add the code:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('files', function (Blueprint $table) {
$table->id();
$table->string('filename');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('files');
}
};
Create the File Controller
Next, let's create the file controller using the command:
php artisan make:controller FileController
Inside, add the code:
<?php
namespace App\Http\Controllers;
use App\Models\File;
use Illuminate\Http\Request;
class FileController extends Controller
{
public function upload(Request $request)
{
$file = $request->file('file');
$image_name = time().'_'.$file->getClientOriginalName();
$path = $file->storeAs('images',$image_name,'public');
// Save file info to database
$file = new File();
$file->filename = $path;
$file->save();
return response()->json([
'message' => 'File uploaded successfully!',
'file' => $file
]);
}
}
Adding the Route
Next, let's add the api routes using the command:
php artisan install:api
Inside, add the code:
Route::post('upload', [FileController::class, 'upload']);