Crayons

# File uploader (fw-file-uploader)

fw-file-uploader can be used to upload files to a server.

# File uploader as a standalone (without a form and with action url)


Upload file
Show Code

# File uploader inside a form.


Upload file
Show Code

# File uploader - upload failure and reupload example

Switch to succeed file upload


Upload file
Show Code

# File uploader - Modify header tokens in the request

Modify the header using the 'modifyHeader' prop. We will receive the XHR request as the first param in the modifyHeader function call.


Upload file
Show Code

# File uploader - custom buttons to upload / reset



Show Code

# Properties

Property Attribute Description Type Default
accept accept accept - comma separated string. tells us what file formats file uploader should accept. string ''
acceptError accept-error acceptError - Error message to display when format is invalid. any undefined
actionParams action-params actionParams - additional information to send to server other than the file. any {}
actionURL action-u-r-l actionURL - URL to make server call. string ''
description description description - file uploader description. any undefined
fileUploadError file-upload-error fileUploadError - Error message when a file upload fails. any undefined
filesLimit files-limit Max files allowed to upload. number 10
hint hint hint - file uploader hint text. string ''
maxFileSize max-file-size maxFileSize - maximum file size the file uploader must accept. number 0
maxFileSizeError max-file-size-error maxFileSizeError - Error message to display when file size exceeds limit any undefined
maxFilesLimitError max-files-limit-error maxFilesLimitError - Error message when going beyond files limit. any undefined
modifyRequest -- modify request (xhr: any) => any (xhr) => xhr
multiple multiple multiple - upload multiple files. boolean false
name name name - field name string ''
text text text - file uploader text. any undefined

# Events

Event Description Type
fwFileReuploaded fileReuploaded - event that gets emitted when file is reuploaded CustomEvent<any>
fwFilesUploaded filesUploaded - event that gets emitted when files get uploaded CustomEvent<any>
fwStageChanged stageChanged - event that gets emitted when component stage changes CustomEvent<any>

# Methods

# getFiles() => Promise<FileList>

get all locally available files in the component

# Returns

Type: Promise<FileList>

FileList of all locally available files in the component

# reset() => Promise<void>

reset file uploader

# Returns

Type: Promise<void>

# uploadFiles() => Promise<void>

uploadFiles - uploads the files to the server. emits an after file is uploaded.

# Returns

Type: Promise<void>

# CSS Custom Properties

Name Description
--fw-file-uploader-border border color for file uploader

# Dependencies

# Depends on

# Graph

graph TD;
  fw-file-uploader --> fw-file-uploader-progress
  fw-file-uploader --> fw-file-uploader-file
  fw-file-uploader-progress --> fw-icon
  fw-file-uploader-file --> fw-icon
  style fw-file-uploader fill:#f9f,stroke:#333,stroke-width:4px

Built with ❤ at Freshworks

← File uploader 2 (fw-file-uploader-2) →