File Download

<sl-file-download> | SlFileDownload

Since 1.0

stable

Used to download a file on the client side and notify user when the download starts and is complete.

File download with notifications. Call the download method to start the download.

Download

<sl-file-download target-url="/" save-as-filename="home" id="example-1"></sl-file-download>
<sl-button id="example-1-button">Download</sl-button>
<script>
  document.querySelector('#example-1-button').addEventListener('click', () => {
    document.querySelector('#example-1').download();
  });
</script>

Examples

Custom messages

Use the starting-message, success-message, and error-message attributes to customize the messages.

Download

<sl-file-download target-url="/" save-as-filename="home" id="example-2" starting-message="Here we go!" success-message="Oh yeah!!!" error-message="Oh no!!!!"></sl-file-download>
<sl-button id="example-2-button">Download</sl-button>
<script>
  document.querySelector('#example-2-button').addEventListener('click', () => {
    document.querySelector('#example-2').download();
  });
</script>

Timestamp on saved file name

By default, a timestamp is added to the save as filename when saving. To stop this, use no-timestamp attribute.

Download

<sl-file-download target-url="/" save-as-filename="home" id="example-3" no-timestamp></sl-file-download>
<sl-button id="example-3-button">Download</sl-button>
<script>
  document.querySelector('#example-3-button').addEventListener('click', () => {
    document.querySelector('#example-3').download();
  });
</script>

[component-metadata:sl-file-download]

Properties

Name	Description	Type	Default
`saveAsFilename` `save-as-filename`	The filename to use when saving.	`string`	`'downloadgit'`
`targetUrl` `target-url`	The url to be downloaded. Only GET requests are currently supported.	`string`	`''`
`errorMessage` `error-message`	The message to display when the download fails. Set to blank to hide the alert.	`string`	`'Download failed'`
`successMessage` `success-message`	The message to display when the download is complete. Set to blank to hide the alert.	`string`	`'Download complete'`
`startingMessage` `starting-message`	The message to display when the download is starting. Set to blank to hide the alert.	`string`	`'Downloading file'`
`noTimestamp` `no-timestamp`	Whether to suppress the timestamp on the output filename	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name	Description
`base`	The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<sl-alert>
<sl-icon>
<sl-icon-button>