Single File Upload

After uploading a single file, the button is replaced with a display of the file that was selected.

const SingleFileUploadExample = () => {
    const [uploadFile, setUploadFile] = React.useState({})
    return (
        <FilePicker
            value={uploadFile.file}
            accept="image/* ,text/*, .csv, .xls, .xlsv"
            typesNote="Please provide file of type: any images, any text, .csv, .xls, .xlsv"
            onSelected={(files) => {
                setUploadFile({file: {file: files[0], downloadLink: '#'}});
            }}
            onDelete={(file) => {
                setUploadFile({file: undefined});
            }}
            onReplace = {({file, newFile}) => {
                setUploadFile({file: {file: newFile, downloadLink: '#'}});
            }}
            onDownload = {(file) => {
                console.log('download', file);
            }}
        />
    )
}
render (SingleFileUploadExample)

Multiple File Upload

A user could also upload multiple files, with a configurable upper limit. Users can also bulk select their files during the upload process. The upload button is removed when the user hits the configurable limit.

const MultipleFileUploadExample = () => {
    const [uploadFiles, setUploadFiles] = React.useState({files: []})
    return (
        <FilePicker
            multiple
            value={uploadFiles.files}
            accept="image/*, text/*, .csv, .xls, .xlsv"
            onSelected={(files) => {
                const existingFiles = uploadFiles.files
                Object.keys(files).map(
                    (item) => {
                        // add more checks here if you want more exact validation
                        existingFiles.push({file: files[item]})
                    }
                )
                setUploadFiles({files: existingFiles});
            }}
            onDelete={(file) => {
                const newFiles = uploadFiles.files.filter(value => value !== file);
                setUploadFiles({ files: newFiles });
            }}
            onReplace = {({file, newFile}) => {
                const files = uploadFiles.files;
                for (let i = 0; i < files.length; i++) {
                    if (files[i] === file) {
                    files[i] = {file: newFile};
                    }
                }
                setUploadFiles({ files: files });
            }}
            onDownload = {(file) => {
                console.log('download',file);
            }}
            limitReached={uploadFiles.files.length > 5}
        />
    )
}
render (MultipleFileUploadExample)

Allowed File Types

The File Picker can be configured to only accept certain types of files. For example, if the configuration only accepted spreadsheet-type files, a user would be unable to select an image file. Accepted formats are automatically described below the 'Choose File(s)' button.

Layouts

List View

Each file uploaded takes up the full width of the parent container.

const ListViewExample = () => {
    const [uploadFiles, setUploadFiles] = React.useState({files: [{ file: 'sample_file.csv' }, { file: 'sample_file2.png' }]})
    return (
        <FilePicker
            multiple
            value={uploadFiles.files}
            accept="image/*, text/*, .csv, .xls, .xlsv"
            onSelected={(files) => {
                const existingFiles = uploadFiles.files
                Object.keys(files).map(
                    (item) => {
                        // add more checks here if you want more exact validation
                        existingFiles.push({file: files[item]})
                    }
                )
                setUploadFiles({files: existingFiles});
            }}
            onDelete={(file) => {
                const newFiles = uploadFiles.files.filter(value => value !== file);
                setUploadFiles({ files: newFiles });
            }}
            onReplace = {({file, newFile}) => {
                const files = uploadFiles.files;
                for (let i = 0; i < files.length; i++) {
                    if (files[i] === file) {
                    files[i] = {file: newFile};
                    }
                }
                setUploadFiles({ files: files });
            }}
            onDownload = {(file) => {
                console.log('download',file);
            }}
            limitReached={uploadFiles.files.length > 5}
        />
    )
}
render (ListViewExample)

Grid View

The grid view is configured to three files per row, and is reduced to one on smaller displays.

const GridViewExample = () => {
    const [uploadFiles, setUploadFiles] = React.useState({files: [{ file: 'sample_file.csv' }, { file: 'sample_file2.png' }, { file: 'text.txt' }, { file: 'larger_file_name_123456_final.xlsv' }, { file: 'file.gif' }]})
    return (
        <FilePicker
            value={uploadFiles.files}
            layout='grid'
            multiple
            accept="image/*, text/*, .csv, .xls, .xlsv"
            onSelected={(files) => {
                const existingFiles = uploadFiles.files
                Object.keys(files).map(
                    (item) => {
                        // add more checks here if you want more exact validation
                        existingFiles.push({file: files[item]})
                    }
                )
                setUploadFiles({files: existingFiles});
            }}
            onDelete={(file) => {
                const newFiles = uploadFiles.files.filter(value => value !== file);
                setUploadFiles({ files: newFiles });
            }}
            onReplace = {({file, newFile}) => {
                const files = uploadFiles.files;
                for (let i = 0; i < files.length; i++) {
                    if (files[i] === file) {
                    files[i] = {file: newFile};
                    }
                }
                setUploadFiles({ files: files });
            }}
            onDownload = {(file) => {
                console.log('download',file);
            }}
            limitReached={uploadFiles.files.length > 5}
        />
    )
}
render (GridViewExample)

Alignment

The arrangement of the upload button and any files can be left or centered aligned. By default, it is left aligned. Centering can be useful for layouts that are already center aligned.

const AlignmentExample = () => {
    const [uploadFiles, setUploadFiles] = React.useState({files: [{ file: 'sample_file.csv' }, { file: 'sample_file2.png' }, { file: 'text.txt' }, { file: 'larger_file_name_123456_final.xlsv' }, { file: 'file.gif' }]})
    return (
        <FilePicker
            value={uploadFiles.files}
            align='center'
            layout='grid'
            multiple
            accept="image/*, text/*, .csv, .xls, .xlsv"
            onSelected={(files) => {
                const existingFiles = uploadFiles.files
                Object.keys(files).map(
                    (item) => {
                        // add more checks here if you want more exact validation
                        existingFiles.push({file: files[item]})
                    }
                )
                setUploadFiles({files: existingFiles});
            }}
            onDelete={(file) => {
                const newFiles = uploadFiles.files.filter(value => value !== file);
                setUploadFiles({ files: newFiles });
            }}
            onReplace = {({file, newFile}) => {
                const files = uploadFiles.files;
                for (let i = 0; i < files.length; i++) {
                    if (files[i] === file) {
                    files[i] = {file: newFile};
                    }
                }
                setUploadFiles({ files: files });
            }}
            onDownload = {(file) => {
                console.log('download',file);
            }}
            limitReached={uploadFiles.files.length > 5}
        />

    )
}
render (AlignmentExample)

Importing

import { FilePicker } from '@servicetitan/design-system';