{"id":3921,"date":"2020-09-12T13:18:42","date_gmt":"2020-09-12T13:18:42","guid":{"rendered":"https:\/\/programmingfields.com\/?p=3921"},"modified":"2023-09-26T04:24:21","modified_gmt":"2023-09-26T04:24:21","slug":"laravel-8-image-upload-with-validation","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/laravel-8-image-upload-with-validation\/","title":{"rendered":"How to Upload Image in Laravel 8 with Validation"},"content":{"rendered":"\n<p>You can upload images in Laravel 8 with validation. The image uploading is a very common functionality in any form. You can implement Laravel 8 image upload functionality with a validation. In the image validation, you can check the file type, size, resolution, etc. The validation process makes a valid image upload. Today, in this post, I will be showing you the image upload guide in Laravel 8. Also, I will validate the image before uploading it. Then, I will save the file name into the database. So, let&#8217;s create a new project and start uploading an image.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue 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 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmingfields.com\/laravel-8-image-upload-with-validation\/#Prerequisites\" >Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmingfields.com\/laravel-8-image-upload-with-validation\/#Create_Project_For_Laravel_8_Image_Upload\" >Create Project For Laravel 8 Image Upload<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/laravel-8-image-upload-with-validation\/#Create_and_Configure_the_Database\" >Create and Configure the Database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/laravel-8-image-upload-with-validation\/#Create_a_Model_Migration_and_Controller_in_Laravel_8\" >Create a Model, Migration, and Controller in Laravel 8<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmingfields.com\/laravel-8-image-upload-with-validation\/#Add_Fields_in_Migration\" >Add Fields in Migration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmingfields.com\/laravel-8-image-upload-with-validation\/#Add_Fillable_Data_in_Image_Model\" >Add Fillable Data in Image Model<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/programmingfields.com\/laravel-8-image-upload-with-validation\/#Add_Route\" >Add Route<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/programmingfields.com\/laravel-8-image-upload-with-validation\/#Create_a_View_For_Uploading_Image\" >Create a View For Uploading Image<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/programmingfields.com\/laravel-8-image-upload-with-validation\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span><strong>Prerequisites<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For creating the Laravel 8 image upload project, you will require the following tools with the specified version.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>PHP &gt;= 7.3<\/strong><\/li><li><strong>MySQL (version &gt; 5)<\/strong><\/li><li><strong>Apache\/Nginx Server<\/strong><\/li><li><strong>VS Code Editor<\/strong><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Project_For_Laravel_8_Image_Upload\"><\/span><strong>Create Project For Laravel 8 Image Upload<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For creating a project, I will be using the composer. Open the terminal and command prompt and hit the below command.<\/p>\n\n\n\n<pre title=\"create-project\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">composer create-project --prefer-dist laravel\/laravel image-upload<\/code><\/pre>\n\n\n\n<p>Wait while the installation completes of this project.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"901\" height=\"440\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/1.-Create-new-project.png?resize=901%2C440&#038;ssl=1\" alt=\"Create Project For Image Uploading\" class=\"wp-image-3923\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/1.-Create-new-project.png?w=901&amp;ssl=1 901w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/1.-Create-new-project.png?resize=300%2C147&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/1.-Create-new-project.png?resize=768%2C375&amp;ssl=1 768w\" sizes=\"auto, (max-width: 901px) 100vw, 901px\" \/><figcaption>Create Project For Image Uploading<\/figcaption><\/figure><\/div>\n\n\n\n<p>Once, the project has been created, we will create and configure the database.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/laravel-8-crud-application-tutorial-from-scratch\/\" target=\"_blank\" rel=\"noreferrer noopener\">Laravel 8 CRUD Application Tutorial From Scratch<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_and_Configure_the_Database\"><\/span><strong>Create and Configure the Database<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For the database, I will be using the MySQL. So, create a database there and then configure it for the Laravel project.<\/p>\n\n\n\n<pre title=\"create-database\" class=\"wp-block-code\"><code lang=\"sql\" class=\"language-sql\">CREATE DATABASE image_upload;<\/code><\/pre>\n\n\n\n<p>For configuring the database in Laravel, navigate to <strong>.env<\/strong> file. Then add the database credentials there.<\/p>\n\n\n\n<pre title=\".env file\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">DB_CONNECTION=mysql\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_DATABASE=image_upload\nDB_USERNAME=root\nDB_PASSWORD=root<\/code><\/pre>\n\n\n\n<p>Here, the database is synced with the project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Model_Migration_and_Controller_in_Laravel_8\"><\/span><strong>Create a Model, Migration, and Controller in Laravel 8<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For storing the image name, we will require a model and the migration. The model will be synced with the table. The migration file will generate the schema of the table. <\/p>\n\n\n\n<p>You can create a model, migration, and controller in a single line of command.<\/p>\n\n\n\n<pre title=\"create model, migration and controller\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php artisan make:model Image -mc<\/code><\/pre>\n\n\n\n<p>In the above command, the model name is <strong>Image<\/strong>. Then <strong>-m<\/strong> denotes the <strong>migration <\/strong>and <strong>c<\/strong> denotes to the <strong>controller<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"842\" height=\"114\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/2.-Create-model-migration-and-controller.png?resize=842%2C114&#038;ssl=1\" alt=\"Create model migration and controller\" class=\"wp-image-3924\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/2.-Create-model-migration-and-controller.png?w=842&amp;ssl=1 842w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/2.-Create-model-migration-and-controller.png?resize=300%2C41&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/2.-Create-model-migration-and-controller.png?resize=768%2C104&amp;ssl=1 768w\" sizes=\"auto, (max-width: 842px) 100vw, 842px\" \/><figcaption><strong>Create Model, Migration and Controller<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Now, we have the <strong>Image.php<\/strong> model. A <strong>migration<\/strong> named <strong>create_images_table.php<\/strong>. And a controller named <strong>ImageController.php<\/strong>.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a rel=\"noreferrer noopener\" href=\"https:\/\/programmingfields.com\/laravel-8-form-validation-tutorial-for-beginners\/\" target=\"_blank\">Laravel 8 Form Validation Tutorial For Beginners<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_Fields_in_Migration\"><\/span><strong>Add Fields in Migration<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For newly created migration, we will add a field there. Basically, we will store the image name into the table. So, you will have to add the fields as showing below.<\/p>\n\n\n\n<pre title=\"create_images_table.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nuse Illuminate\\Database\\Migrations\\Migration;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Support\\Facades\\Schema;\n\nclass CreateImagesTable extends Migration\n{\n    \/**\n     * Run the migrations.\n     *\n     * @return void\n     *\/\n    public function up()\n    {\n        Schema::create('images', function (Blueprint $table) {\n            $table->id();\n            $table->string('image_name');\n            $table->timestamps();\n        });\n    }\n\n    \/**\n     * Reverse the migrations.\n     *\n     * @return void\n     *\/\n    public function down()\n    {\n        Schema::dropIfExists('images');\n    }\n}\n<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/create-auth-using-jetstream-and-intertia-js-in-laravel-8\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create Auth Using Jetstream and Intertia js in Laravel 8<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_Fillable_Data_in_Image_Model\"><\/span><strong>Add Fillable Data in Image Model<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For the above field, we will have to add the fillable data in the model. So, here the specified field name will sync with the table.<\/p>\n\n\n\n<pre title=\"Image.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nnamespace App\\Models;\n\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\nuse Illuminate\\Database\\Eloquent\\Model;\n\nclass Image extends Model\n{\n    use HasFactory;\n\n    protected $fillable = [\n        \"image_name\"\n    ];\n}\n<\/code><\/pre>\n\n\n\n<p>In the next step, we will migrate the schema.<\/p>\n\n\n\n<pre title=\"migrate-tables\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php artisan migrate<\/code><\/pre>\n\n\n\n<p>The above command will migrate the tables.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"895\" height=\"227\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/3.-Migrate-tables.png?resize=895%2C227&#038;ssl=1\" alt=\"Migrate Tabels\" class=\"wp-image-3925\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/3.-Migrate-tables.png?w=895&amp;ssl=1 895w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/3.-Migrate-tables.png?resize=300%2C76&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/3.-Migrate-tables.png?resize=768%2C195&amp;ssl=1 768w\" sizes=\"auto, (max-width: 895px) 100vw, 895px\" \/><figcaption><strong>Migrate Tabels<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Once the table is migrated, let&#8217;s add the functionality for the image upload.<\/p>\n\n\n\n<p>Firstly, we will call a view inside the function.<\/p>\n\n\n\n<pre title=\"ImageController.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nnamespace App\\Http\\Controllers;\n\nuse Illuminate\\Http\\Request;\nuse App\\Models\\Image;\n\nclass ImageController extends Controller\n{\n    public function index() {\n        return view('image-upload');\n    }\n}\n<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/laravel-7-yajra-datatable-with-server-side-processing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Laravel 7 Yajra DataTable with Server Side Processing<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_Route\"><\/span><strong>Add Route<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>At this time, I will add a route for the above function.<\/p>\n\n\n\n<pre title=\"web.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nuse App\\Http\\Controllers\\ImageController;\nuse Illuminate\\Support\\Facades\\Route;\n\nRoute::get('image', [ImageController::class, 'index']);<\/code><\/pre>\n\n\n\n<p>Then create a view to get the input of the image.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_View_For_Uploading_Image\"><\/span><strong>Create a View For Uploading Image<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For uploading the image, we will have to create a view. So, I am going to create a view named image<\/p>\n\n\n\n<pre title=\"image-upload.blade.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;!doctype html>\n&lt;html lang=\"en\">\n  &lt;head>\n    &lt;title> Laravel 8 Image Upload - Programming Fields&lt;\/title>\n    &lt;meta charset=\"utf-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">\n  &lt;\/head>\n  &lt;body>\n    &lt;div class=\"container mt-5\">\n        &lt;div class=\"row\">\n            &lt;div class=\"col-xl-6 m-auto\">\n                &lt;form action=\"{{url('image\/upload')}}\" method=\"POST\" enctype=\"multipart\/form-data\">\n                    @csrf\n                    &lt;div class=\"card shadow\">\n                        @if(Session::has('success'))\n                            &lt;div class=\"alert alert-success alert-dismissible\">\n                                &lt;button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7&lt;\/button>\n                                {{Session::get('success')}}\n                            &lt;\/div>\n                        @elseif(Session::has('failed'))\n                            &lt;div class=\"alert alert-success alert-dismissible\">\n                                &lt;button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7&lt;\/button>\n                                {{Session::get('failed')}}\n                            &lt;\/div>\n                        @endif\n\n                        &lt;div class=\"card-header\">\n                            &lt;h4 class=\"card-title\"> Laravel 8 Image Upload &lt;\/h4>\n                        &lt;\/div>\n\n                        &lt;div class=\"card-body\">\n                            &lt;div class=\"form-group\">\n                                &lt;label> Image &lt;\/label>\n                                &lt;input type=\"file\" name=\"image\" class=\"form-control\">\n                                {!!$errors->first('image', '&lt;span class=\"text-danger\">:message&lt;\/span>')!!}\n                            &lt;\/div>\n                        &lt;\/div>\n\n                        &lt;div class=\"card-footer\">\n                            &lt;button type=\"submit\" class=\"btn btn-success\"> Upload &lt;\/button>\n                        &lt;\/div>\n                    &lt;\/div>\n                &lt;\/form>\n            &lt;\/div>\n        &lt;\/div>\n    &lt;\/div>\n\n    &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\">&lt;\/script>\n    &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.7\/umd\/popper.min.js\" integrity=\"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1\" crossorigin=\"anonymous\">&lt;\/script>\n    &lt;script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js\" integrity=\"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf\/nJGzIxFDsf4x0xIM+B07jRM\" crossorigin=\"anonymous\">&lt;\/script>\n    &lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n\n\n\n<p>After running the application, you will have the below layout.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"832\" height=\"411\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/5.-Image-upload.png?resize=832%2C411&#038;ssl=1\" alt=\"image upload\" class=\"wp-image-3931\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/5.-Image-upload.png?w=832&amp;ssl=1 832w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/5.-Image-upload.png?resize=300%2C148&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/5.-Image-upload.png?resize=768%2C379&amp;ssl=1 768w\" sizes=\"auto, (max-width: 832px) 100vw, 832px\" \/><figcaption><strong>Image Upload View<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Now, we will be reading the image from this view. So, for reading out the image from the view, add the below function in the <strong>ImageController.php.<\/strong><\/p>\n\n\n\n<pre title=\"ImageController.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\"> \/\/ ---------- [ Upload image ] ---------\n    public function uploadImage(Request $request) {\n\n        $request->validate([\n            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',\n        ]);\n\n        $image      =       time().'.'.$request->image->extension();\n\n        $request->image->move(public_path('uploads'), $image);\n\n        $image      =       Image::create([\"image_name\" => $image]);\n\n        if(!is_null($image)) {\n            return back()->with('success','Success! image uploaded');\n        }\n\n        else {\n            return back()->with(\"failed\", \"Alert! image not uploaded\");\n        }\n    }<\/code><\/pre>\n\n\n\n<p>Now, add a route for the above function.<\/p>\n\n\n\n<pre title=\"web.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">Route::post('image\/upload', [ImageController::class, 'uploadImage']);<\/code><\/pre>\n\n\n\n<p>Save and run the application and choose the file for uploading. So, at very first, I have chosen a zip file.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"690\" height=\"366\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/6.-Choose-input-file.png?resize=690%2C366&#038;ssl=1\" alt=\"Laravel 8 Image Upload \" class=\"wp-image-3932\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/6.-Choose-input-file.png?w=690&amp;ssl=1 690w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/6.-Choose-input-file.png?resize=300%2C159&amp;ssl=1 300w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/><figcaption><strong>Laravel 8 Image Upload <\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Then when I clicked on the upload button, it returned the validation error message.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"709\" height=\"376\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/7.-Image-upload-validation.png?resize=709%2C376&#038;ssl=1\" alt=\"Image Validation Error message\" class=\"wp-image-3933\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/7.-Image-upload-validation.png?w=709&amp;ssl=1 709w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/7.-Image-upload-validation.png?resize=300%2C159&amp;ssl=1 300w\" sizes=\"auto, (max-width: 709px) 100vw, 709px\" \/><figcaption><strong>Image Validation Error message<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>When the validation pass, you will have the success message. Here, you can see the result of the image upload.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"707\" height=\"453\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/8.-Image-uploaded.png?resize=707%2C453&#038;ssl=1\" alt=\"Image Uploaded Successfully\" class=\"wp-image-3939\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/8.-Image-uploaded.png?w=707&amp;ssl=1 707w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/8.-Image-uploaded.png?resize=300%2C192&amp;ssl=1 300w\" sizes=\"auto, (max-width: 707px) 100vw, 707px\" \/><figcaption><strong>Image Uploaded Successfully<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/laravel-guzzle-http-client-for-http-request-handling\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Use Http Client For Request Handling in Laravel 7<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Laravel 8 Image upload has been achieved successfully. Before uploading the Image, we have validated it. So, that every image will be uploaded as per our specified rules. In the next post, we will see <a rel=\"noreferrer noopener\" href=\"https:\/\/programmingfields.com\/laravel-8-multiple-images-upload-with-validation\/\" target=\"_blank\">How to upload Multiple Images in Laravel 8<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can upload images in Laravel 8 with validation. The image uploading is a very common functionality in any form. You can implement Laravel 8 image upload functionality with a validation. In the image validation, you can check the file type, size, resolution, etc. The validation process makes a valid image upload. Today, in this [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":3941,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[2564],"tags":[601,1875,1870,1876],"yst_prominent_words":[134,1027,1755,984,456,259],"class_list":{"0":"post-3921","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-laravel","8":"tag-image-upload","9":"tag-laravel-8-form","10":"tag-laravel-8-routes","11":"tag-laravel-image-validation","12":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/Image-Upload-with-Validation.png?fit=2240%2C1260&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/3921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/comments?post=3921"}],"version-history":[{"count":1,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/3921\/revisions"}],"predecessor-version":[{"id":10537,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/3921\/revisions\/10537"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/3941"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=3921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=3921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=3921"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=3921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}