Handling uploads with Blade | 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 Blade 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 Blade =========================== ### On this page 1. [ Getting started ](#content-getting-started) 2. [ Use inside other Livewire components ](#content-use-inside-other-livewire-components) 3. [ Demo application ](#content-demo-application) 4. [ Handling a single upload ](#content-handling-a-single-upload) 5. [ Are you a visual learner? ](#content-are-you-a-visual-learner) 6. [ Handling multiple uploads ](#content-handling-multiple-uploads) 7. [ Setting a maximum amount of uploads ](#content-setting-a-maximum-amount-of-uploads) 8. [ Validating uploads in real time ](#content-validating-uploads-in-real-time) 9. [ Administer the contents of a media library collection ](#content-administer-the-contents-of-a-media-library-collection) 10. [ Uploading directly to S3 ](#content-uploading-directly-to-s3) You can make use of the `x-media-library-attachment` and `x-media-library-collection` Blade components to handle uploads. Getting started ----------------------------------------------------------------------------------------------------- The Blade components that handle uploads leverage [Livewire](https://laravel-livewire.com) under the hood. That's why you must follow [Livewire's installation instructions](https://laravel-livewire.com/docs/installation) as well. 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. Use inside other Livewire components -------------------------------------------------------------------------------------------------------------------------------------------------------------------- Our Blade components are meant to be used in a regular HTML forms. If you want to use Media Library Pro within your own Livewire components, read this page on [handling uploads with Livewire](/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/handling-uploads-with-livewire). 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 Blade views. 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` to upload a single file. Here's an example: ``` @csrf Submit ``` ![Screenshot of the attachment component](/docs/laravel-medialibrary/v9/images/pro/attachment.png) The `x-media-library-attachment` will take care of the upload. Under the hood the upload is processed by a [Livewire](https://laravel-livewire.com) component. After a file has been uploaded it will be stored as a temporary upload. In case there are validation errors when submitting the form, the `x-media-library-attachment` will display the temporary upload when you get redirected back to the form. There's no need for the user to upload the file again. In the controller handling the form submission you should validate the temporary upload and transfer it to an Eloquent model. You can read more on that [on this page](/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/processing-uploads-on-the-server). Are you a visual learner? --------------------------------------------------------------------------------------------------------------------------------- In this video you'll see a demo of the attachment component. Want to see more videos like this? Check out our [free video course on how to use Laravel Media Library](https://spatie.be/videos/discovering-laravel-media-library). Handling multiple uploads ----------------------------------------------------------------------------------------------------------------------------------- Here's an example of how you can allow multiple uploads ``` @csrf Name: Submit ``` ![Screenshot of the attachment component](/docs/laravel-medialibrary/v9/images/pro/multiple.png) After files have been uploaded, they will be stored as a temporary uploads. In the controller handling the form submission you should validate the temporary upload and transfer it to an Eloquent model. You can read more on that [on this page](/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/processing-uploads-on-the-server). Here's a video where multiple uploads are being demoed: Setting a maximum amount of uploads ----------------------------------------------------------------------------------------------------------------------------------------------------------------- To set a maximum number of files you can add a `max-items` attribute. Here is an example where users can only upload two files. ``` ``` Validating uploads in real time ----------------------------------------------------------------------------------------------------------------------------------------------------- The upload can be validated before the form is submitted by adding a `rules` attribute. In the value of the attribute you can use any of Laravel's available validation rules that are applicable to file uploads. Here's an example where we only accept `png` and `jpg` files that are 1MB or less. ``` ``` This validation only applies on the creation of the temporary uploads. You should also perform validation when [processing the upload on the server](/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/processing-uploads-on-the-server). 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. ``` ``` This component will display the contents of the entire collection. Files can be added, removed, updated and reordered. New files will be uploaded as temporary uploads. The value you pass in `name` of the component will be use as the key name in which the component will send the state of the collection to the backend. In the controller handling the form submission you should validate the new contents of the collection and sync it with the collection of the eloquent model. You can read more on that [on this page](/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/processing-uploads-on-the-server). Like the `x-media-library-attachment` component, the `x-media-library-collection` accepts `max-items` and `rules` props. In this example, the collection will be allowed to hold `png` and `jpg` files that are smaller than 1 MB. ``` ``` In this video you'll see the collection component in action Want to see more videos like this? Check out our [free video course on how to use Laravel Media Library](https://spatie.be/videos/discovering-laravel-media-library). ### 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 customPropertyAttributes('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) Custom properties can be validated using [a form request](/docs/laravel-medialibrary/v9/handling-uploads-with-media-library-pro/processing-uploads-on-the-server). In this video, you'll see an example of how extra fields can be added. Uploading directly to S3 -------------------------------------------------------------------------------------------------------------------------------- Under the hood, the `attachment` and `collection` components use Livewire to perform uploads. 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.