Компоненты вложения и коллекции используют Livewire, но для их использования не требуется никаких знаний Livewire. Вы можете использовать их в своих представлениях Blade без какого-либо кода, специфичного для Livewire.
Есть три сцеария отображения MEDIA LIBRARY UI, это загрузка одного файла, загрузка нескольких файлов и отображение колекции уже загруженных файлов (если они есть) с возможностью редактирования и подгрузки.
Для загрузки отдельных файлов вы можете использовать attachment компонент. Он может быть включен в ваш blade-файл следующим образом:
<form method="post">
<x-medialibrary-ui-attachment name="media" rules="mimes:png,jpeg,pdf"/>
<button>Отправить</button>
</form>
Для обработки множественных загрузок вы можете просто добавить свойство multiple к вашему компоненту:
<form method="post">
<x-medialibrary-ui-attachment multiple name="media" rules="mimes:png,jpeg,pdf" />
<button>Отправить</button>
</form>
Вы можете управлять всем содержимым коллекции медиабиблиотеки с помощью x-medialibrary-ui-collection компонента. Этот компонент особенно полезен в разделах администрирования. в качетве аргумерта :model необходимо передать модель с доступными медиа, а в качестве аргкмента collection передать название колекции этих медиа
<form method="post">
<x-medialibrary-ui-collection
name="images"
:model="$formSubmission"
collection="images"
max-items="3"
rules="mimes:png,jpeg"
/>
</form>
Хоть на стороне клиента и проходят проверки по типу файлов и так далее необходимо всегда проверять эти файлы на сторорне сервера прежде чем прикреплять их к нашим моделям.
Компоненты библиотеки мультимедиа обеспечивают мгновенную проверку на стороне клиента. Подробнее об этом вы узнаете в документации компонента. Сначала мы настроим проверку на стороне сервера.
Для проверки загруженных медиафайлов мы будем использовать специальную форму запроса.
Это доступные методы проверки на validateSingleMedia() и validateMultipleMedia()
minSizeInKb($minSize): проверяет, что размер отдельной загрузки не меньше указанного в килобайтах.maxSizeInKb($maxSize): проверяет, что отдельная загрузка не превышает заданного значения в килобайтах.extension($extension): это правило ожидает одно расширение как строку или несколько расширений как массив. Под капотом правило будет проверять, имеет ли значение тип mime, соответствующий заданному расширению.mime($mime): это правило ожидает один тип MIME в виде строки или несколько типов MIME в виде массива.itemName($rules): это правило принимает правила, которые следует использовать для проверки имени элемента мультимедиа.customProperty($name, $rules): это правило принимает пользовательское имя свойства и правила, которые следует использовать для проверки атрибута.dimensions($width, $height): проверяет, что изображение имеет определенную ширину и высоту (в пикселях).width($width): проверяет, что изображение имеет определенную ширину (в пикселях). Высота не проверяется.height($height): проверяет, что изображение имеет определенную высоту (в пикселях). Ширина не проверяется.widthBetween($minWidth, $maxWidth): проверяет, что ширина изображения (в пикселях) находится в диапазоне от указанного значения $minWidth до $maxWidth указанного (включительно)heightBetween($minHeight, $maxHeight): проверяет, что высота изображения (в пикселях) находится в диапазоне от указанного значения $minHeight до $maxHeight указанного (включительно)Эти правила можно использовать только при validateMultipleMedia();
minTotalSizeInKb($maxTotalSize): проверяет, что общий размер загрузок не меньше указанного в килобайтах.maxTotalSizeInKb($maxTotalSize): проверяет, что общий размер загрузок не превышает заданного значения в килобайтах.Если вы правильно настроили пакет Laravel Medialibrary, ваши модели будут иметь несколько вспомогательных методов, которые помогут вам сохранять файлы, загруженные в компоненты Medialibrary Pro.
Представьте, что у вас есть компонент Medialibrary Pro с именем, а avatar ваш метод контроллера может выглядеть следующим образом:
После проверки запроса следует сохранить изменения в медиа-библиотеке. Медиа-библиотека предоставляет два метода для этого: syncFromMediaLibraryRequestи addFromMediaLibraryRequest. Оба эти метода доступны во всех моделях, которые обрабатывают медиа . В любом случае вызовите метод toMediaCollectionдля обновления медиа-модели в базе данных. Это также гарантирует, что временные загрузки будут преобразованы в соответствующую модель.
addFromMediaLibraryRequest
Этот метод добавит все медиа, которые uuidесть в запросе, в коллекцию медиа модели. Существующие медиа, связанные с моделью, останутся нетронутыми.
Вероятно, вам следует использовать этот метод только при принятии новых загрузок.
syncFromMediaLibraryRequest
Этот метод следует использовать при использовании x-media-library-collectionкомпонента Blade (или эквивалентного компонента Vue или React).
Вот пример, где мы собираемся синхронизировать содержимое ключа imagesв запросе в медиа-библиотеку. В этом примере мы используем ключ images, но, конечно, вы должны использовать то имя, которое вы использовали.
Все связанные с $yourModelним медиафайлы, которых uuidнет в imagesмассиве запроса, будут удалены.
После выполнения этого кода медиа, uuidприсутствующее в imagesмассиве запроса, будет находиться в images collection of $yourModel.
Обработка пользовательских свойств
Если вы используете свойства для своих медиа-элементов, вы должны передать имена пользовательских свойств, которые вы ожидаете, в withCustomPropertiesметод. Только эти пользовательские свойства будут приняты.
Если вы хотите использовать определенное имя носителя перед его добавлением на диск, вы можете воспользоваться этим usingNameметодом.
Мы ProfileControllerпостроили, предполагая, что пользователи будут загружать только те типы файлов, которые мы ищем. Конечно, нет! Нам нужно проверить входящие медиа, прежде чем прикреплять их к нашим моделям.
Компоненты библиотеки мультимедиа обеспечивают мгновенную проверку на стороне клиента. Подробнее об этом вы узнаете в документации компонента. Сначала мы настроим проверку на стороне сервера.
Для проверки загруженных медиафайлов мы будем использовать специальную форму запроса.
Каждый компонент будет передавать данные в ключе запроса. Имя этого ключа — это имя, которое вы передали в nameprop любого из компонентов.
Содержимое этого ключа запроса будет массивом. Для каждого загруженного файла этот массив будет содержать массив с этими ключами.
name: имя загруженного файла
uuid: UUID модели Media. Для вновь загруженных файлов, которые еще не были связаны с моделью, модель Mediaбудет связана с TemporaryUploadмоделью
order: порядок, в котором этот элемент должен храниться в медиаколлекции.