Crayons

# File uploader 2 (fw-file-uploader-2)

# Default auto upload file uploader

Show Code

# File uploader with initial values set

Expected format for initial file upload:

  const lastServerResponse = {
    uploadStatus: 200,
    response: `{ 
      "headers": {
        "host": "**",
        ..
      } 
    }`
  };

  // progress, error and lastServerResponse are optional in the below object.
  const InitialFiles: [{
    "file": File, // File object
    "progress": 100, // Can we any value ranging from 0 to 100. Set -1 for error state.
    "error": "", // Error text to display when progress is -1. Must be empty for successful state.
    "lastServerResponse": lastServerResponse, // Just a reference placeholder for storing any response from last server call.
  }];
Show Code

# File upload on a button trigger


Upload file
Show Code

# File uploader as part of a form


Upload file
Show Code

# File upload - retry cases

Switch to succeed file upload


Upload file
Show Code

# File upload - modify header request


Upload file
Show Code

# File upload - custom upload and reset buttons



Show Code

# Restrict attachment size

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 TranslationController.t('fileUploader2.acceptError')
actionParams -- actionParams - additional information to send to server other than the file. { [prop: string]: any; } {}
actionURL action-u-r-l actionURL - URL to make server call. string ''
description description description - file uploader description. any undefined
errorText error-text errorText - errorText collection. Mutable as this can be set from form control too based on form validations. string ''
fileUploadError file-upload-error fileUploadError - Error message when a file upload fails. any undefined
filesLimit files-limit Max files allowed to upload. number 10
hideLabel hide-label Use this prop to show the label on the component. boolean true
hintText hint-text Inline information text, hint text. string ''
initialFiles -- to load default values in file uploader component. InitialUploaderFile[] []
isBatchUpload is-batch-upload Upload all files in one single shot boolean false
isFormLabel is-form-label To maintain the same label styling as other form elements. boolean false
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 TranslationController.t('fileUploader2.maxFileSizeError')
maxFilesLimitError max-files-limit-error maxFilesLimitError - Error message when going beyond files limit. any TranslationController.t( 'fileUploader2.maxFilesLimitError' )
modifyRequest -- modify request (xhr: XMLHttpRequest) => XMLHttpRequest (xhr) => xhr
multiple multiple multiple - upload multiple files. boolean false
name name name - field name string ''
required required field acts as a mandatory field and displays an asterisk next to the label. If the attribute’s value is undefined, the value is set to false. boolean false
restrictAttachmentBlock restrict-attachment-block restrict the width of the attachment in the file uploader boolean false
simpleInterfaceForSingleMode simple-interface-for-single-mode Use a simple interface for the single file mode. boolean false
text text text - file uploader text. any undefined
totalFileSizeAllowed total-file-size-allowed Max total size allowed for upload number 0
totalFileSizeAllowedError total-file-size-allowed-error totalFileSizeAllowedError - Total file size (combination of all files) allowed for upload. any TranslationController.t( 'fileUploader2.totalFileSizeAllowedError' )

# Events

Event Description Type
fwChange Triggered whenever files change. CustomEvent<any>
fwFileChange Triggered for a particular file change. CustomEvent<any>
fwFileReuploaded Triggered during a file reupload. CustomEvent<any>
fwFilesUploaded Triggered after batch upload, when all files are uploaded. CustomEvent<any>
fwFileUploaded Triggered after file upload if not a batch upload. CustomEvent<any>

# Methods

# getFiles() => Promise<UploaderFile[]>

get all locally available files in the component

# Returns

Type: Promise<UploaderFile[]>

FileList of all locally available files in the component

# getFilesList() => Promise<FileList>

# Returns

Type: Promise<FileList>

# reset() => Promise<void>

reset file uploader

# Returns

Type: Promise<void>

# setFocus() => Promise<void>

# Returns

Type: Promise<void>

# uploadFiles() => Promise<void>

uploadFile

# Returns

Type: Promise<void>

fileUploadPromise

# CSS Custom Properties

Name Description
--fw-file-uploader-border border color for file uploader
--max-attachment-height max-height for the attachment block
--max-attachment-width max width for the attachment block

# Dependencies

# Used by

# Depends on

# Graph

graph TD;
  fw-file-uploader-2 --> fw-file-2
  fw-file-uploader-2 --> fw-inline-message
  fw-file-2 --> fw-icon
  fw-file-2 --> fw-tooltip
  fw-file-2 --> fw-spinner
  fw-tooltip --> fw-popover
  fw-inline-message --> fw-icon
  fw-form-control --> fw-file-uploader-2
  style fw-file-uploader-2 fill:#f9f,stroke:#333,stroke-width:4px

Built with ❤ at Freshworks

← Form (fw-form) →