Image and File Upload Tutorial in Laravel 11

 <?php


namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
        $users = User::get();
        return view("file_upload", compact("users"));
    }

    /**
     * Show the form for creating a new resource.
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     */
    public function store(Request $request)
    {
        $request->validate([
            "photo" => "required|mimes:png,jpg,jpeg|max:3000"
        ]);

        //Difference between getClientOriginalExtension() and extension() is that user can change extension so we can't get exact extension in case of getClientOriginalExtension() method
        // but extension() method will give exact extension so we mostly use extension() method
        // $file = $request->file("photo");
        // $extension = $file->getClientOriginalExtension();
        // $extension = $file->extension();
        // $extension = $file->hashName();
        // $extension = $file->getClientMimeType();    //getClientMimeType() method provides type of image/pdf/any_document
        // $extension = $file->getSize();  //getSize() method provides file size
        // return $extension;


        // Add image in Database First way
        $file = $request->file("photo");
        $path = $request->file("photo")->store("image", "public");
        User::create([
            "file_name" => $path
        ]);


        // Add image in Database Second way
        // $file = $request->file("photo");
        // $file->move(public_path("uploads"), $file->getClientOriginalName());
        // User::create([
        //     "file_name" => $file->getClientOriginalName()
        // ]);


        // Usage of store() method
        // $path = $request->file("photo")->store("image","local");    //First way
        // $path = $request->photo->store("image","local"); //second way
        // $path = $request->file("photo")->store("image","public");
        // return $path;


        // Usage of storeAs() method
        // getClientOriginalName() method will given original name of user file means User file name will not rename, it will remain as it is
        // $fileName = time() . "_" . $file->getClientOriginalName();
        // $path = $request->file("photo")->storeAs("image", $fileName, "public");
        // return $path;

        return redirect()->route("user.index")->with("status", "User Image Uploaded Successfully.");
    }

    /**
     * Display the specified resource.
     */
    public function show(string $id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     */
    public function edit(string $id)
    {
        $user = User::find($id);
        return view("file_update", compact("user"));
    }

    /**
     * Update the specified resource in storage.
     */
    public function update(Request $request, string $id)
    {
        $user = User::find($id);

        if ($request->hasFile("photo")) {

            $image_path = public_path("storage/") . $user->file_name;

            if (file_exists($image_path)) {
                @unlink($image_path);
            }

            $path = $request->file("photo")->store("image", "public");

            $user->file_name = $path;
            $user->save();

            return redirect()->route("user.index")->with("status", "User Image Updated Successfully.");
        }
    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy(string $id)
    {
        $user = User::find($id);
        $user->delete();

        $image_path = public_path("storage/") . $user->file_name;

        if (file_exists($image_path)) {
            @unlink($image_path);
        }

        return redirect()->route("user.index")->with("status", "User Image Data Deleted Successfully.");
    }
}
Above File is app\Http\Controllers\UserController File





Below File is app\Models\User File
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    public $timestamps = true;
    protected $table = "users";
    protected $fillable = ["file_name"];
}





Below File is database\migrations\2024_12_19_061355_create_users_table 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('users', function (Blueprint $table) {
            $table->id();
            $table->string("file_name");
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('users');
    }
};





Below File is resources\views\file_update.blade.php File
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>File Upload</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2 class="text-center mb-2">Update : File Upload</h2>
            </div>
        </div>
        <form action="{{ route("user.update", $user->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method("PUT")
            <div class="row">
                <div class="col-3">
                    <img id="output" class="img-fluid img-thumnail" src="{{ asset("/storage/".$user->file_name) }}" alt="">
                </div>
                <div class="col-9">
                    <input type="file" onchange="document.querySelector('#output').src=window.URL.createObjectURL(this.files[0])" class="form-control @error("photo") is-invalid @enderror" name="photo" accept=".jpg,.png,.jpeg">
                    @error("photo")
                        <div class="alert alert-danger mb-1 mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-9 mt-5">
                    <input type="submit" value="Update" class="btn btn-sm btn-primary">
                </div>
            </div>
        </form>
    </div>
</body>
</html>





Below File is resources\web\file_upload.blade.php File
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>File Upload</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2 class="text-center mb-2">File Upload</h2>
            </div>
        </div>
        <form action="{{ route("user.store") }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-12">
                    <input type="file" class="form-control @error("photo") is-invalid @enderror" name="photo" accept=".jpg,.png,.jpeg">
                    @error("photo")
                        <div class="alert alert-danger mb-1 mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-12 mt-5">
                    <input type="submit" class="btn btn-sm btn-primary">
                </div>
            </div>
        </form>
        <div class="row mt-3">
            <div class="col-6">
                @if(session("status"))
                    <div class="alert alert-success">
                        {{ session("status") }}
                    </div>
                @endif
            </div>
        </div>
        <div class="row">
            @foreach($users as $data)
                <div class="col-2">
                    <img class="img-fluid img-thumbnail" src="{{ asset("/storage/". $data->file_name) }}" alt="">
                    <form action="{{ route("user.destroy", $data->id) }}" method="POST">
                        @csrf
                        @method("DELETE")
                        <button type="submit" class="btn btn-danger btn-sm mt-3 mb-3">Delete</button>
                    </form>
                    <a href="{{ route("user.edit", $data->id) }}" class="btn btn-warning">Update</a>
                </div>
            @endforeach
        </div>
    </div>
</body>
</html>





Below File is routes\web File
<?php

use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::resource("user", UserController::class);







Comments

Post a Comment

Popular posts from this blog

Eloquent Many to Many Relationship Tutorial in Laravel 11

Image
  <?php namespace App\Http\Controllers ; use App\Models\ User ; use Illuminate\Http\ Request ; class UserController extends Controller {     /**      * Display a listing of the resource.      */     public function index ()     {         // $users = User::find(2);         // return $users;         // $users = User::with("roles")->get();         // return $users;         // $users = User::find(1);         // return $users->roles;         // $users = User::find(1);         // foreach($users->roles as $data) {         //     echo $data->role_name . "<br>";         // }         // To show All users data as shown below :         $users = User :: get ();...
Read more

Blade Template Tutorial Three Template Inheritance in Laravel 11

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Master Layout - @yield ( "title" , "Website" ) </ title >     {{-- Below "asset('css/style.css')" is for declaring Absolute Path and "asset() is helper function for Absolute Path" --}}     < link rel = "stylesheet" href = " {{ asset ('css/style.css') }} " > </ head > < body >     < div id = "wrapper" >         < header >             < h1 > Hello World </ h1 >         </ header >         < nav >             < a href = "/welcomeT...
Read more