Laravel Livewire Drag-n-Drop Files Upload Using AlpineJS

Image by cocoparisienne from Pixabay

As the name suggests it's a step-by-step tutorial for drag-n-drop files upload using alpine.js in Laravel Livewire, I am assuming that you already created your project, this tutorial is just a snippet and idea to include drag-n-drop file upload feature so without wasting time on what is Laravel Livewire, AlpineJS and project setup lets get straight to our topic.

Step #1 LiveWire Component

We’ll create a livewire component for our file upload so that we can use it in our project.

Run this command in terminal/cmd

php artisan make:livewire FilesUpload

It will create two files one in app/Http/Livewire/FilesUpload.php and the other one in resources/views/livewire/files-upload.blade.php

Now you can use this component anywhere in your Laravel project as

<livewire:files-upload />

Or alternatively

@livewire('files-upload')

Step #2 Changing Blade Template

Open resources/views/livewire/files-upload.blade.php and replace with the following code.

Here we are creating an AlpineJs component for handling the file drop. The drop , dragover and dragleave are the javascript events. Livewire exposes dedicated JavaScript functions for integration with 3rd-party file-uploading libraries you can learn more here, the functions exist on the JavaScript component object, which can be accessed using the convenience Blade directive: @this you can read more about it @this here.

Step #3 Handling The Uploaded File

Open app/Http/Livewire/FilesUpload.php and replace it with the following code.

Most of the code here is self-explanatory, I am using the LiveWire WithFileUploads you can read more here, the updatedFiles() function trigger every time whenever the files dropped in the frontend, also you can handle the files in updatedFiles() function using the Laravel Storage or Livewire file upload, read more here.

Conclusion

This is a small tutorial on how to make a drag-n-drop file upload livewire component to use in the Laravel project.

--

--

--

Freelancer | Programmer | Good Person

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

WebVR sure is fun, with A-Frame

How to Create Application in React Native with Node.js backend and GraphQL

This blog was originally posted to Flatiron’s Blog Dashboard on October 11, 2020 and contains…

Lazy Loading Image — 1

Elasticsearch from 0 to sky: CRUD Chapter 2

Creating a Twitter art bot with Node and D3

Some basics about “React”.

Making Your Own JavaScript Linter (part 2)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Faizan Aalam

Faizan Aalam

Freelancer | Programmer | Good Person

More from Medium

What’s new in Laravel? November edition.

Laravel/PHP code coverage with GitHub Actions and Code Climate

Laravel — validate “true”​ or “false”​ as boolean

How to Successfully Upgrade Laravel Applications to the latest version