Handling uploads with Livewire | laravel-medialibrary | Spatie SPATIE Laravel Media Library ======================== spatie.be/open-source [Docs](https://spatie.be/docs) [Laravel-medialibrary](https://spatie.be/docs/laravel-medialibrary/v9) Handling-uploads-with-media-library-pro Handling uploads with Livewire Version v11 v10 v9 v8 v7 v6 v5 v4 v3 Other versions for crawler [v11](https://spatie.be/docs/laravel-medialibrary/v11) [v10](https://spatie.be/docs/laravel-medialibrary/v10) [v9](https://spatie.be/docs/laravel-medialibrary/v9) [v8](https://spatie.be/docs/laravel-medialibrary/v8) [v7](https://spatie.be/docs/laravel-medialibrary/v7) [v6](https://spatie.be/docs/laravel-medialibrary/v6) [v5](https://spatie.be/docs/laravel-medialibrary/v5) [v4](https://spatie.be/docs/laravel-medialibrary/v4) [v3](https://spatie.be/docs/laravel-medialibrary/v3) - [ Introduction ](https://spatie.be/docs/laravel-medialibrary/v9/introduction) - [ Support us ](https://spatie.be/docs/laravel-medialibrary/v9/support-us) - [ Base installation ](https://spatie.be/docs/laravel-medialibrary/v9/installation-setup) - [ Questions and issues ](https://spatie.be/docs/laravel-medialibrary/v9/questions-issues) - [ Requirements ](https://spatie.be/docs/laravel-medialibrary/v9/requirements) - [ Upgrading ](https://spatie.be/docs/laravel-medialibrary/v9/upgrading) - [ Changelog ](https://spatie.be/docs/laravel-medialibrary/v9/changelog) - [ Troubleshooting ](https://spatie.be/docs/laravel-medialibrary/v9/troubleshooting) - [ About us ](https://spatie.be/docs/laravel-medialibrary/v9/about-us) Basic usage ----------- - [ Preparing your model ](https://spatie.be/docs/laravel-medialibrary/v9/basic-usage/preparing-your-model) - [ Associating files ](https://spatie.be/docs/laravel-medialibrary/v9/basic-usage/associating-files) - [ Retrieving media ](https://spatie.be/docs/laravel-medialibrary/v9/basic-usage/retrieving-media) Working with media collections ------------------------------ - [ Simple media collections ](https://spatie.be/docs/laravel-medialibrary/v9/working-with-media-collections/simple-media-collections) - [ Defining media collections ](https://spatie.be/docs/laravel-medialibrary/v9/working-with-media-collections/defining-media-collections) Converting images ----------------- - [ Defining conversions ](https://spatie.be/docs/laravel-medialibrary/v9/converting-images/defining-conversions) - [ Retrieving converted images ](https://spatie.be/docs/laravel-medialibrary/v9/converting-images/retrieving-converted-images) - [ Optimizing converted images ](https://spatie.be/docs/laravel-medialibrary/v9/converting-images/optimizing-converted-images) - [ Regenerating images ](https://spatie.be/docs/laravel-medialibrary/v9/converting-images/regenerating-images) Handling uploads with Media Library Pro --------------------------------------- - [ Introduction ](https://spatie.be/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/introduction) - [ Installation ](https://spatie.be/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/installation) - [ Processing uploads on the server ](https://spatie.be/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/processing-uploads-on-the-server) - [ Handling uploads with Blade ](https://spatie.be/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/handling-uploads-with-blade) - [ Handling uploads with Livewire ](https://spatie.be/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/handling-uploads-with-livewire) - [ Handling uploads with Vue ](https://spatie.be/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/handling-uploads-with-vue) - [ Handling uploads with React ](https://spatie.be/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/handling-uploads-with-react) - [ Creating custom Vue components ](https://spatie.be/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/creating-custom-vue-components) - [ Creating custom React components ](https://spatie.be/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/creating-custom-react-components) - [ Customizing CSS ](https://spatie.be/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/customizing-css) Responsive images ----------------- - [ Getting started with responsive images ](https://spatie.be/docs/laravel-medialibrary/v9/responsive-images/getting-started-with-responsive-images) - [ Using your own width calculator ](https://spatie.be/docs/laravel-medialibrary/v9/responsive-images/using-your-own-width-calculator) - [ Customizing the rendered html ](https://spatie.be/docs/laravel-medialibrary/v9/responsive-images/customizing-the-rendered-html) - [ Generating your own tiny placeholder ](https://spatie.be/docs/laravel-medialibrary/v9/responsive-images/generating-your-own-tiny-placeholder) - [ Responsive images demo ](https://spatie.be/docs/laravel-medialibrary/v9/responsive-images/demo) Converting other file types --------------------------- - [ Using image generators ](https://spatie.be/docs/laravel-medialibrary/v9/converting-other-file-types/using-image-generators) - [ Creating a custom image generator ](https://spatie.be/docs/laravel-medialibrary/v9/converting-other-file-types/creating-a-custom-image-generator) Downloading media ----------------- - [ Downloading a single file ](https://spatie.be/docs/laravel-medialibrary/v9/downloading-media/downloading-a-single-file) - [ Downloading multiple files ](https://spatie.be/docs/laravel-medialibrary/v9/downloading-media/downloading-multiple-files) Advanced usage -------------- - [ Working with multiple filesystems ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/working-with-multiple-filesystems) - [ Using custom properties ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/using-custom-properties) - [ Storing media specific manipulations ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/storing-media-specific-manipulations) - [ Using your own model ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/using-your-own-model) - [ Outputting media ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/outputting-media) - [ Rendering media ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/rendering-media) - [ Using a custom directory structure ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/using-a-custom-directory-structure) - [ Ordering media ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/ordering-media) - [ Using a custom media downloader ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/using-a-custom-media-downloader) - [ Moving media ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/moving-media) - [ Consuming events ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/consuming-events) - [ Generating custom urls ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/generating-custom-urls) - [ Overriding default filesystem behavior ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/overriding-the-default-filesystem-behaviour) - [ Naming generated files ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/naming-files) - [ Disable CDN ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/disable-cdn) - [ Customising Database Connections ](https://spatie.be/docs/laravel-medialibrary/v9/advanced-usage/customising-database-connections) API --- - [ Adding files ](https://spatie.be/docs/laravel-medialibrary/v9/api/adding-files) - [ Defining conversions ](https://spatie.be/docs/laravel-medialibrary/v9/api/defining-conversions) You are viewing the documentation for **an older version** of this package. You can check the version you are using with the following command: ` composer show spatie/laravel-medialibrary ` Handling uploads with Livewire ============================== ### On this page 1. [ Getting started ](#content-getting-started) 2. [ Demo application ](#content-demo-application) 3. [ Handling a single upload ](#content-handling-a-single-upload) 4. [ Handling multiple uploads ](#content-handling-multiple-uploads) 5. [ Administer the contents of a media library collection ](#content-administer-the-contents-of-a-media-library-collection) 6. [ Uploading directly to S3 ](#content-uploading-directly-to-s3) You can make use of the `x-media-library-attachment` and `x-media-library-collection` inside of the views of your own Livewire components. Getting started ----------------------------------------------------------------------------------------------------- Make sure to have followed [Livewire's installation instructions](https://laravel-livewire.com/docs/installation). Make sure Alpine is available on the page as well. The easiest way is to include it from a CDN: ``` ``` Visit [the Alpine repo](https://github.com/alpinejs/alpine) for more installation options. Demo application -------------------------------------------------------------------------------------------------------- In [this repo on GitHub](https://github.com/spatie/laravel-medialibrary-pro-app), you'll find a demo Laravel application in which you'll find examples of how to use Media Library Pro inside your Livewire components. If you are having troubles using the components, take a look in that app to see how we've done it. Handling a single upload -------------------------------------------------------------------------------------------------------------------------------- You can use `x-media-library-attachment` component to upload a single file. ![Screenshot of the attachment component](/docs/laravel-medialibrary/v9/images/pro/attachment.png) Here's how that might look like in the view of your Livewire component: ``` Submit ``` In your Livewire component you must: - use the `Spatie\MediaLibraryPro\Http\Livewire\Concerns\WithMedia` trait - add a public property `$mediaComponentNames` set to array that contains all the names of media library pro components that you are going to use. - for each component that you are going to use you should add a public property with the name you use in the view for that component (in the example above: `myUpload`) Here is an example component: ``` namespace App\Http\Livewire; use App\Models\YourModel; use Livewire\Component; use Spatie\MediaLibraryPro\Http\Livewire\Concerns\WithMedia; class MyForm extends Component { use WithMedia; public $name; public $message = ''; public $mediaComponentNames = ['myUpload']; public $myUpload; public function submit() { $formSubmission = YourModel::create([ 'name' => $this->name, ]); $formSubmission ->addFromMediaLibraryRequest($this->myUpload) ->toMediaCollection('images'); $this->message = 'Your form has been submitted'; $this->name = ''; $this->clearMedia(); } public function render() { return view('livewire.my-form'); } } ``` Immediately after a file has been uploaded it will be stored as a temporary upload. In the method that handles the form submission you must use the `addFromMediaLibraryRequest` method to move the uploaded file to the model you want. To clear out an uploaded file from being displayed, you can call `clearMedia()`. This method will only clear the uploaded file from view, uploaded files will not be deleted. If you are using multiple attachment components and only want to clear out specific ones, pass the name of component to `clearMedia`. ``` $this->clearMedia('myUpload') ``` ### Validating a single upload You can pass any Laravel validation rule to the rules prop of the `x-media-library-attachment` component. Here's an example where only `jpeg` and `pngs` will be accepted. ``` ``` You can make the upload required by validating it in your Livewire component: ``` // in the method that handles the form submission inside your livewire component public function submit() { $this->validate([ 'myUpload' => 'required', ]); // process the form submission } ``` Handling multiple uploads ----------------------------------------------------------------------------------------------------------------------------------- Uploading multiple files is very similar to uploading a single file. The only thing you need to the `x-medialibrary-attachment` in the view is `multiple`. ``` Submit ``` ![Screenshot of the attachment component](/docs/laravel-medialibrary/v9/images/pro/multiple.png) In your Livewire component you must: - use the `Spatie\MediaLibraryPro\Http\Livewire\Concerns\WithMedia` trait - add a public property `$mediaComponentNames` set to array that contains all the names of media library pro components that you are going to use. - for each component that you are going to use you should add a public property with the name you use in the view for that component (in the example above: `myUpload`) Here is an example component: ``` namespace App\Http\Livewire; use App\Models\YourModel; use Livewire\Component; use Spatie\MediaLibraryPro\Http\Livewire\Concerns\WithMedia; class MyForm extends Component { use WithMedia; public $name; public $message = ''; public $mediaComponentNames = ['images']; public $images; public function submit() { $formSubmission = YourModel::create([ 'name' => $this->name, ]); $formSubmission ->addFromMediaLibraryRequest($this->images) ->toMediaCollection('images'); $this->message = 'Your form has been submitted'; $this->name = ''; $this->clearMedia(); } public function render() { return view('livewire.my-form'); } } ``` ### Validating multiple uploads You can pass any Laravel validation rule to the rules prop of the `x-media-library-attachment` component. Here's an example where only `jpeg` and `pngs` will be accepted. ``` ``` You can make the upload required by validating it in your Livewire component. Here's an example where at least one upload is required, but more than three uploads are not allowed. ``` // in the method that handles the form submission inside your livewire component public function submit() { $this->validate([ 'images' => 'required|max:3', ]); // process the form submission } ``` Administer the contents of a media library collection ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- You can manage the entire contents of a media library collection with `x-media-library-collection` component. This component is intended to use in admin sections. Here is an example where we are going to administer an `images` collection of a `$blogPost` model. We assume that you already [prepared the model](/docs/laravel-medialibrary/v9/basic-usage/preparing-your-model) to handle uploads. ``` Submit ``` In your Livewire component you must: - use the `Spatie\MediaLibraryPro\Http\Livewire\Concerns\WithMedia` trait - add a public property `$mediaComponentNames` set to array that contains all the names of media library pro components that you are going to use. - for each component that you are going to use you should add a public property with the name you use in the view for that component (in the example above: `myUpload`) Here is an example component: ``` namespace App\Http\Livewire; use App\Models\BlogPost; use Livewire\Component; use Spatie\MediaLibraryPro\Http\Livewire\Concerns\WithMedia; class MyForm extends Component { use WithMedia; public $name; public $message = ''; public $mediaComponentNames = ['images']; public $images; public function submit() { $formSubmission = BlogPost::create([ 'name' => $this->name, ]); $formSubmission ->addFromMediaLibraryRequest($this->images) ->toMediaCollection('images'); $this->message = 'Your form has been submitted'; } public function render() { return view('livewire.my-form'); } } ``` ### Validating the collection You can pass any Laravel validation rule to the rules prop of the `x-media-library-collection` component. Here's an example where only `jpeg` and `pngs` will be accepted. ``` ``` You can make the upload required by validating it in your Livewire component. Here's an example where at least one upload is required, but more than three uploads are not allowed. ``` // in the method that handles the form submission inside your livewire component public function submit() { $this->validate([ 'images' => 'required|max:3', ]); // process the form submission } ``` ### Using custom properties Media library supports [custom properties](/docs/laravel-medialibrary/v9/advanced-usage/using-custom-properties) to be saved on a media item. By default, the `x-media-library-collection` component doesn't show the custom properties. To add them you should create a blade view that will be used to display all form elements on a row in the component. In this example we're going to add a custom property form field called `extra_field`. ``` @include('media-library::livewire.partials.collection.fields') Extra field livewireCustomPropertyAttributes('extra_field') }} /> @error($mediaItem->customPropertyErrorName('extra_field')) {{ $message }} @enderror ``` You should then pass the path to that view to the `fields-view` prop of the `x-media-library-collection` component. ``` ``` This is how that will look like. ![Screenshot of custom property](/docs/laravel-medialibrary/v9/images/pro/extra.png) In your Livewire component, you can validate the custom properties like this. This example assumes that you have set the `name` attribute of `x-media-library-collection` to `images`. ``` // inside the method in your Livewire component that handles the form submission public function submit() { $this->validate([ 'images.*.custom_properties.extra_field' => 'required', ], ['required' => 'This field is required']); // process the form submission } ``` Uploading directly to S3 -------------------------------------------------------------------------------------------------------------------------------- Currently, Livewire does not support uploading multiple files to S3. That's why only the `attachment` component can be used to upload files to S3. To get started with upload files to `s3`, make sure to follow Livewire's instructions on [how to upload directly to S3](https://laravel-livewire.com/docs/2.x/file-uploads#upload-to-s3). Next, make sure you configured the media disk that uses the S3 driver. With that configuration in place, the `attachment` component will now upload directly to S3.