UI components
for laravel-medialibrary

<!-- Livewire and Blade -->
<x-media-library-attachment name="media" />
/* React */
<MediaLibraryAttachment
    name="media"
/>
<!-- Vue -->
<media-library-attachment name="media" />

Pick your flavor

We have components for React, Vue 2 / 3, Livewire, and Blade components. All integrated seamlessly and playing nicely with your Laravel Media Models.

• Livewire and Blade
  •
• React
  •
• Vue
  •

<!-- Livewire and Blade -->
<x-media-library-collection
    name="media"
    rules="mimes:png,jpeg"
/>
        

/* React */
<MediaLibraryCollection
    name="media"
    initialValue={media}
    validationRules={{ accept: ['image/png', 'image/jpeg'], maxSizeInKB: 1024 }}
    validationErrors={errors}
/>
        

<!-- Vue -->
<media-library-collection
    name="media"
    :initial-value="{{ $media }}"
    :validation-rules="{ accept: ['image/png', 'image/jpeg'], maxSizeInKB: 1024 }"
    :validation-errors="{{ $errors }}"
/>
                    

Pick use case

Out-of-the box components cover use cases from single file uploads, multiple thumbnails to displaying entire collections with custom fields. Do you want to roll out your own variant? Read on…

• Livewire and Blade
  •
• React
  •
• Vue
  •

<!-- Livewire and Blade -->
<x-media-library-collection
    name="media"
    properties-view="uploads.partials.properties"
/>
                        

/* React */
<MediaLibraryCollection
    name="media"
    propertiesView={({ object }) => (
        <div>{object.attributes.name}</div>
    )}
/>
                        

<!-- Vue -->
<media-library-collection name="media">
    <div slot="properties" slot-scope="{ object }">
        <div>{{ object.attributes.name }}</div>
    </div>
</media-library-collection>
                        

Made to customize

All components have been designed from the ground up to be customized or extended. There are slots for the list, a media item, the props and item fields, so you can play with every part of the components.

Learn how to create custom Vue components.

Learn how to create custom React components.

/* Tailwind CSS */
.media-library-thumb-img {
    @apply  w-full;
    @apply  h-full;
    @apply  object-cover;
    @apply  overflow-hidden;
}

Tailwind CSS support

Media Library Pro ships with a clean design that can be used as is, or integrates with your own tailwind.config.js to use your apps color scheme and settings. Nothing stops you to go even further and adjust every little detail with custom CSS.

Extra punch under the hood

We included the following pro features:

• Temporary uploads ensure that users don't need to upload files when submitting an invalid form
• You can use the components inside your Blade views, no Livewire knowledge needed. Alternatively, you can also used them within Livewire components
• Extensive validation rules ensure that only files you expect get persisted
• Support for Laravel Vapor (Vue and React components)
• Built on rock solid foundation of Media Library which has been downloaded over three million times.

Buy once (a year)

We have a license for a single Laravel project or for agencies with multiple projects. Every license includes:

• Run forever on the current release. Every purchase includes one year of upgrades
• Optionally renew your license every year to stay on the latest release and keep using our package repository.