Submit Button

[nanandn]

What's the purpose of submit button. In examples, the submit button is enabled after the upload is complete.

In my case, I want to keep adding files and upload the files when Submit button is clicked. But the default submit button is disabled. How can I programatically upload files when submit button is clicked.

[coodyme]

I dont know, i realy want to know what's the purpose of submit button...

[frankchau93]

Is it possible to make it so that once all files are queue'd, pressing the submit button uploads all of them at once?

[salientknight]

submitButtonContent={null} SubmitButtonComponent={null} When passed to DropZone make the submit button go away. I believe this button is for when your entire form is just the file upload.

It also triggesr the handleSubmit function that cleans up the items in the drop zone...

[artymldev]

I also thought that the submit button was to trigger upload when the user had chosen files. It's very confusinbg.

I too would like files queued until the user clicks submit.

[nanandn]

@artymldev I used a custom "SubmitButton" component with Label Upload. set "autoUpload" props to false and in onSubmit handler, call "file.restart()" on every file that are is in "ready" state.

[artymldev]

I ended up doing pretty much that. Thanks!

[atewari25]

@nanandn Can you share your code, I really want to enable this in my code, been stuck with this. Thanks

[atewari25]

@artymldev Can you share your code, will be of great help, Thanks

[nanandn]

@atewari25 Something like this....

Custom submit button

const SubmitButton = (props) => {
    const { files, onSubmit } = props;

    const handleClick = React.useCallback(() => {
        if (typeof onSubmit !== "function") {
            return;
        }

        onSubmit(files.filter((f) => f.meta.status === Status.READY));
    }, [files, onSubmit]);

  return (
        <button
            type="button"
            tabIndex={0}            
            disabled={props.disabled}
            onClick={handleClick}
        >
            Upload
        </button>
    );
};

Uploader component

handleUpload = async (files) => {
        files.forEach((file) => file.restart());        
    };

<Dropzone
                    {...otherProps}
                    autoUpload={false}
                    SubmitButtonComponent={SubmitButton}
                    onSubmit={this.handleUpload}
                />