Upload File using ajax in laravel 11
<?php
namespace App\Http\Controllers;
use App\Models\Image;
use Illuminate\Http\Request;
class FileUploadController extends Controller
{
public function index()
{
return view("file-upload");
}
public function store(Request $request)
{
$request->validate([
"file" => "required|mimes:jpg,png|max:2048"
]);
$fileName = time() . "." . $request->file->extension();
$request->file->move(public_path("file"), $fileName);
Image::create(["name" => $fileName]);
return response()->json("File uploaded successfully");
}
}
Above File is app\Http\Controllers\FileUploadController.php FileBelow File is app\Models\Image.php File
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
{
public $timestamps = true;
protected $table = "images";
protected $fillable = ["name"];
}
Below File is database\migrations\2025_01_03_120519_create_images_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('images', function (Blueprint $table) {
$table->id();
$table->string("name");
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('images');
}
};
Below File is resources\views\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">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-10 mt-5">
<div class="card">
<div class="card-header">
<h3>File Upload</h3>
</div>
<div class="card-body">
<form id="fileUpload" enctype="multipart/form-data">
@csrf
<label>Select File</label>
<input type="file" class="form-control" name="file"/>
<br><br>
<button type="submit" class="btn btn-secondary">Upload</button>
<span id="error" style="color:#ff0000;"></span>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#fileUpload").submit(function(e){
e.preventDefault();
$("#error").text("");
var formData = new FormData(this);
$.ajax({
url:"{{ route('file.store') }}",
type:"POST",
data:formData,
contentType:false,
processData:false,
success:function(response){
if(response) {
alert("File uploaded successfully");
}
},
error:function(response){
$("#error").text(response.responseJSON.message);
}
});
});
});
</script>
</body>
</html>
Below File is routes\web.php File
<?php
use App\Http\Controllers\FileUploadController;
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Route::controller(FileUploadController::class)->group(function () {
Route::get("/file-upload", "index");
Route::post("/file-upload", "store")->name("file.store");
});
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment