Introduction
Uploading an image to the server can be challenging when you are new to laravel or need to know the exact process of uploading an image to the server. Hey! What’s everybody? Today, I’m back with another brand-new topic about the Laravel image upload tutorial.
In this tutorial, you will learn how to upload an image to the server easily. I will also show you some best practices when we write our codes.
Creating upload form for laravel image upload tutorial
So, first thing first, you must create/download a fresh copy of Laravel from Git Hub. Then, you must connect your Laravel project to your desired database; in this case, I’m using MySQL.
Then, you must create a view file inside your resources/views folder and name it laravel-image-upload.blade.php. Now open your view file, paste the below code snippet into the blade file, and save it.
<!doctype html> <html> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.rtl.min.css"> <title>Laravel Image Upload Tutorial</title> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-6"> <h1>Laravel Image Upload Tutorial</h1> <form action="" method="post" enctype="multipart/form-data"> @csrf <div class="form-control"> <label for="image">Upload your image</label> <input type="file" class="form-control" name="image"> </div> <div class="form-control"> <button type="submit" class="btn btn-primary">Upload Image</button> </div> </form> </div> </div> </div> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Creating model, migration and controller for laravel image upload process
After that, you must create a Model, Migration, & Controller for Image using the artisan command like the one below.
php artisan make:model Image -mc
Edit image migration file
First, we will add some fields to our create_images_table migration php file. You may also add or remove more fields to the migration file later. Now, please copy and paste it into your create_images_table migration file.
<?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('images', function (Blueprint $table) {
$table->id();
$table->string('image');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('images');
}
};
Adding model fillable properties
Let’s go to our next step: open your Image model and add fillable property from our migration file like below.
protected $fillable = ['image'];
Now, your terminal, let’s migrate our Listing model using the following command.
php artisan migrate
Now, it will confirm that our migration file is complete. Hurrah, we have completed our second step successfully. Now, let’s move on to our next step.
Adding routes for laravel image upload
Now, create a new route for showing the image uploading form. Copy and paste the below code into your web.php file.
Route::get('image/upload', [ImageController::class, 'imageForm']);
Route::post('image/save', [ImageController::class, 'saveImage']);
Adding logic to the controller
Now open your ImageController and paste the following code from here below
public function imageForm() {
return view('laravel-image-upload');
}
public function saveImage(Request $request) {
$request->validate([
'image' => 'required|image',
]);
$uploadedImage = date('Y-m-d').'-'.time().'_'.'.'.request()->image->getClientOriginalExtension();
$request->image->move(public_path('assets/images'), $uploadedImage);
}
At last, we will start our local server using our artisan command.
php arttisan serve. If there is no problem, our project is now running at http://127.0.0.1:8000/ or http://locahost:8000/. If want to know about uploading files or related this type of things? then you can check out their documentation.
Conclusion: Finished! That’s all about our laravel image upload tutorial. Even though this tutorial cannot make you an expert in developing such a functionality, it will give you some fundamental knowledge of making this key functionality in the future. Thank you so much for reading the whole tutorial from the beginning. If this tutorial helps you a little, please share this post on social media. If you have any queries then please contact via our Contact Us Page.
