www.itsolutionstuff.com
Open in
urlscan Pro
2a05:d014:776:a63d:6339:2a28:fc90:eea
Public Scan
URL:
https://www.itsolutionstuff.com/post/php-laravel-file-upload-with-progress-bar-exampleexample.html
Submission Tags: scamward
Submission: On July 13 via api from DE — Scanned from DE
Submission Tags: scamward
Submission: On July 13 via api from DE — Scanned from DE
Form analysis 2 forms found in the DOM
<form class="gsc-search-box gsc-search-box-tools" accept-charset="utf-8">
<table cellspacing="0" cellpadding="0" role="presentation" class="gsc-search-box">
<tbody>
<tr>
<td class="gsc-input">
<div class="gsc-input-box" id="gsc-iw-id1">
<table cellspacing="0" cellpadding="0" role="presentation" id="gs_id50" class="gstl_50 gsc-input" style="width: 100%; padding: 0px;">
<tbody>
<tr>
<td id="gs_tti50" class="gsib_a"><input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="search" aria-label="search" id="gsc-i-id1" dir="ltr" spellcheck="false"
style="width: 100%; padding: 0px; border: none; margin: 0px; height: auto; background: url("https://www.google.com/cse/static/images/1x/en/branding.png") left center no-repeat rgb(255, 255, 255); outline: none;"></td>
<td class="gsib_b">
<div class="gsst_b" id="gs_st50" dir="ltr"><a class="gsst_a" href="javascript:void(0)" title="Clear search box" role="button" style="display: none;"><span class="gscb_a" id="gs_cb50" aria-hidden="true">×</span></a></div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td class="gsc-search-button"><button class="gsc-search-button gsc-search-button-v2"><svg width="13" height="13" viewBox="0 0 13 13">
<title>search</title>
<path
d="m4.8495 7.8226c0.82666 0 1.5262-0.29146 2.0985-0.87438 0.57232-0.58292 0.86378-1.2877 0.87438-2.1144 0.010599-0.82666-0.28086-1.5262-0.87438-2.0985-0.59352-0.57232-1.293-0.86378-2.0985-0.87438-0.8055-0.010599-1.5103 0.28086-2.1144 0.87438-0.60414 0.59352-0.8956 1.293-0.87438 2.0985 0.021197 0.8055 0.31266 1.5103 0.87438 2.1144 0.56172 0.60414 1.2665 0.8956 2.1144 0.87438zm4.4695 0.2115 3.681 3.6819-1.259 1.284-3.6817-3.7 0.0019784-0.69479-0.090043-0.098846c-0.87973 0.76087-1.92 1.1413-3.1207 1.1413-1.3553 0-2.5025-0.46363-3.4417-1.3909s-1.4088-2.0686-1.4088-3.4239c0-1.3553 0.4696-2.4966 1.4088-3.4239 0.9392-0.92727 2.0864-1.3969 3.4417-1.4088 1.3553-0.011889 2.4906 0.45771 3.406 1.4088 0.9154 0.95107 1.379 2.0924 1.3909 3.4239 0 1.2126-0.38043 2.2588-1.1413 3.1385l0.098834 0.090049z">
</path>
</svg></button></td>
<td class="gsc-clear-button">
<div class="gsc-clear-button" title="clear results"> </div>
</td>
</tr>
</tbody>
</table>
</form>Name: mc-embedded-subscribe-form — POST https://gmail.us1.list-manage.com/subscribe/post?u=778196e3155f638c5fa24a659&id=c4dc2a322e
<form action="https://gmail.us1.list-manage.com/subscribe/post?u=778196e3155f638c5fa24a659&id=c4dc2a322e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div id="mc_embed_signup_scroll" class="float-start">
<div class="input-group"><input class="form-control" type="email" name="EMAIL" id="mce-EMAIL" placeholder="Enter Your Email Address...." required="">
<span class="input-group-btn"><svg class="svg-inline--fa fa-paper-plane fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="paper-plane" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
data-fa-i2svg="">
<path fill="currentColor"
d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"></path>
</svg><!-- <i class="fas fa-paper-plane"></i> Font Awesome fontawesome.com --><input type="submit" value="Subscribe" class="btn btn-success" name="subscribe" id="mc-embedded-subscribe"></span>
</div>
<div style="position:absolute;left:-5e3px" aria-hidden="true"><input name="b_778196e3155f638c5fa24a659_c4dc2a322e" tabindex="-1"></div>
</div>
</form>Text Content
🌎 DE EN FR ES IT HR SV SR SL NL
✕
🍪 DATENSCHUTZ & TRANSPARENZ
Wir und unsere Partner verwenden Cookies, um Informationen auf einem Gerät
speichern und/oder abrufen zu können. Wir und unsere Partner verwenden Daten für
Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen,
Erkenntnisse über Zielgruppen und Produktentwicklungen. Ein Beispiel für Daten,
welche verarbeitet werden, kann eine in einem Cookie gespeicherte eindeutige
Kennung sein. Einige unserer Partner können Ihre Daten im Rahmen ihrer legitimen
Geschäftsinteressen verarbeiten, ohne Ihre Zustimmung einzuholen. Um die
Verwendungszwecke einzusehen, für die diese ihrer Meinung nach ein berechtigtes
Interesse haben, oder um dieser Datenverarbeitung zu widersprechen, verwenden
Sie den unten stehenden Link zur Anbieterliste. Die übermittelte Einwilligung
wird nur für die von dieser Webseite ausgehende Datenverarbeitung verwendet.
Wenn Sie Ihre Einstellungen ändern oder Ihre Einwilligung jederzeit widerrufen
möchten, finden Sie den Link dazu in unserer Datenschutzerklärung, die von
unserer Homepage aus zugänglich ist.
Einstellungen verwalten Weiter mit den empfohlenen Cookies
Anbieter-Liste | Datenschutzerklärung
* Php
* Laravel 10
* Angular 16
* Vue
* React
* Codeigniter
* Laravel Tutorial
LARAVEL FILE UPLOAD WITH PROGRESS BAR EXAMPLE
By Hardik Savani June 28, 2023 Category : PHP Laravel jQuery Ajax
Video Player is loading.
Play Video
PauseSkip Backward
Unmute
Current Time 0:00
/
Duration 50:05
Loaded: 0%
00:00
Stream Type LIVE
Seek to live, currently behind liveLIVE
Remaining Time -50:05
1x
Playback Rate
Chapters
* Chapters
Descriptions
* descriptions off, selected
Captions
* captions settings, opens captions settings dialog
* captions off, selected
Audio Track
* default, selected
Picture-in-PictureFullscreen
This is a modal window.
Beginning of dialog window. Escape will cancel and close the window.
TextColorWhiteBlackRedGreenBlueYellowMagentaCyanOpacityOpaqueSemi-TransparentText
BackgroundColorBlackWhiteRedGreenBlueYellowMagentaCyanOpacityOpaqueSemi-TransparentTransparentCaption
Area
BackgroundColorBlackWhiteRedGreenBlueYellowMagentaCyanOpacityTransparentSemi-TransparentOpaque
Font Size50%75%100%125%150%175%200%300%400%Text Edge
StyleNoneRaisedDepressedUniformDropshadowFont FamilyProportional
Sans-SerifMonospace Sans-SerifProportional SerifMonospace SerifCasualScriptSmall
Caps
Reset restore all settings to the default valuesDone
Close Modal Dialog
End of dialog window.
Advertisement
Hello,
In this post, we will learn laravel upload image with progress bar. This
tutorial will give you simple example of laravel file upload with progress bar.
you will learn laravel ajax file upload with progress bar. you'll learn laravel
file upload progress bar. Alright, let’s dive into the steps.
You can use this example with laravel 6, laravel 7, laravel 8, laravel 9 and
laravel 10 version.
You always did file uploading in a normal way and you can do it easily. But when
you have a large amount of file size then it takes time to upload on a server.
Maybe you can't reduce the time to upload a file or image, but you can display a
progress bar with a percentage, so the client can understand how much time is
left to upload a file.
in this tutorial, we will create two routes with the FileController controller
file. when you click on submit button then fire the jquery ajax method and the
upload of the image will show you a progress bar. let's follow the below step to
do this example.
Preview:
Step 1: Install Laravel
This step is not required; however, if you have not created the laravel app,
then you may go ahead and execute the below command:
composer create-project laravel/laravel example-app
Step 2: Create Routes
In first step, we will add new two routes. One for display view and we will
write jquery code in view file. In Second step, we will create POST route for
file upload.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::controller(FileController::class)->group(function(){
Route::get('file-upload', 'index');
Route::post('file-upload', 'store')->name('file.upload');
});
Read Also: Laravel Multi Step Form Example Tutorial
Step 3: Create FileController
In second step, we need to create FileController controller with index() and
store(). you need to create "files" folder in public folder. we will store all
files on that folder. just create new controller and put bellow code on it:
app/Http/Controllers/FileController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class FileController extends Controller
{
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('fileUpload');
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$request->validate([
'file' => 'required',
]);
$fileName = time().'.'.request()->file->getClientOriginalExtension();
request()->file->move(public_path('files'), $fileName);
return response()->json(['success'=>'You have successfully upload file.']);
}
}
Step 4: Create Blade File
In this Last step, we require to create fileUpload.blade.php file and we write
code for jquery and show you with progress bar. So you have to simply add bellow
code on following path:
resources/views/fileUpload.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Bootstrap 5 Progress Bar Example - ItSolutionStuff.com</title>
<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: 900px">
<div class="alert alert-primary mb-4 text-center">
<h2 class="display-6">Laravel File Upload with Ajax Progress Bar Example - ItSolutionStuff.com</h2>
</div>
<form id="fileUploadForm" method="POST" action="{{ route('file.upload') }}" enctype="multipart/form-data">
@csrf
<div class="form-group mb-3">
<input name="file" type="file" class="form-control">
</div>
<div class="form-group">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
</div>
</div>
<div class="d-grid mt-4">
<input type="submit" value="Submit" class="btn btn-primary">
</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>
<script>
$(function () {
$(document).ready(function () {
$('#fileUploadForm').ajaxForm({
beforeSend: function () {
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 (xhr) {
console.log('File has uploaded');
}
});
});
});
</script>
</body>
</html>
Run Laravel App:
All the required steps have been done, now you have to type the given below
command and hit enter to run the Laravel app:
php artisan serve
Now, Go to your web browser, type the given URL and view the app output:
Read Also: Laravel Ajax CRUD with Popup Modal Example
http://localhost:8000/file-upload
I hope it can help you...
Tags :
* Ajax
* File Upload
* Form Jquery
* jQuery
* Laravel
* Progress Bar
HARDIK SAVANI
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in
India and I love to write tutorials and tips that can help to other artisan. I
am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery,
Codeigniter and Bootstrap from the early stage. I believe in Hardworking and
Consistency.
Follow Me:
WE ARE RECOMMENDING YOU
* How to Send Automatic Email in Laravel 9?
* How to Setup File Permissions Correctly in Laravel?
* How to use Try Catch Exception in Laravel App?
* Laravel 9 Google Recaptcha V3 Example Tutorial
* Laravel Seeder from CSV File Example
* Laravel Convert PDF to Image Example
* How to Deploy Project with Laravel Vapor?
* Laravel Add Foreign Key to Existing Table with Data Example
* Laravel Livewire Sweetalert Example
* Laravel Carbon Subtract Days to Date Example
* Laravel Multi Step Form Example Tutorial
×
search
POPULAR POSTS
* Laravel 10 Resize Image Before Upload Example
* Laravel Store JSON Format Data in Database Example
* Laravel 10 Create RSS Feed Example Tutorial
* How to Change Date Format in Laravel 7/6?
* Laravel 9 Google Recaptcha V3 Example Tutorial
* How to Remove Empty or Null Values from JSON using JQuery?
* Laravel Eloquent withSum() and withCount() Example
* Laravel 9 Enum Model Attribute Casting Example
* Laravel 9 Daily Weekly Monthly Automatic Database Backup
* Laravel 9 Socialite Login with Facebook Account Example
* Login with Facebook using PHP MySQL Example
CATEGORIES
* Laravel
* Angular
* PHP
* Python
* jQuery
* Bootstrap
* MySql
* Ubuntu
* Javascript
* Node JS
* Ajax
* Codeigniter
* Guest Post
* Vue.JS
* React JS
* HTML
* Git
* Server
* JSON
* Installation
* CSS
* .htaccess
* Axios
* Google Map
* Typeahead JS
* Google API
* Socket.io
* SQL
* Highcharts
* Facebook API
LATEST POSTS
* How to Get First Word from String in PHP?
* How to Remove Last 2, 3, 4, 5, 7 Characters of a String in PHP?
* How to Get Last 2, 3, 4, 5, 7 Characters of a String in PHP?
* How to Define Fallback Routes in Laravel?
* How to Show Pagination with Serial Number in Laravel?
SUBSCRIBE TO THE EMAIL NEWSLETTER
FOLLOW LARAVEL NEWS ON
Facebook Twitter LinkedIn Github
* Home
* List Of Categories
* List of Tags
* Disclaimer
* Latest Posts
* Contact US
* About US
* Advertisement
© 2016-2023 All Rights Reserved • www.itsolutionstuff.com
Share
Tweet
Email
Share
Pin
Share
x
x
x