@drayman/elements
Options
All
  • Public
  • Public/Protected
  • All
Menu

<drayman-file-uploader />

File uploader powered by FilePond library.

Example of usage

 

export const component: DraymanComponent = async ({ forceUpdate }) => {
    let file;

    return () => (
        <div>
            <drayman-file-uploader
                onUpload={async (_, [uploadedFile]) => {
                    file = uploadedFile;
                    await forceUpdate();
                    return '123';
                }}
            />
            {file && <img src={`data:${file.mimetype};base64,${file.buffer.toString('base64')}`} style={{ width: '200px;' }} />}
        </div>
    )
}

Hierarchy

Index

Properties

Properties

Optional allowMultiple

allowMultiple: boolean

Wether multiple file upload is allowed or not.

Optional initialFiles

initialFiles: { downloadUrl: string; fileName: string; id: string; length: number }[]

Array of files to show when uploader element appears.

Optional onRemoveUploaded

onRemoveUploaded: (data: { fileId: string }) => Promise<string>

Executed when user wants to remove a file. Receives unique file ID fileId. This function is usually used to remove a specific file from file system.

Type declaration

    • (data: { fileId: string }): Promise<string>

    • Parameters

      • data: { fileId: string }
        • fileId: string

      Returns Promise<string>

Optional onUpload

onUpload: (data: undefined, files: File[]) => Promise<string>

Executed when file is uploaded. This function contains uploaded file as the first element of files array and must return a unique file ID. This unique ID is then can be used to revert uploads.

Type declaration

    • (data: undefined, files: File[]): Promise<string>

    • Parameters

      • data: undefined
      • files: File[]

      Returns Promise<string>

Optional ref

ref: string

Optional style

style: CSS