{"id":1633,"date":"2024-09-17T08:12:02","date_gmt":"2024-09-17T08:12:02","guid":{"rendered":"https:\/\/debugspot.com\/?p=1633"},"modified":"2024-09-17T08:58:13","modified_gmt":"2024-09-17T08:58:13","slug":"how-to-upload-image-in-aws-s3-in-laravel","status":"publish","type":"post","link":"https:\/\/debugspot.com\/blogs\/how-to-upload-image-in-aws-s3-in-laravel\/","title":{"rendered":"Effortlessly Upload Images to AWS S3 in Laravel | Complete Step-by-Step Guide"},"content":{"rendered":"<p>Learn how to upload images to AWS S3 in Laravel using Laravel&#8217;s Storage API. This tutorial explains the complete process, from setting up your S3 bucket to configuring Laravel and uploading your files seamlessly.<\/p>\n<p>Uploading images to AWS S3 in Laravel can significantly enhance file storage and management. AWS S3 is a robust, scalable cloud storage solution, and Laravel provides a seamless API to integrate S3 storage into your applications. In this tutorial, we&#8217;ll guide you through the steps of setting up AWS S3 and Laravel to handle image uploads efficiently.<\/p>\n<p>Why AWS S3?<\/p>\n<ul>\n   <li99.9% availability.<\/li>\n<li>Configurable permissions for secure file access.<\/li>\n<li>Scalability, allowing files between 0 bytes and 5 gigabytes.<\/li>\n<\/ul>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/debugspot.com\/blogs\/how-to-upload-image-in-aws-s3-in-laravel\/#Step_1_Install_Laravel\" >Step 1: Install Laravel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/debugspot.com\/blogs\/how-to-upload-image-in-aws-s3-in-laravel\/#Step_2_Create_an_S3_Bucket\" >Step 2: Create an S3 Bucket<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/debugspot.com\/blogs\/how-to-upload-image-in-aws-s3-in-laravel\/#21_Sign_in_to_AWS_Management_Console\" >2.1. Sign in to AWS Management Console<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/debugspot.com\/blogs\/how-to-upload-image-in-aws-s3-in-laravel\/#22_Open_the_S3_Service\" >2.2. Open the S3 Service<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/debugspot.com\/blogs\/how-to-upload-image-in-aws-s3-in-laravel\/#23_Create_a_New_Bucket\" >2.3. Create a New Bucket<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/debugspot.com\/blogs\/how-to-upload-image-in-aws-s3-in-laravel\/#24_Configure_Bucket_Settings\" >2.4. Configure Bucket Settings<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/debugspot.com\/blogs\/how-to-upload-image-in-aws-s3-in-laravel\/#25_Review_and_Create\" >2.5. Review and Create<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/debugspot.com\/blogs\/how-to-upload-image-in-aws-s3-in-laravel\/#Step_3_Install_AWS_S3_Filesystem_Package\" >Step 3: Install AWS S3 Filesystem Package<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/debugspot.com\/blogs\/how-to-upload-image-in-aws-s3-in-laravel\/#Step_4_Create_Routes\" >Step 4: Create Routes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/debugspot.com\/blogs\/how-to-upload-image-in-aws-s3-in-laravel\/#Step_5_Create_ImageUploadController\" >Step 5: Create ImageUploadController<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/debugspot.com\/blogs\/how-to-upload-image-in-aws-s3-in-laravel\/#Step_6_Create_the_Blade_View_for_Image_Upload\" >Step 6: Create the Blade View for Image Upload<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/debugspot.com\/blogs\/how-to-upload-image-in-aws-s3-in-laravel\/#Step_7_Run_the_Laravel_Application\" >Step 7: Run the Laravel Application<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/debugspot.com\/blogs\/how-to-upload-image-in-aws-s3-in-laravel\/#Summary\" >Summary<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/debugspot.com\/blogs\/how-to-upload-image-in-aws-s3-in-laravel\/#You_may_also_find_interesting\" >You may also find interesting:<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h4><span class=\"ez-toc-section\" id=\"Step_1_Install_Laravel\"><\/span>Step 1: Install Laravel<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To begin, set up a fresh Laravel project by running the following command in your terminal:<\/p>\n<pre class=\"highlight-height line-numbers language-javascript\"><code class=\"language-javascript\">composer create-project --prefer-dist laravel\/laravel upload-image-aws-S3<\/code><\/pre>\n<h4><span class=\"ez-toc-section\" id=\"Step_2_Create_an_S3_Bucket\"><\/span>Step 2: Create an S3 Bucket<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h5><span class=\"ez-toc-section\" id=\"21_Sign_in_to_AWS_Management_Console\"><\/span>2.1. Sign in to AWS Management Console<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li> Sign in to AWS Management Console: Log in to your AWS account.<\/li>\n<\/ul>\n<h5><span class=\"ez-toc-section\" id=\"22_Open_the_S3_Service\"><\/span>2.2. Open the S3 Service<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p><img decoding=\"async\" src=\"https:\/\/debugspot.com\/blogs\/wp-content\/uploads\/2024\/09\/open-s3-1.png\" alt=\"How to open S3 Bucket in AWS\" \/><\/p>\n<ul>\n<li>Open S3 Service: Search for S3 in the AWS search bar.<\/li>\n<\/ul>\n<h5><span class=\"ez-toc-section\" id=\"23_Create_a_New_Bucket\"><\/span>2.3. Create a New Bucket<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p><img decoding=\"async\" src=\"https:\/\/debugspot.com\/blogs\/wp-content\/uploads\/2024\/09\/create-bucket.png\" alt=\"how to Create bucket in AWS\" \/><\/p>\n<ul>\n<li>Create a New Bucket: Click &#8220;Create bucket,&#8221; provide a unique name, and choose your region.<\/li>\n<li>Provide a globally unique bucket name and select your desired AWS region.<\/li>\n<\/ul>\n<h5><span class=\"ez-toc-section\" id=\"24_Configure_Bucket_Settings\"><\/span>2.4. Configure Bucket Settings<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>Configure Bucket Settings: Leave the public access block enabled unless you want to make your bucket public.<\/li>\n<li>Enable Bucket Versioning and Tags as needed for easier management and organization.<\/li>\n<\/ul>\n<h5><span class=\"ez-toc-section\" id=\"25_Review_and_Create\"><\/span>2.5. Review and Create<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>Review and Create: Finalize your settings and create the bucket<\/li>\n<\/ul>\n<p>Note: Your bucket name must be globally unique across all AWS regions.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Step_3_Install_AWS_S3_Filesystem_Package\"><\/span>Step 3: Install AWS S3 Filesystem Package<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Now, we need to install the S3 filesystem package to handle file uploads in Laravel. Run the following composer command:<\/p>\n<pre class=\"highlight-height line-numbers language-javascript\"><code class=\"language-javascript\">composer require league\/flysystem-aws-s3-v3<\/code><\/pre>\n<p>Next, open the .env file in your Laravel project and add your AWS S3 credentials:<\/p>\n<pre class=\"highlight-height line-numbers language-javascript\"><code class=\"language-javascript\">\r\nAWS_ACCESS_KEY_ID=your-access-key-id\r\nAWS_SECRET_ACCESS_KEY=your-secret-access-key\r\nAWS_DEFAULT_REGION=your-region\r\nAWS_BUCKET=your-s3-bucket\r\n<\/code><\/pre>\n<p>Note: If you&#8217;re running your web app without HTTPS, add &#8216;scheme&#8217; => &#8216;http&#8217; to your config\/filesystems.php under the &#8216;s3&#8217; array to avoid SSL certificate errors.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Step_4_Create_Routes\"><\/span>Step 4: Create Routes<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Define the necessary routes in the routes\/web.php file to handle image uploads:<\/p>\n<pre class=\"highlight-height line-numbers language-javascript\"><code class=\"language-javascript\">\r\nuse Illuminate\\Support\\Facades\\Route;\r\nuse App\\Http\\Controllers\\ImageUploadController;\r\n  \r\nRoute::get('image-upload', [ImageUploadController::class, 'imageUpload'])->name('imageUpload');\r\nRoute::post('image-upload', [ImageUploadController::class, 'store' ])->name('store');  \r\n<\/code><\/pre>\n<h4><span class=\"ez-toc-section\" id=\"Step_5_Create_ImageUploadController\"><\/span>Step 5: Create ImageUploadController <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Generate the controller for handling image uploads using the following Artisan command:<\/p>\n<pre class=\"highlight-height line-numbers language-javascript\"><code class=\"language-javascript\">php artisan make:controller ImageUploadController<\/code><\/pre>\n<p>Now, open the newly created app\/Http\/Controllers\/ImageUploadController.php and add the logic for handling file uploads to AWS S3:<\/p>\n<pre class=\"highlight-height line-numbers language-javascript\"><code class=\"language-javascript\">\r\nnamespace App\\Http\\Controllers;\r\n\r\nuse Illuminate\\Http\\Request;\r\nuse Illuminate\\Support\\Facades\\Storage;\r\n  \r\nclass ImageUploadController extends Controller\r\n{\r\n    public function imageUpload()\r\n    {\r\n        return view('image-upload');\r\n    }\r\n  \r\n    public function store(Request $request)\r\n    {\r\n        $request->validate([\r\n            'image' => 'required|mimes:jpeg,png,jpg,gif,svg|max:2048',\r\n        ]);\r\n  \r\n        $imageName = $request->image->getClientOriginalName();\r\n        $imagePath = 'uploads\/' . $imageName;\r\n  \r\n        $path = Storage::disk('s3')->put($imagePath, file_get_contents($request->image));\r\n        $path = Storage::disk('s3')->url($path);\r\n  \r\n        return back()->with('success', 'Image uploaded successfully!');\r\n    }\r\n} \r\n<\/code><\/pre>\n<h4><span class=\"ez-toc-section\" id=\"Step_6_Create_the_Blade_View_for_Image_Upload\"><\/span>Step 6: Create the Blade View for Image Upload<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Create a Blade template to handle the image upload form. Save the file as resources\/views\/image-upload.blade.php:<\/p>\n<pre class=\"highlight-height line-numbers language-javascript\"><code class=\"language-javascript\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n   &lt;head&gt;\r\n      &lt;title&gt;How to Upload Image in AWS S3 in Laravel&lt;\/title&gt;\r\n      &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/css\/bootstrap.min.css&quot;&gt;\r\n   &lt;\/head&gt;\r\n   &lt;body&gt;\r\n      &lt;div class=&quot;container&quot;&gt;\r\n         &lt;div class=&quot;panel panel-primary&quot;&gt;\r\n            &lt;div class=&quot;panel-heading&quot;&gt;\r\n               &lt;h2&gt;Laravel Image upload in AWS S3 bucket&lt;\/h2&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=&quot;panel-body&quot;&gt;\r\n               @if ($message = Session::get('success'))\r\n                   &lt;div class=&quot;alert alert-success alert-block&quot;&gt;\r\n                      &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot;&gt;&times;&lt;\/button&gt;\r\n                      &lt;strong&gt;{{ $message }}&lt;\/strong&gt;\r\n                   &lt;\/div&gt;\r\n               @endif\r\n\r\n               @if (count($errors) &gt; 0)\r\n               &lt;div class=&quot;alert alert-danger&quot;&gt;\r\n                  &lt;strong&gt;Whoops!&lt;\/strong&gt; There were some problems with your input.\r\n                  &lt;ul&gt;\r\n                     @foreach ($errors-&gt;all() as $error)\r\n                     &lt;li&gt;{{ $error }}&lt;\/li&gt;\r\n                     @endforeach\r\n                  &lt;\/ul&gt;\r\n               &lt;\/div&gt;\r\n               @endif\r\n\r\n               &lt;form action=&quot;{{ route('store') }}&quot; method=&quot;POST&quot; enctype=&quot;multipart\/form-data&quot;&gt;\r\n                  @csrf\r\n                  &lt;div class=&quot;row&quot;&gt;\r\n                     &lt;div class=&quot;col-md-6&quot;&gt;\r\n                        &lt;input type=&quot;file&quot; name=&quot;image&quot; class=&quot;form-control&quot;\/&gt;\r\n                     &lt;\/div&gt;\r\n                     &lt;div class=&quot;col-md-6&quot;&gt;\r\n                        &lt;button type=&quot;submit&quot; class=&quot;btn btn-success&quot;&gt;Upload File...&lt;\/button&gt;\r\n                     &lt;\/div&gt;\r\n                  &lt;\/div&gt;\r\n               &lt;\/form&gt;\r\n            &lt;\/div&gt;\r\n         &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n   &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<h4><span class=\"ez-toc-section\" id=\"Step_7_Run_the_Laravel_Application\"><\/span>Step 7: Run the Laravel Application<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Now that everything is set up, run the Laravel application using:<\/p>\n<pre class=\"highlight-height line-numbers language-javascript\"><code class=\"language-javascript\"> php artisan serve <\/code><\/pre>\n<p>Visit the route \/image-upload in your browser to upload images to AWS S3.<\/p>\n<p>For more in-depth Laravel tutorials and best practices, check out<a href=\"https:\/\/laravel.com\/docs\/11.x\/readme\" target=\"_blank\" rel=\"noopener\"> Laravel\u2019s official documentation<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Uploading images to AWS S3 with Laravel is straightforward and provides powerful cloud storage capabilities. By leveraging the scalability of AWS and the ease of Laravel&#8217;s Storage API, you can efficiently manage large file uploads in your applications.<\/p>\n<h5><span class=\"ez-toc-section\" id=\"You_may_also_find_interesting\"><\/span>You may also find interesting:<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p><a title=\"Find the Nearest Location Using Latitude and Longitude in Laravel \u2013 Effortless 2024 Guide\" href=\"https:\/\/debugspot.com\/blogs\/find-nearest-location-laravel-latitude-longitude\/\" target=\"_blank\" rel=\"noopener\">Find the Nearest Location Using Latitude and Longitude in Laravel \u2013 Effortless 2024 Guide<br \/>\n<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to upload images to AWS S3 in Laravel using Laravel&#8217;s Storage API. This tutorial explains the complete process, from setting up your S3 bucket to configuring Laravel and uploading your files seamlessly. Uploading images to AWS S3 in Laravel can significantly enhance file storage and management. AWS S3 is a robust, scalable cloud storage solution, and Laravel provides a seamless API to integrate S3 storage into your applications. In this tutorial, we&#8217;ll guide you through the steps of setting up AWS S3 and Laravel to handle image uploads efficiently. Why AWS S3? &#8216;http&#8217; to your config\/filesystems.php under the &#8216;s3&#8217; array to avoid SSL certificate errors. Step 4: Create Routes Define the necessary routes in the routes\/web.php file to handle image uploads: use Illuminate\\Support\\Facades\\Route; use App\\Http\\Controllers\\ImageUploadController; Route::get(&#8216;image-upload&#8217;, [ImageUploadController::class, &#8216;imageUpload&#8217;])->name(&#8216;imageUpload&#8217;); Route::post(&#8216;image-upload&#8217;, [ImageUploadController::class, &#8216;store&#8217; ])->name(&#8216;store&#8217;); Step 5: Create ImageUploadController Generate the controller for handling image uploads using the following Artisan command: php artisan make:controller ImageUploadController Now, open the newly created app\/Http\/Controllers\/ImageUploadController.php and add the logic for handling file uploads to AWS S3: namespace App\\Http\\Controllers; use Illuminate\\Http\\Request; use Illuminate\\Support\\Facades\\Storage; class ImageUploadController extends Controller { public function imageUpload() { return view(&#8216;image-upload&#8217;); } public function store(Request $request) { $request->validate([ &#8216;image&#8217; => &#8216;required|mimes:jpeg,png,jpg,gif,svg|max:2048&#8217;, ]); $imageName &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_lock_modified_date":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1633","post","type-post","status-publish","format-standard","hentry","category-laravel"],"acf":[],"_links":{"self":[{"href":"https:\/\/debugspot.com\/blogs\/wp-json\/wp\/v2\/posts\/1633"}],"collection":[{"href":"https:\/\/debugspot.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/debugspot.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/debugspot.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/debugspot.com\/blogs\/wp-json\/wp\/v2\/comments?post=1633"}],"version-history":[{"count":7,"href":"https:\/\/debugspot.com\/blogs\/wp-json\/wp\/v2\/posts\/1633\/revisions"}],"predecessor-version":[{"id":1635,"href":"https:\/\/debugspot.com\/blogs\/wp-json\/wp\/v2\/posts\/1633\/revisions\/1635"}],"wp:attachment":[{"href":"https:\/\/debugspot.com\/blogs\/wp-json\/wp\/v2\/media?parent=1633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/debugspot.com\/blogs\/wp-json\/wp\/v2\/categories?post=1633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/debugspot.com\/blogs\/wp-json\/wp\/v2\/tags?post=1633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}