Confirmation Dialog before Uploading file using FileUpload

UI Components for React
Post Reply
akotwale
Posts: 2
Joined: 05 Sep 2019, 22:34

05 Sep 2019, 22:42

Hi Members,

I am implementing File upload functionality and wanted to show the confirmation dialog box before sending the file to server.
I successfully invoked my dialog from "onBeforeSend" callback method of "FileUpload" component but I want to send/abort file based on the user action on confirmation dialog(confirm/reject).
The callback method does not wait for the user input and sends the file to the server. Can anyone please suggest me how should I implement it ? Thanks in advance.

aragorn
Posts: 3718
Joined: 29 Jun 2013, 12:38

09 Sep 2019, 16:13

Hi,

I added customUpload and uploadHandler properties to FileUpload on 3.2.0. You can use them.

Exp;

Code: Select all

export class FileUploadDemo extends Component {
        
    constructor() {
        super();
        this.state = {
            visible: false
        }
        this.onUpload = this.onUpload.bind(this);
        this.uploadHandler = this.uploadHandler.bind(this);
        this.onSend = this.onSend.bind(this);
        this.onHide = this.onHide.bind(this);
        
    }

    onUpload(event) {
        this.growl.show({severity: 'info', summary: 'Success', detail: 'File Uploaded'});
    }

    uploadHandler(event) {
        if (this.send) {
            let xhr = new XMLHttpRequest();
            let formData = new FormData();
            
            for (let file of event.files) {
                formData.append(this.fileupload.props.name, file, file.name);
            }

            xhr.upload.addEventListener('progress', (event) => {
                if (event.lengthComputable) {
                    this.setState({progress: Math.round((event.loaded * 100) / event.total)});
                }
            });

            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    this.fileupload.clear();
                }
            };
            
            xhr.open('POST', this.fileupload.props.url, true);
            
            xhr.withCredentials = this.fileupload.props.withCredentials;
            
            xhr.send(formData);

            this.setState({visible: false});
        }
        else {
            this.setState({visible: true});
        }

        this.send = false;
    }

    onSend() {
        this.send = true;
        this.setState({visible: false});
        this.fileupload.upload();
    }

    onHide() {
        this.send = false;
        this.setState({visible: false});
    }

    render() {
        const footer = (
            <div>
                <Button label="Yes" icon="pi pi-check" onClick={this.onSend} />
                <Button label="No" icon="pi pi-times" onClick={this.onHide} className="p-button-secondary"/>
            </div>
        );
        
        return (
            <div>
                <div className="content-section introduction">
                    <div className="feature-intro">
                        <h1>FileUpload</h1>
                        <p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
                    </div>
                </div>

                <div className="content-section implementation">
                    <h3>Advanced</h3>
                    <FileUpload ref={(el) => this.fileupload = el} name="demo[]" url="./upload.php" onUpload={this.onUpload} 
                                multiple={true} customUpload={true} uploadHandler={this.uploadHandler} />

                    <Dialog header="Confirmation" visible={this.state.visible} style={{width: '50vw'}} footer={footer} onHide={this.onHide} maximizable>
                        <p>Are you sure?</p>
                    </Dialog>

                    <Growl ref={(el) => { this.growl = el; }}></Growl>
                </div>
                
                <FileUploadDoc></FileUploadDoc>
            </div>
        )
    }
}
Best Regards,

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests