Types

API reference docs for all the important types related to files UI components.

ExtFile

Data estructure that "extends" the File Object. This object is designed to allow the information exchange between components.

Name	Type	Description
id	string \| number	The identifier of the file
file	File	The file object obtained from client drop or selection
name	string	The name of the file
type	string	The file mime type.
size	number	The size of the file in bytes.
valid	boolean	If present, it will show a valid or rejected message ("valid", "denied"). By default valid is `undefined`.
errors	string[]	The list of errors according to the validation criteria or the result of the given custom validation function.
uploadStatus	UPLOADSTATUS	The current upload status. (e.g. "uploading").
uploadMessage	string	A message that shows the result of the upload process.
imageUrl	string	A string representation or web url of the image that will be set to the "src" prop of an `<img/>` tag. If given, the component will use this image source instead of reading the image file.
downloadUrl	string	The url to be used to perform a GET request in order to download the file. If defined, the download icon will be shown.
progress	number	The current percentage of upload progress. This value will have a higher priority over the upload progress value calculated inside the component.
extraUploadData	Record<string, any>	The additional data that will be sent to the server when files are uploaded individually
extraData	Object	Any kind of extra data that could be needed.
serverResponse	ServerResponse	The upload response from server.
xhr	XMLHttpRequest	A reference to the XHR object that allows the upload, progress and abort events.

ValidateFileResponse

Response convention for file validation

Name	Type	Description
valid	boolean	If true, that means that the File is valid
errors	string[]	The list of errors associated with an specific file.

UploadConfig

Configuration needed for performing the upload process

Name	Type	Default	Description
url	string		The url endpoint to upload the file. e.g. "https://www.myasomwbackend/uploads/file".
method	"POST" \| "PUT" \| "PATCH"	"POST"	Request headers for http request.
uploadLabel	string	"file"	The label to use in the request. On the server this must be the label to get the file.
cleanOnUpload	boolean		Flag for indicating whther to remove the non-valid files before starting the upload process. This flag is valid only if validation is enable.
autoUpload	boolean		If true, onDrop event or file selection not only will make Dropzone to return the list of files, but also it will start the upload stage for the files if at least url was set By default is false
preparingTime	number		The time that will last the "preparing" stage By default is 1500 miliseconds = 1.5 seconds.
uploadingMessage	string		A message to show in the footer when the uploading process takes place.

ActionButtons

Advanced configuration for buttons after or before the component. (Dropzone and FileInputButton)

Name	Type	Description
position	"before" \| "after"	The position of the action buttons. Before or after the component.
style	React.CSSProperties	The in-line style object applied to the main container.
className	string	The classname to override the css styles in .css or .sass file instead of using in-line styles. Classname is applied to the main container.
uploadButton	ActionButtonItem	If set, the upload button will be shown. Specific props applied to the upload button. Type definition can be found here.
abortButton	ActionButtonItem	If set, the abort button will be shown. Specific props applied to the abort button. Type definition can be found here.
deleteButton	ActionButtonItem	If set, the delete button will be shown. Specific props applied to the delete button. Type definition can be found here.
cleanButton	ActionButtonItem	If set, the clean button will be shown. Specific props applied to the clean button. Type definition can be found here.

ActionButtonItem

Advanced configuration for each action button

Name	Type	Default	Description
children	React.ReactNode		The content of the button.
label	string		The label of the button.
style	React.CSSProperties		The in-line style object applied to the main container.
className	string		The classname to override the css styles in .css or .sass file instead of using in-line styles. Classname is applied to the main container.
resetStyles	boolean		If true, the given class name and style properties will replace the default ones instead of overriding them.
onClick	func		Callback fired when the button is clicked. If given, will replace the default behaviour.
disabled	boolean	false	If true, the component is disabled.

HeaderConfig

Advanced configuration for dropzone header

Name	Type	Default	Description
style	React.CSSProperties		The in-line style object applied to the main container.
className	string		The classname to override the css styles in .css or .sass file instead of using in-line styles. Classname is applied to the main container.
resetStyles	boolean		If true, the given class name and style properties will replace the default ones instead of overriding them.
deleteFiles	boolean	true	If true, the delete icon will be shown.
cleanFiles	boolean	true	If true, the clean icon will be shown.
uploadFiles	boolean	true	If true, the upload icon will be shown.
uploadingIcon	boolean	true	If true, the upload in progress icon will be shown during the upload process.
maxFileSize	boolean	true	If true, the upload in progress icon will be shown during the upload process.
validFilesCount	boolean	true	If true, the current count of alid files will be shown.
customHeader	JSX.Element		A custom header to replace the default one. If given, the rest of the props are ignored

FooterConfig

Advanced configuration for dropzone footer

Name	Type	Default	Description
style	React.CSSProperties		The in-line style object applied to the main container.
className	string		The classname to override the css styles in .css or .sass file instead of using in-line styles. Classname is applied to the main container.
resetStyles	boolean		If true, the given class name and style properties will replace the default ones instead of overriding them.
allowedTypesLabel	boolean	true	If false, the label that indicates the allowed files types will not be shown.
uploadProgressMessage	boolean	true	If false, the label that indicates the current upload progress will not be shown.
uploadResultMessage	boolean	true	If false, the label that indicates the final result of the upload progress will not be shown.
noMissingFilesLabel	boolean	true	If false, the label that indicates that there are not files missing to upload will not be shown.
customMessage	JSX.Element		A custom message to display in the footer.
customFooter	JSX.Element		A custom header to replace the default one. If given, the rest of the props are ignored

ServerResponse

Convention for server response

Name	Type	Description
success	boolean	If true, it means that the request was successful.
message	string	A message that describes the result of the request.
payload	Object	The response of the server.

UPLOADSTATUS

export type UPLOADSTATUS = "preparing" | "aborted" | "uploading" | "success" | "error";

FilesUIConfig

Global configuration for Files UI components

export type FilesUIConfig = {
   // If true, dark mode colors are used in FileMosaic and FIleCard components.
  darkMode?: boolean;
 
   // Set of icons to override the existing ones
  icons?: IconsConfig;
   
   // The language in which text labels are shown.
  localization?: Localization;
}

IconsSet

Data type that keeps track of all keys of addmited mime types.

export type IconsSet = {
  aac?: string;
  accdb?: string;
  abw?: string;
  arc?: string;
  avi?: string;
  azw?: string;
  octet?: string;
  bmp?: string;
  bz?: string;
  bz2?: string;
  cda?: string;
  csh?: string;
  css?: string;
  csv?: string;
  docx?: string;
  drawio?: string;
  eot?: string;
  epub?: string;
  gzip?: string;
  gif?: string;
  html?: string;
  icalendar?: string;
  jar?: string;
  jpeg?: string;
  javascript?: string;
  json?: string;
  jsonld?: string;
  midi?: string;
  mp3?: string;
  mp4?: string;
  mpeg?: string;
  mpkg?: string;
  mp2t?: string;
  odp?: string;
  ods?: string;
  odt?: string;
  oga?: string;
  ogv?: string;
  ogx?: string;
  opus?: string;
  otf?: string;
  png?: string;
  pdf?: string;
  php?: string;
  pptx?: string;
  psd?: string;
  rar?: string;
  rtf?: string;
  sass?: string;
  sh?: string;
  swf?: string;
  tar?: string;
  tiff?: string;
  ttf?: string;
  typescript?: string;
  text?: string;
  vsd?: string;
  wav?: string;
  weba?: string;
  webm?: string;
  webp?: string;
  woff?: string;
  wma?: string;
  wmv?: string;
  xhtml?: string;
  xlsx?: string;
  xml?: string;
  xul?: string;
  zip?: string;
  sevenzip?: string;
  python?: string;
  java?: string;
  react?: string;
  vue?: string;
   //fallback when file type is not here
  fallBack?: string;
}