More built-in components to choose from

[kylebebak]

RDU allows for component injection via the InputComponent, PreviewComponent, and SubmitButtonComponent props.

File uploaders share the same core functionality, but there are many different ways they can look and behave. It would be great to give users many polished options to pick from to build their uploaders.

The preview component especially can be complex to override, and users ought to have more built-in options than just the default preview component, which is minimalistic and avoids strong stylistic preferences.

Extra components could be bundled in a new directory inside dist that gets uploaded to npm. That way users have access to them but their app's bundle size is unchanged if they don't use them.

[zarandonlautaro]

Just do it for yourself!

        const Layout = ({ input, previews, dropzoneProps, files, extra: { maxFiles }, submitButton }) => {
            return (
                <div>
                    {previews}

                    <div {...dropzoneProps}>
                        {files.length < maxFiles && input}
                    </div>

                    {files.length > 0 && submitButton}
                </div>
            )
        }

    const MyInput = ({ accept, onFiles, files }) => {
        const text = files.length > 0 ? 'Add more files' : 'Drag or drop your files'

        return (
            <label style={{ backgroundColor: '', opacity: 0.5, color: '#000', cursor: 'pointer', padding: 50, borderRadius: 3 }}>
                {text}
                <input
                    style={{ display: 'none' }}
                    type="file"
                    accept={accept}
                    multiple
                    onChange={e => { onFiles(Array.prototype.slice.call(e.target.files)) }}
                />
            </label>
        )
    }

        const Preview = ({ meta }) => {
            console.log({ meta })
            const { name, percent, status } = meta
            return (
                <span style={{ alignSelf: 'flex-start', margin: '10px 3%', fontFamily: 'Helvetica' }}>
                    {name}, {Math.round(percent)}%, {status}
                </span>
            )
        }

                     <Dropzone
                            accept="*"
                            autoUpload={false}
                            getUploadParams={this.getUploadParams}
                            onChangeStatus={this.handleChangeStatus}
                            onSubmit={this.handleSubmit}
                            LayoutComponent={Layout}
                            InputComponent={MyInput}
                            PreviewComponent={Preview}
                        />