Picture by Andrew Neel | Unsplash

Demo: collection

A Collection is a component to manage your media data. Load and add items, fill in properties and sort rows.

The collection above will display files that are uploaded in this session. We'll delete any files that are older than 10 minutes. You can test out the component with any file under 1 Mb. We've configured this collection so it can hold a maximum of three files.

Source

<!-- Livewire and Blade -->
<x-media-library-collection
    name="downloads"
    :model="$formSubmission"
    collection="downloads"
    max-items="3"
    rules="mimes:png,jpeg|max:1024"
/>
/* React */
<MediaLibraryCollection
    name="downloads"
    initialValue={downloads}
    maxItems={3}
    validationRules={{ accept: ['image/png', 'image/jpeg'], maxSizeInKB: 1024  }}
    validationErrors={{ errors }}
/>
        
<!-- Vue -->
<media-library-collection
    name="downloads"
    :initial-value="{{ $downloads }}"
    :max-items="3"
    :validation-rules="{ accept: ['image/png', 'image/jpeg'], maxSizeInKB: 1024  }"
    :validation-errors="{{ $errors }}"
/>