@dnb/eufemia/components/upload/UploadDocs.js

DNB Eufemia Design System UI Library

export const UploadProperties = {
  id: {
    doc: 'Unique id used together with the `useUpload` hook to manage the files. Needed when wanting to connect with the `useUpload` hook.',
    type: ['string', 'function', 'object', 'React.Context'],
    status: 'optional'
  },
  children: {
    doc: 'Content to display below the `title` and `text`. Can be used to add custom content.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  variant: {
    doc: 'Defines the appearance. Use one of these: `default` or `compact`. Defaults to `default`.',
    type: ['"default"', '"compact"'],
    status: 'optional'
  },
  acceptedFileTypes: {
    doc: 'List of accepted file types. Either as string or [AcceptedFileType](/uilib/components/upload/properties/#acceptedfiletype). When providing a list of [AcceptedFileType](/uilib/components/upload/properties/#acceptedfiletype), the accepted file types will be presented in a table(see [example](/uilib/components/upload/demos/#upload-with-file-max-size-based-on-file-type)).',
    type: ['Array<string>', 'Array<AcceptedFileType>'],
    status: 'required'
  },
  filesAmountLimit: {
    doc: 'Defines the amount of files the user can select and upload. Defaults to `100`.',
    type: 'number',
    status: 'optional'
  },
  fileMaxSize: {
    doc: 'Defines the max file size of each file in MB. Use either `0` or `false` to disable. Defaults to 5 MB.',
    type: ['number', 'false'],
    status: 'optional'
  },
  title: {
    doc: 'Custom text property. Replaces the default title. Can be disabled using `false`.',
    type: 'string',
    status: 'optional'
  },
  text: {
    doc: 'Custom text property. Replaces the default text. Can be disabled using `false`.',
    type: 'string',
    status: 'optional'
  },
  download: {
    doc: 'Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window. Defaults to `false`.',
    type: 'boolean',
    status: 'optional'
  },
  allowDuplicates: {
    doc: 'Allows uploading of duplicate files. Defaults to `false`.',
    type: 'boolean',
    status: 'optional'
  },
  disableDragAndDrop: {
    doc: 'Disables file drag and drop, by removing the drop zone. Defaults to `false`.',
    type: 'boolean',
    status: 'optional'
  },
  buttonProps: {
    doc: 'Define any valid Eufemia [Button properties](/uilib/components/button/properties) or HTML attribute inside an object, to customize the upload button behavior and appearance.',
    type: 'ButtonProps',
    status: 'optional'
  },
  skeleton: {
    doc: 'Skeleton should be applied when loading content.',
    type: 'boolean',
    status: 'optional'
  },
  buttonText: {
    doc: 'Custom text for the upload button. Overrides the default translation.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  fileTypeTableCaption: {
    doc: 'Custom caption for the file type table used by screen readers. Overrides the default translation.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  fileTypeDescription: {
    doc: 'Custom label for the file type description column. Overrides the default translation.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  fileSizeDescription: {
    doc: 'Custom label for the file size description column. Overrides the default translation.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  fileAmountDescription: {
    doc: 'Custom text for the file amount description. Overrides the default translation.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  fileSizeContent: {
    doc: 'Custom text for the file size content. Overrides the default translation.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  errorLargeFile: {
    doc: 'Custom error message for files exceeding the size limit. Overrides the default translation.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  errorUnsupportedFile: {
    doc: 'Custom error message for unsupported file types. Overrides the default translation.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  errorAmountLimit: {
    doc: 'Custom error message when the file amount limit is reached. Overrides the default translation.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  loadingText: {
    doc: 'Custom text displayed during file loading. Overrides the default translation.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  deleteButton: {
    doc: 'Custom text for the delete button. Overrides the default translation.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  listAriaLabel: {
    doc: 'Custom `aria-label` for the file list. Overrides the default translation.',
    type: 'string',
    status: 'optional'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
export const AcceptedFileTypeProperties = {
  fileType: {
    doc: 'The name of the accepted file type.',
    type: 'string',
    status: 'required'
  },
  fileMaxSize: {
    doc: 'Defines the max file size of the given file type in MB. Use either `0` or `false` to disable. If not provided, it defaults to the value of [Uploads](/uilib/components/upload/properties/#properties) `fileMaxSize` which defaults to 5 MB.',
    type: ['number', 'false'],
    status: 'optional'
  }
};
export const UploadEvents = {
  onChange: {
    doc: 'Will be called on `files` changes made by the user. Access the files with `{ files }` (containing each a `fileItem`).',
    type: 'function',
    status: 'optional'
  },
  onFileDelete: {
    doc: 'Will be called once a file gets deleted by the user. Access the deleted file with `{ fileItem }`.',
    type: 'function',
    status: 'optional'
  },
  onFileClick: {
    doc: 'Will be called once a file gets clicked on by the user. Access the clicked file with `{ fileItem }`. When providing this property, the file will be rendered as a button instead of an anchor or plain text.',
    type: 'function',
    status: 'optional'
  }
};
export const FileItemProperties = {
  file: {
    doc: 'The file object. This is the same object as the one returned by the `File` API.',
    type: 'File',
    status: 'required'
  },
  id: {
    doc: 'Unique ID for the file item. This ID is generated by the component and is not user-defined.',
    type: 'string',
    status: 'required'
  },
  exists: {
    doc: 'Indicates if the file item already exists in the list of files. This is useful for distinguishing between new and existing files.',
    type: 'boolean',
    status: 'optional'
  },
  isLoading: {
    doc: 'Indicates if the file item is currently being loaded. This is useful for showing a loading state while the file is being processed.',
    type: 'boolean',
    status: 'optional'
  },
  errorMessage: {
    doc: 'Provide an error message to be displayed. This is useful for indicating issues with the file upload process.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  description: {
    doc: 'Provide a description to be displayed. This is useful for providing additional information about the file.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  removeDeleteButton: {
    doc: 'Set to `true` to remove the delete button from the file item. This is useful for preventing users from deleting files.',
    type: 'boolean',
    status: 'optional'
  },
  deleteButtonProps: {
    doc: 'Define any valid Eufemia [Button properties](/uilib/components/button/properties) or HTML attribute inside an object.',
    type: 'ButtonProps',
    status: 'optional'
  },
  removeLink: {
    doc: 'Set to `true` to remove the link for the file item. This is useful for preventing users from opening the file.',
    type: 'boolean',
    status: 'optional'
  }
};
//# sourceMappingURL=UploadDocs.js.map