file-uploader

// src/components/elements/file-uploader/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /elements/file-uploader
additionalProperties: false
type: object
required:
  - id
  - max_file_size_in_mb
  - max_files
  - upload_input_name
  - upload_url
properties:
  field_description:
    type: string
    description: Short user visible description or guidelines
  upload_url:
    type: string
    format: uri-reference
  upload_input_name:
    type: string
    description: The name attribute for the uploaded files field
  max_file_size_in_mb:
    type: integer
    minimum: 0
    maximum: 32
    default: 10
    description: Maximum file size in megabytes
  max_files:
    type: integer
    description: Maximum number of files that can be uploaded
  required:
    type: boolean
    description: Whether the file upload field is required
  id:
    type: string
    description: The id of the file uploader

// src/components/elements/file-uploader/mocks.yaml

upload_url: https://dummyjson.com/products/add
upload_input_name: uploaded_files
max_file_size_in_mb: 5
max_files: 3
id: form-element-input-file
$variants:
  - $name: Cloud support
    id: cloud-support-file-uploader
    max_file_size_in_mb: 32
    upload_url: https://dummyjson.com/cloud-support/add
  - $name: Required
    required: true

// src/components/elements/file-uploader/file-uploader.twig

{{ attach_library('finstral_global/element-file-uploader') }}

<div class="FileUploader js-FileUploader"
		 data-upload-url="{{ upload_url }}"
		 data-max-file-size="{{ max_file_size_in_mb }}"
		 data-max-files="{{ max_files }}"
		 data-error-required="{{ "fileUploader.isRequiredError"|tc }}"
		 data-error-big-file="{{ "fileUploader.errorBigFile"|tc }}"
		 data-error-max-files-exceeded="{{ "fileUploader.errorMaxFilesExceeded"|tc }}"
		 {% if required %}data-required{% endif %}
>
	<p class="FileUploader-description u-typo-TextL">{{ field_description|default("fileUploader.description"|tc) }}</p>
	<div class="FileUploader-fallback js-FileUploader-fallback">
		{% include "@elements/icon/icon.twig" with {
			classes: ["FileUploader-icon", "js-FileUploader-icon"],
			name: "upload",
			size: "large"
		} only %}
		<button type="button" class="FileUploader-description js-FileUploader-description u-typo-TextL">{{ "fileUploader.button.text"|tc }}</button>
		<p class="FileUploader-sizeWarning u-typo-TextS">{{ "fileUploader.sizeWarning"|tc({
				'@file_size': max_file_size_in_mb,
				'@files_amount': max_files,
			}) }}</p>
		{# .fallback is used by dropzone to hide this element when it cannot initialize #}
		<div class="fallback">
			<input name="file" type="file" multiple class="FileUploader-fallbackInput" id="{{ id }}">
		</div>
	</div>
	<div class="FileUploader-files js-FileUploader-files" hidden>
		<p class="FileUploader-file js-FileUploader-file" hidden>
			<span class="FileUploader-loadingIndicator js-FileUploader-loadingIndicator" aria-hidden="true"></span>
			{% include "@elements/icon/icon.twig" with {
				classes: ["FileUploader-icon", "js-FileUploader-icon"],
				name: "check_circle_filled",
				size: "small"
			} only %}
			<span class="FileUploader-contents">
				<span class="FileUploader-name js-FileUploader-name u-typo-TextS"></span>
				<span class="FileUploader-loadingBar js-FileUploader-loadingBar" aria-hidden="true"></span>
			</span>
			<button type="button" class="FileUploader-removeButton js-FileUploader-removeButton" disabled>
				{% include "@elements/icon/icon.twig" with {
					classes: ["FileUploader-fileRemoveIcon"],
					name: "delete",
					size: "small"
				} only %}
			</button>
		</p>
	</div>
	<div class="FileUploader-errors js-FileUploader-errors" hidden tabindex="-1">
		<p class="FileUploader-error js-FileUploader-error u-typo-TextS"></p>
	</div>
	<input class="FileUploader-uploaded-files js-FileUploader-uploaded-files Input" name="{{ upload_input_name }}" value="" type="hidden">
</div>