Laravel File Upload and Progress Bar tutorial; In this step-by-step guide, we will teach you how to create a file upload and progress bar component in the Laravel application using jQuery Ajax.
fileupload.blade.php
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5" style="max-width: 500px">
<div class="alert alert-warning mb-4 text-center">
<h2 class="display-6">Upload File</h2>
</div>
<form id="fileUploadForm" method="POST" action="{{ route('upload_file') }}" enctype="multipart/form-data">
@csrf
<div class="form-group mb-3">
<input name="file" type="file" class="form-control">
</div>
<div class="d-grid mb-3">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
<div class="form-group">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
</div>
</div>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
Jquery
<script>
$(function () {
$(document).ready(function () {
$('#fileUploadForm').ajaxForm({
beforeSend: function (e) {
var percentage = '0'; },
uploadProgress: function (event, position, total, percentComplete) {
var percentage = percentComplete;
$('.progress .progress-bar').css("width", percentage+'%', function() {
return $(this).attr("aria-valuenow", percentage) + "%"; }) },
complete: function (data) { console.log('File has uploaded'); }
});
});
});
</script>
controller
function upload_file(Request $request){
$request->validate([
'file' => 'required',
]);
$name = time().'.'.request()->file->getClientOriginalExtension();
$request->file->move(public_path('uploads'), $name); (file is the name of input type="file")
DB::table('file_upload')->insert([
'file' => $name
]);
return response()->json(['success'=>'Successfully uploaded.']);
}
web.php
Route::get('/file-uploading', function(){
return view('fileuploading');
});
Route::post('/upload-file', [Crudcontroller::class, 'upload_file'])->name('upload_file');
