File Upload

<afp-file-upload>

experimental

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A file upload component that allows users to select files.

<afp-file-upload> </afp-file-upload>

<afp-file-upload> </afp-file-upload>

<AfpFileUpload> </AfpFileUpload>

<AfpFileUpload> </AfpFileUpload>

Examples #

File Size Limit #

Use the maxSize attribute to set a maximum file size in bytes (5MB = 5242880 bytes).

Upload document PDF or Word files (max 5MB)

<afp-file-upload maxsize="5242880" accept=".pdf,.doc,.docx">
  <span slot="title"><strong>Upload document</strong></span>
  <span slot="hint">PDF or Word files (max 5MB)</span>
</afp-file-upload>

<afp-file-upload [maxsize]=5242880 [accept]="'.pdf,.doc,.docx'">
  <span slot="title"><strong>Upload document</strong></span>
  <span slot="hint">PDF or Word files (max 5MB)</span>
</afp-file-upload>

<AfpFileUpload maxsize="5242880" accept=".pdf,.doc,.docx">
  <span slot="title"><strong>Upload document</strong></span>
  <span slot="hint">PDF or Word files (max 5MB)</span>
</AfpFileUpload>

<AfpFileUpload :maxsize=5242880 :accept="'.pdf,.doc,.docx'">
  <span slot="title"><strong>Upload document</strong></span>
  <span slot="hint">PDF or Word files (max 5MB)</span>
</AfpFileUpload>

Multiple Files #

Use the multiple attribute to allow selecting multiple files.

Upload documents You can select multiple files

<afp-file-upload multiple>
  <span slot="title"><strong>Upload documents</strong></span>
  <span slot="hint">You can select multiple files</span>
</afp-file-upload>

<afp-file-upload multiple>
  <span slot="title"><strong>Upload documents</strong></span>
  <span slot="hint">You can select multiple files</span>
</afp-file-upload>

<AfpFileUpload multiple>
  <span slot="title"><strong>Upload documents</strong></span>
  <span slot="hint">You can select multiple files</span>
</AfpFileUpload>

<AfpFileUpload multiple>
  <span slot="title"><strong>Upload documents</strong></span>
  <span slot="hint">You can select multiple files</span>
</AfpFileUpload>

File Type Restriction #

Use the accept attribute to restrict file types.

Upload images PNG, JPG, GIF or WebP

<afp-file-upload accept="image/*">
  <span slot="title"><strong>Upload images</strong></span>
  <span slot="hint">PNG, JPG, GIF or WebP</span>
</afp-file-upload>

<afp-file-upload [accept]="'image/*'">
  <span slot="title"><strong>Upload images</strong></span>
  <span slot="hint">PNG, JPG, GIF or WebP</span>
</afp-file-upload>

<AfpFileUpload accept="image/*">
  <span slot="title"><strong>Upload images</strong></span>
  <span slot="hint">PNG, JPG, GIF or WebP</span>
</AfpFileUpload>

<AfpFileUpload :accept="'image/*'">
  <span slot="title"><strong>Upload images</strong></span>
  <span slot="hint">PNG, JPG, GIF or WebP</span>
</AfpFileUpload>

Retry Upload #

Use the showRetry (showretry) attribute to enable the retry upload button. This button is displayed only when the state is error.

Upload a document You can retry uploading the file

<afp-file-upload id="file-uploader-retry" state="error" showretry>
  <span slot="title"><strong>Upload a document</strong></span>
  <span slot="hint">You can retry uploading the file</span>
</afp-file-upload>

<script type="module">
    const uploader = document.getElementById('file-uploader-retry');

    uploader['handleFileChange']({
        target: { files: [ new File(['retry'], 'Retry uploading.pdf') ] }
    });
</script>

<afp-file-upload [id]="'file-uploader-retry'" [state]="'error'" showretry>
  <span slot="title"><strong>Upload a document</strong></span>
  <span slot="hint">You can retry uploading the file</span>
</afp-file-upload>

<script type="module">
    const uploader = document.getElementById('file-uploader-retry');

    uploader['handleFileChange']({
        target: { files: [ new File(['retry'], 'Retry uploading.pdf') ] }
    });
</script>

<AfpFileUpload id="file-uploader-retry" state="error" showretry>
  <span slot="title"><strong>Upload a document</strong></span>
  <span slot="hint">You can retry uploading the file</span>
</AfpFileUpload>

<script type="module">
    const uploader = document.getElementById('file-uploader-retry');

    uploader['handleFileChange']({
        target: { files: [ new File(['retry'], 'Retry uploading.pdf') ] }
    });
</script>

<AfpFileUpload :id="'file-uploader-retry'" :state="'error'" showretry>
  <span slot="title"><strong>Upload a document</strong></span>
  <span slot="hint">You can retry uploading the file</span>
</AfpFileUpload>

<script type="module">
    const uploader = document.getElementById('file-uploader-retry');

    uploader['handleFileChange']({
        target: { files: [ new File(['retry'], 'Retry uploading.pdf') ] }
    });
</script>

File State #

Use the state attribute to indicate the current status of the uploaded file(s). Any value from the AfpVariant enum can be used,

Upload Documents

<afp-file-upload id="file-uploader-state" multiple>
  <span slot="title"><strong>Upload Documents</strong></span>
</afp-file-upload>

<script type="module">
    const uploader = document.getElementById('file-uploader-state');
    
    const files = [
        { file: new File(['success'], 'Success.pdf'), state: 'success' },
        { file: new File(['error'], 'Error.pdf'), state: 'error' },
        { file: new File(['warning'], 'Warning.pdf'), state: 'warning' }
    ];

    files.forEach(item => {
        uploader.state = item.state;
        uploader['handleFileChange']({
            target: { files: [item.file] }
        });
    });

</script>

<afp-file-upload [id]="'file-uploader-state'" multiple>
  <span slot="title"><strong>Upload Documents</strong></span>
</afp-file-upload>

<script type="module">
    const uploader = document.getElementById('file-uploader-state');
    
    const files = [
        { file: new File(['success'], 'Success.pdf'), state: 'success' },
        { file: new File(['error'], 'Error.pdf'), state: 'error' },
        { file: new File(['warning'], 'Warning.pdf'), state: 'warning' }
    ];

    files.forEach(item => {
        uploader.state = item.state;
        uploader['handleFileChange']({
            target: { files: [item.file] }
        });
    });

</script>

<AfpFileUpload id="file-uploader-state" multiple>
  <span slot="title"><strong>Upload Documents</strong></span>
</AfpFileUpload>

<script type="module">
    const uploader = document.getElementById('file-uploader-state');
    
    const files = [
        { file: new File(['success'], 'Success.pdf'), state: 'success' },
        { file: new File(['error'], 'Error.pdf'), state: 'error' },
        { file: new File(['warning'], 'Warning.pdf'), state: 'warning' }
    ];

    files.forEach(item => {
        uploader.state = item.state;
        uploader['handleFileChange']({
            target: { files: [item.file] }
        });
    });

</script>

<AfpFileUpload :id="'file-uploader-state'" multiple>
  <span slot="title"><strong>Upload Documents</strong></span>
</AfpFileUpload>

<script type="module">
    const uploader = document.getElementById('file-uploader-state');
    
    const files = [
        { file: new File(['success'], 'Success.pdf'), state: 'success' },
        { file: new File(['error'], 'Error.pdf'), state: 'error' },
        { file: new File(['warning'], 'Warning.pdf'), state: 'warning' }
    ];

    files.forEach(item => {
        uploader.state = item.state;
        uploader['handleFileChange']({
            target: { files: [item.file] }
        });
    });

</script>

Disabled #

Use the disabled attribute to disable the file upload.

Upload disabled File upload is currently unavailable

<afp-file-upload disabled>
  <span slot="title"><strong>Upload disabled</strong></span>
  <span slot="hint">File upload is currently unavailable</span>
</afp-file-upload>

<afp-file-upload disabled>
  <span slot="title"><strong>Upload disabled</strong></span>
  <span slot="hint">File upload is currently unavailable</span>
</afp-file-upload>

<AfpFileUpload disabled>
  <span slot="title"><strong>Upload disabled</strong></span>
  <span slot="hint">File upload is currently unavailable</span>
</AfpFileUpload>

<AfpFileUpload disabled>
  <span slot="title"><strong>Upload disabled</strong></span>
  <span slot="hint">File upload is currently unavailable</span>
</AfpFileUpload>

Custom Title and Hint #

Use the title and hint slots to customize the upload area text.

Upload your photo JPG, PNG or GIF files

<afp-file-upload>
  <span slot="title"><strong>Upload your photo</strong></span>
  <span slot="hint">JPG, PNG or GIF files</span>
</afp-file-upload>

<afp-file-upload>
  <span slot="title"><strong>Upload your photo</strong></span>
  <span slot="hint">JPG, PNG or GIF files</span>
</afp-file-upload>

<AfpFileUpload>
  <span slot="title"><strong>Upload your photo</strong></span>
  <span slot="hint">JPG, PNG or GIF files</span>
</AfpFileUpload>

<AfpFileUpload>
  <span slot="title"><strong>Upload your photo</strong></span>
  <span slot="hint">JPG, PNG or GIF files</span>
</AfpFileUpload>

Custom Icon #

Use the icon slot to customize the upload area icon.

Upload images Select your images to upload

<afp-file-upload accept="image/*">
  <afp-icon slot="icon" name="image" style="--afp-icon-size: 1.5rem"></afp-icon>
  <span slot="title"><strong>Upload images</strong></span>
  <span slot="hint">Select your images to upload</span>
</afp-file-upload>

<afp-file-upload [accept]="'image/*'">
  <afp-icon [slot]="'icon'" [name]="'image'" [style]="'--afp-icon-size: 1.5rem'"></afp-icon>
  <span slot="title"><strong>Upload images</strong></span>
  <span slot="hint">Select your images to upload</span>
</afp-file-upload>

<AfpFileUpload accept="image/*">
  <AfpIcon slot="icon" name="image" style="--afp-icon-size: 1.5rem"></AfpIcon>
  <span slot="title"><strong>Upload images</strong></span>
  <span slot="hint">Select your images to upload</span>
</AfpFileUpload>

<AfpFileUpload :accept="'image/*'">
  <AfpIcon :slot="'icon'" :name="'image'" :style="'--afp-icon-size: 1.5rem'"></AfpIcon>
  <span slot="title"><strong>Upload images</strong></span>
  <span slot="hint">Select your images to upload</span>
</AfpFileUpload>

Custom Retry Upload Icon #

Use the retry-icon slot to customize the retry upload button icon.

Upload documents Retry uploading the document

<afp-file-upload id="file-uploader-retry-custom" state="error" showretry>
  <span slot="title"><strong>Upload documents</strong></span>
  <span slot="hint">Retry uploading the document</span>
  <afp-icon slot="retry-icon" name="arrow-repeat" style="color:green"></afp-icon>
</afp-file-upload>

<script type="module">
    const uploader = document.getElementById('file-uploader-retry-custom');

    uploader['handleFileChange']({
        target: { files: [new File(['retry'], 'Retry uploading.pdf')] }
    });
</script>

<afp-file-upload [id]="'file-uploader-retry-custom'" [state]="'error'" showretry>
  <span slot="title"><strong>Upload documents</strong></span>
  <span slot="hint">Retry uploading the document</span>
  <afp-icon [slot]="'retry-icon'" [name]="'arrow-repeat'" [style]="'color:green'"></afp-icon>
</afp-file-upload>

<script type="module">
    const uploader = document.getElementById('file-uploader-retry-custom');

    uploader['handleFileChange']({
        target: { files: [new File(['retry'], 'Retry uploading.pdf')] }
    });
</script>

<AfpFileUpload id="file-uploader-retry-custom" state="error" showretry>
  <span slot="title"><strong>Upload documents</strong></span>
  <span slot="hint">Retry uploading the document</span>
  <AfpIcon slot="retry-icon" name="arrow-repeat" style="color:green"></AfpIcon>
</AfpFileUpload>

<script type="module">
    const uploader = document.getElementById('file-uploader-retry-custom');

    uploader['handleFileChange']({
        target: { files: [new File(['retry'], 'Retry uploading.pdf')] }
    });
</script>

<AfpFileUpload :id="'file-uploader-retry-custom'" :state="'error'" showretry>
  <span slot="title"><strong>Upload documents</strong></span>
  <span slot="hint">Retry uploading the document</span>
  <AfpIcon :slot="'retry-icon'" :name="'arrow-repeat'" :style="'color:green'"></AfpIcon>
</AfpFileUpload>

<script type="module">
    const uploader = document.getElementById('file-uploader-retry-custom');

    uploader['handleFileChange']({
        target: { files: [new File(['retry'], 'Retry uploading.pdf')] }
    });
</script>

Properties

Learn more about properties.

Name Description Reflects

accept

Accepted file types (e.g., 'image/*', '.pdf,.doc').

Type string

Default ''

multiple

Allow multiple file selection.

Type boolean

Default false

maxSize
maxsize

Maximum file size in bytes.

Type number

Default 0

disabled

Disable the file upload.

Type boolean

Default false

state

State of the uploaded file(s).

Type

AfpVariant

Name	Description
`NEUTRAL`	The main call-to-action.
`BRAND`	Less prominent than primary.
`ACCENT`	Secondary highlight for emphasis.
`ERROR`	Used for destructive or critical actions.
`INFO`	Conveys general information.
`SUCCESS`	Indicates a successful or positive action.
`WARNING`	Communicates cautionary actions.

AfpVariant

showRetry
showretry

State of the uploaded file(s).

Type boolean

Default false

Events

Learn more about events.

Name	Return	Description
`afp-file-change`	`File[]`	Emitted when files are selected or removed.

Slots

Learn more about slots.

Name	Description
`icon`	The upload area icon. Defaults to cloud-upload icon.
`title`	The upload area title text.
`hint`	The upload area hint text.
`file-icon`	The icon for each file item. Defaults to file-earmark icon.
`remove-icon`	The icon for the remove file button. Defaults to x icon.
`retry-icon`	The icon for the retry upload file button. Defaults to arrow-counterclockwise icon.

Internationalization

Learn more about internationalization.

Key	Description
`file-upload.remove-file.aria-label`	The default `aria-label` text for the remove file button.
`file-upload.retry-upload-file.aria-label`	The default `aria-label` text for the retry upload file button.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`
`hidden-file-input`	The hidden file input element.	`::part(hidden-file-input)`
`upload-area`	The file upload area.	`::part(upload-area)`
`content`	The content wrapper inside the upload area.	`::part(content)`
`content-icon`	The icon inside the upload area.	`::part(content-icon)`
`content-text-wrapper`	The text wrapper inside the upload area.	`::part(content-text-wrapper)`
`content-title`	The title text inside the upload area.	`::part(content-title)`
`content-hint`	The hint text inside the upload area.	`::part(content-hint)`
`item-list`	The list wrapper for selected files.	`::part(item-list)`
`item-item`	The individual file item wrapper.	`::part(item-item)`
`item-icon`	The icon for each file item.	`::part(item-icon)`
`item-info`	The info wrapper for each file item.	`::part(item-info)`
`item-info-name`	The file name text for each file item.	`::part(item-info-name)`
`item-info-size`	The file size text for each file item.	`::part(item-info-size)`
`item-actions`	The actions for each file item.	`::part(item-actions)`
`item-actions-remove-button`	The remove file button for each file item.	`::part(item-actions-remove-button)`
`item-actions-retry-button`	The retry upload file button for each file item.	`::part(item-actions-retry-button)`
`file-actions-retry-icon`	The icon for retry upload file button.	`::part(file-actions-retry-icon)`

CSS Custom Properties

Name	Description	Default
`--afp-file-upload-disabled-opacity`	The opacity of the file-upload when disabled.	`0.5`
`--afp-file-upload-size`	The size of the file-upload component.	`8rem`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-button

afp-icon

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/file-upload/file-upload.js';