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.

Component	CSS Part Prefix
afp-button	`item-actions-remove-button` - The remove file button for each file item. `item-actions-retry-button` - The retry upload file button for each file item.
afp-icon	`content-icon` - The icon inside the upload area. `item-icon` - The icon for each file item. `file-actions-retry-icon` - The icon for retry upload file button.

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';