# Upload

[component-header:sl-upload]

Component for uploading files.

## Area layout

```html preview
<sl-upload id="ul" description="You can choose whatever file you want to upload."></sl-upload>
<script>
    let ul = document.getElementById('ul');
    ul.addEventListener('upload', (evt) => {
        console.log(evt.detail);
    });
</script>
```

## Custom layout via slot
By using the upload slot you can use any element you like as an upload trigger. 

```html preview
<sl-upload id="ul2">
    <sl-button slot="trigger">Upload image or PDF</sl-button>
</sl-upload>
<script>
    let ul = document.getElementById('ul');
    ul.addEventListener('upload', (evt) => {
        console.log(evt.detail);
    });
</script>
```

## Accept filter
You can set the accept attribute to define which type of files can be selected in he file dialog. 

```html preview
<sl-upload id="ul3" accept="image/*,.pdf"></sl-upload>
<script>
    let ul = document.getElementById('ul');
    ul.addEventListener('upload', (evt) => {
        console.log(evt.detail);
    });
</script>
```

## Multiple
It is possible to select multiple files by setting the multiple attribute to `true`. 

```html preview
<sl-upload id="ul4" multiple="true"></sl-upload>
<script>
    let ul = document.getElementById('ul');
    ul.addEventListener('upload', (evt) => {
        console.log(evt.detail);
    });
</script>
```


[component-metadata:sl-upload]