39 lines
2.4 KiB
Twig
39 lines
2.4 KiB
Twig
<div {{ stimulus_controller('upload-collection', {
|
|
'endpointUpload': endpoint_upload,
|
|
'endpointDelete': path('app_upload_delete'),
|
|
'maxFiles': max_files|default(10),
|
|
'maxFilesize': max_filesize|default(5),
|
|
'acceptedFiles': accepted_files|default(null),
|
|
'params': upload_session_params|default(null),
|
|
'language': {
|
|
'fileTooBig': 'uploader.file_too_big'|trans({ '%maxFilesize%': 5 }),
|
|
'invalidFileType': 'uploader.invalid_file_type'|trans,
|
|
'maxFilesExceeded': 'uploader.max_files_exceeded'|trans({ '%maxFiles%': 10 })
|
|
}
|
|
}) }}>
|
|
<div {{ stimulus_target('upload-collection', 'dropzone') }} class="w-full flex flex-col space-y-4">
|
|
<div class="border border-dashed border-gray-400 rounded flex flex-col justify-center items-center p-4 pointer-events-none">
|
|
{{ icon('upload', 'w-6 h-6') }}
|
|
<span class="block text-sm text-center">{{ 'uploader.drop_files'|trans }} <strong>{{ 'uploader.click_here'|trans }}</strong></span>
|
|
</div>
|
|
<div class="border border-red-500 rounded-md p-4 text-red-500 hidden" {{ stimulus_target('upload-collection', 'errors') }}></div>
|
|
<template {{ stimulus_target('upload-collection', 'previewTemplate') }}>
|
|
<div class="bg-gray-100 border rounded p-2">
|
|
<div class="pb-2">
|
|
<span class="block bg-gray-400 h-1 w-0" data-dz-uploadprogress></span>
|
|
</div>
|
|
<div class="flex items-center space-x-2 px-2">
|
|
<img data-dz-thumbnail
|
|
src="{{ '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12l-3-3m0 0l-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>'|data_uri }}"
|
|
class="block h-8 w-auto"
|
|
alt="Upload">
|
|
<span class="flex-1" data-dz-name></span>
|
|
<button type="button" data-dz-remove>
|
|
{{ icon('delete', 'w-6 h-6 pointer-events-none') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|