In this article, you will be learning Laravel amazon s3 file upload. In this tutorial, we will show you step-by-step how to upload files and images to the amazon s3 server using Laravel. You can use the below example with Laravel 6, Laravel 7, Laravel 8, and Laravel 9 versions.
Let’s follow the below steps:
Step 1: Create S3 Bucket
Create the bucket and user using the below steps:
- Go to Amazon Web Services Sign-In and log in.
- Click on S3 from Service Lists.
- Click on the “Create Bucket” button and you will find the below forms. Enter your bucket name there.
- Create IAM User.
- Click on “Create User” button as shown below.
- Now, add User Name and choose “Programmatic access” from access type. Then, click on next.
- Next, Select “Attach Existing Policy Directly” and choose “AmazonS3FullAccess” from permission link.
- It’s optional, therefore you can skip and click to next.
- You can view user details and then click on “Create User” button.
- Now, you will see created user in link. There is an “Access Key ID” and “Secret Access Key” that we need on .env files.
Step 2: Install Laravel 8
We need to get fresh Laravel 8 version application using below command, because we are going from scratch, open your terminal OR command prompt and run below command:
composer create-project --prefer-dist laravel/laravel blog
Step 3: Install Amazon S3 Composer Package
If you have not installed amazon s3 package, then you have to install s3 composer package by using following command:
composer require --with-all-dependencies league/flysystem-aws-s3-v3 "^1.0"
Step 4: Configure AWS S3 Credentials
Add aws credentials in your .env file as like below:
.env
AWS_ACCESS_KEY_ID=AKIAVAEWWDTDY... AWS_SECRET_ACCESS_KEY=Zp/wgwj46SAC.... AWS_DEFAULT_REGION=us-east-2 AWS_BUCKET=itsolutionstuff-bucket AWS_USE_PATH_STYLE_ENDPOINT=false
Step 5: Create Routes
In next step, we will add new two routes in web.php file. One route for generate form and another for post method, let’s create both route as bellow listed:
routes/web.php
<?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\ImageUploadController; Route::get('image-upload', [ ImageUploadController::class, 'imageUpload' ])->name('image.upload'); Route::post('image-upload', [ ImageUploadController::class, 'imageUploadPost' ])->name('image.upload.post');
Step 6: Create ImageUploadController
Let’s create new ImageUploadController and we will be writing two method imageUpload() and imageUploadPost(). One method will handle the get method another one for post. Add the below code.
app/Http/Controllers/ImageUploadController.php
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class ImageUploadController extends Controller { /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function imageUpload() { return view('imageUpload'); } /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function imageUploadPost(Request $request) { $request->validate([ 'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048', ]); $imageName = time().'.'.$request->image->extension(); $path = Storage::disk('s3')->put('images', $request->image); $path = Storage::disk('s3')->url($path); /* Store $imageName name in DATABASE from HERE */ return back() ->with('success','You have successfully upload image.') ->with('image', $path); } }
Step 7: Create Blade File
Create imageUpload.blade.php file and in this file, we will create a form with a file input button. Copy below and put it on that file.
resources/views/imageUpload.blade.php
<!DOCTYPE html> <html> <head> <title>laravel File Uploading with Amazon S3</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="panel panel-primary"> <div class="panel-heading"><h2>laravel File Uploading with Amazon S3</h2></div> <div class="panel-body"> @if ($message = Session::get('success')) <div class="alert alert-success alert-block"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>{{ $message }}</strong> </div> <img src="{{ Session::get('image') }}"> @endif @if (count($errors) > 0) <div class="alert alert-danger"> <strong>Whoops!</strong> There were some problems with your input. <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <form action="{{ route('image.upload.post') }}" method="POST" enctype="multipart/form-data"> @csrf <div class="row"> <div class="col-md-6"> <input type="file" name="image" class="form-control"> </div> <div class="col-md-6"> <button type="submit" class="btn btn-success">Upload</button> </div> </div> </form> </div> </div> </div> </body> </html>
Run and check it –
Run our example and the below command :
php artisan serve
Output