I was looking for a Drag and Drop file upload in Laravel. So i tried some of them and foundfilepond
is much effective and customizable from others.
Basically filepond is javascript library to drag and drop file. Its has supports of many javascript framework like Jquery, React, Vue, Svelte & Many more. But I am really grateful that it has also support vanilla javaScript as well. So in this tutorial you need to follow the every process to complete it. Ti be honest it has very butter-smoth ui. You will love it when once impalemented.
They have really welldocumentationto impalement and add more feature according to your needs. You can read that as well.
Steps for Drag and Drop upload via filepond in laravel
1. Install FilePond Via CDN in your Laravel Blade
Add this two css link in your applicationheadsection. If you want, you can download every cdn fromunpkgand directly use that.
<link <em>href</em>="https://unpkg.com/filepond/dist/filepond.css" <em>rel</em>="stylesheet" />
<link <em>href</em>="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" <em>rel</em>="stylesheet" />
Add this javaScript Library to your bottom of the page body.
<script <em>src</em>="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script <em>src</em>="https://unpkg.com/filepond@^4/dist/filepond.js"></script>
2. File upload via input in form
In this part, you can define some validation in input box as well. See, there i define the some validation like max size file upload 3mb. If you want you can change this according to your needs.
<input <em>type</em>="file"
<em>id</em>="filePond"
<em>accept</em>="image/*"
<em>data-max-file-size</em>="3MB"
<em>class</em>="my-pond"
<em>name</em>="images"/>
3. File upload via input in form
This below code should be added bottom of the body of the page, below to the JavaScript cdn. What we did here ? first look at the code, first we catch the input box via id. The we defined two process in server. One isprocess& another one isrevert. Process is use for upload the file and rever is for delete the file from the drag and drop option. Besides the they accept post & delete method as well to upload and delete.
‘x-CSRF-TOKEN': '{{ csrf_token() }}'You know laravel need csrf_token forpostmethod. So we add that.
const inputElement = document.querySelector('input[id="filePond"]');
FilePond.registerPlugin(FilePondPluginImagePreview);
const pond = FilePond.create(inputElement);
pond.setOptions({
server: {
process: {
url: '/temp-upload',
method: 'POST',
headers: {
'x-CSRF-TOKEN': '{{ csrf_token() }}',
},
},
revert: {
url: '/temp-delete',
method: 'DELETE',
headers: {
'x-CSRF-TOKEN': '{{ csrf_token() }}',
},
onload: (response) => {
console.log(response);
},
}
},
});
4. Define route upload and delete route in web.php for filepond
According to the last step, in filepond we need two thing to do. One is upload and one is Delete. You can use this with new Controller or any existing controller.
Route::post('/temp-upload', [FilePondController::class, 'uploadTemporary']);
Route::delete('/temp-delete', [FilePondController::class, 'deleteTemporary']);
5. Make database migration to following this schema
We need to store the data in database to trace the upload and delete. Now create model and schema with this command.
php artisan make:TempFileUplaodModel ModelName -m
The add folder and file as a string.
public function up()
{
Schema::create('temporary_files', function (Blueprint $table) {
$table->id();
$table->string('folder');
$table->string('file');
$table->timestamps();
});
}
6. Write Two function for that Route.
We need to go in defined controller and make two function for upload and delete. I am giving the sample Code. But make sure you have own validation for your security.
public function uploadTemporary(Request $request)
{
if ($request->hasFile('images')) {
$image = $request->file('images');
$fileName = $image->getClientOriginalName();
$folder = uniqid('post', true);
$image->storeAs('public/temp/' . $folder, $fileName);
TemporaryFile::create([
'folder' => $folder,
'file' => $fileName
]);
return $folder;
}
return '';
}
Now add this function for delete/revert. In this function we find that folder id byrequest()->getContent())and check if its exists we delete the folder with that data.
public function deleteTemporary(Request $request)
{
$id = $request->getContent();
return $id;
$tempFile = TemporaryFile::where('folder', request()->getContent())->first();
if ($tempFile) {
Storage::deleteDirectory('public/temp' . $tempFile->folder);
$tempFile->delete();
return response();
}
}
Make sure you already havepublic/temp/folder in storage. Since i am using laravelstoragefilesystem with symblink. You can createsymblinkby this command. You can skip this section if you want to use public folder.
php artisan storage:link
5. Final results to check filepond file upload and download
Now try to upload and download image by select or drag and drop.
