File Upload

<sl-file-upload> | SlFileUpload
Since 2.0 hub24

Drag/drop enabled file upload. Allows the user to drag a file into a drop zone, and processes it.. 

<sl-file-upload></sl-file-upload>

Examples

Drop zone content

Use the default slot to control the drop zone’s content

Special drop zone

Drop your files here! 
<sl-file-upload>
  <p><b>Special drop zone</b></p>
  Drop your files here!
</sl-file-upload>

Getting file content

The component will emit a sl-input event when a file of an appropriate type has been dropped. 

<sl-file-upload id="file-upload-1"></sl-file-upload>

<script type="module">
  const fileUpload1 = document.querySelector("#file-upload-1");

  fileUpload1.addEventListener('sl-input', () => {
      console.log("File content: ", fileUpload1.value);
  });
</script>

Output data types

Use the output-type attribute to use different types of output.

Allowed types are ‘data-url’ | ‘text’ | ‘array-buffer’

Drop a text file here and check the console log 
<sl-file-upload id="file-upload-2" output-type="text" allowed-types='["txt"]' unsupported-type-message="Only text files are allowed here!">
  Drop a text file here and check the console log
</sl-file-upload>

<script type="module">
  const fileUpload2 = document.querySelector("#file-upload-2");

  fileUpload2.addEventListener('sl-input', () => {
      console.log("File content: ", fileUpload2.value);
  });
</script>

Getting file meta data

The fileDetails property returns an object with the file name, size, type, and last modified date. 

<sl-file-upload id="file-upload-3"></sl-file-upload>

<script type="module">
  const fileUpload3 = document.querySelector("#file-upload-3");

  fileUpload3.addEventListener('sl-input', () => {
      console.log("File meta data: ", fileUpload3.fileDetails);
  });
</script>

Restricting allowed file types

Use the allowed-types attribute to control the allowed types. Note the single/double quote pattern. This pattern is required for the deserialisation of the array.

Use the unsupported-type-message attribute to set a custom message when an unsupported file type is uploaded.

Only SVG and PNG files are allowed here

 
<sl-file-upload
    id="branding-logo-file-upload"
    allowed-types='["svg", "png"]'
    unsupported-type-message="Only SVG and PNG files are supported here!!!!"
    output-type="data-url"

    >
  <p>Only SVG and PNG files are allowed here</p>
</sl-file-upload>

<script>
  (() => {
    const fileUpload = document.querySelector('#branding-logo-file-upload');

    fileUpload.addEventListener('sl-input', () => {
      console.log("file uploaded", fileUpload.value);
      document.querySelector('#branding-logo-upload-complete-alert').toast();
    });
  })();
</script>

[component-metadata:sl-file-upload]

Slots

Name Description
(default) The content for the drop zone.

Learn more about using slots.

Properties

Name Description Reflects Type Default
allowedTypes
allowed-types 		Allowed file types. Supported values are ‘svg’, ‘jpg’, ‘png’, ‘gif’. If empty, then all supported types are allowed. Defaults to images only. string[] []
outputType
output-type 		Output type. Default is data-url 'data-url' | 'text' | 'array-buffer' 'data-url'
unsupportedTypeMessage
unsupported-type-message 		The message to show when a file type that is not supported is dropped string 'Unsupported file type. Please upload a SVG, PNG, JPEG or GIF image.'
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-input Emitted when a file of valid type is dropped. -

Learn more about events.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-example>