Hey Artisan
Hope you are doing well. In this tutorial i am going to show you image upload in laravel 8. If you don't konw how to upload image in laravel 8 then you are a right place. I will show you step by step that laravel upload image to database.
Image upload is a common requirement to every web application. So i decided to show you laravel image upload tutorial. Here i will also validate image before upload to the server.
Laravel image upload and display. Here i will upload image into database and i will display it into frontend. Users can upload image only jpeg,png,jpg format.
So let's today's tutorial upload and display image in laravel 7.
So just follow few steps. Here i will use a fresh laravel app .
Step 1 : Install Laravel App
To do it run bellow command in your project directory.
composer create-project --prefer-dist laravel/laravel imageUpload
After running this command create our migration
Step 2 : Create migration
For creating migration run bellow command
php artisan make:model Image -m -r
Then go to migration table database/migrations/images.php and paste the following code.
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateImageTable extends Migration
{
public function up()
{
Schema::create('images', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('image');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('users');
}
}
Then connect your database and migrate your database using below command.
php artisan migrate
Now our database is ready . Now create route
Step 3 : Setup Route
go to your routes/web.php and paste the following code
Route::resource('image','ImageController');
Now we have to create a trait. If you don’t know what is trait in php then please read this article before.
Here we want to create a trait because , if you upload a image using trait then you can use this trait method any where to upload file. Just you have to use this trait in your controller . That’s it. It’s awesome i think.
Step 4: Create a Trait
Go to your app folder and create a folder name Traits and whose namespace will beApp/Traits/ImageUpload.php . Create it manually , not using command line .Now paste this following code to your traits file.
namespace App\Traits;
use Illuminate\Http\UploadedFile;
use Illuminate\Support\Facades\Storage;
trait ImgaeUpload
{
public function UserImageUpload($query) // Taking input image as parameter
{
$image_name = str_random(20);
$ext = strtolower($query->getClientOriginalExtension()); // You can use also getClientOriginalName()
$image_full_name = $image_name.'.'.$ext;
$upload_path = 'image/'; //Creating Sub directory in Public folder to put image
$image_url = $upload_path.$image_full_name;
$success = $query->move($upload_path,$image_full_name);
return $image_url; // Just return image
}
}
Step 5: Setup ImageController'
Now go to your ImageController and paste those following code.
namespace App\Http\Controllers\ImageController
use App\Http\Controllers\Controller;
use App\Image;
use App\Traits\ImageUpload;
use Illuminate\Http\Request;
class ImageControllerextends Controller{
use ImageUpload; //Using our created Trait to access inside trait method
public function store(Request $request)
{
$this->validate($request,[
'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048'
]);
$data = new Image;
$data->image = $request->image;
if($data->image){
try {
$filePath = $this->UserImageUpload($data->image); //Passing $data->image as parameter to our created method
$data->image = $filePath;
$data->save();
return redirect()->back();
} catch (Exception $e) {
//Write your error message here
}
}
}
}
Hope you will understand all the procedures.
Step 6 : Create our blade file
For creating blade file just paste this following code
Step 7 : Retrive Image from database
Now just retrive your image from your controller and print it like below using a foreach loop. Hope you will get it.
That’s it. Hope you will enjoy this tutorial . If you like this tutorial , please share and don’t forget to share your experience. If you wanna learn more about file upload then you can visit here and read this documentation.
#laravel #image-upload #file-upload