https://www.nicesnippets.com/blog/how-to-upload-file-using-ajax-in-laravel-9
Last updated
C:\xampp8\htdocs\datvietcoconut\routes\web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileUploadController;
/*
|--------------------------------------------------------------------------
| 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(FileUploadController::class)->group(function () {
Route::get('file-upload', 'create')->name('file.create');
Route::post('file-upload', 'store')->name('file.store');
});
C:\xampp8\htdocs\datvietcoconut\app\Models\File.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class File extends Model
{
use HasFactory;
protected $table = 'images';
protected $fillable = [
'name'
];
}
C:\xampp8\htdocs\datvietcoconut\database\migrations\2023_02_06_150050_create_images_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('images');
}
};
C:\xampp8\htdocs\datvietcoconut\app\Http\Controllers\FileUploadController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\File;
class FileUploadController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('files.create');
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$request->validate([
'file' => 'required|mimes:doc,docx,pdf,zip,rar,jpg,png|max:2048',
]);
$fileName = time() . '.' . $request->file->extension();
$request->file('file')->storeAs('files', $fileName, 'public');
File::create(['name' => $fileName]);
return response()->json('File uploaded successfully');
}
}
C:\xampp8\htdocs\datvietcoconut\resources\views\files\create.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How to Upload File using Ajax in Laravel 9? - Nicesnippets.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-primary card mt-5">
<div class="panel-heading text-center mt-4">
<h2>How to Upload File using Ajax in Laravel 9? - Nicesnippets.com</h2>
</div>
<div class="panel-body card-body">
<form action="{{ route('file.store') }}" method="POST" id="file-upload" enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label class="form-label" for="inputFile">Select File:</label>
<input type="file" name="file" id="inputFile" class="form-control">
<span class="text-danger" id="file-input-error"></span>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-success">Upload</button>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#file-upload').submit(function(e) {
e.preventDefault();
let formData = new FormData(this);
$('#file-input-error').text('');
$.ajax({
type: 'POST'
, url: "{{ route('file.store') }}"
, data: formData
, contentType: false
, processData: false
, success: (response) => {
if (response) {
this.reset();
alert('File has been uploaded successfully');
}
}
, error: function(response) {
$('#file-input-error').text(response.responseJSON.message);
}
});
});
</script>
</html>
