Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to call axios on submit button in react-dropzone?

How can I call the axios when the user clicks the submit button?

Unable to add an onclick event handler on the submit button, where shall I declare the onClick event function which calls axios or accepts acceptedFiles variable in this code.

useCallback is called when the user drops files, and files get automatically uploaded when the user drops the files. I want files to be uploaded when the user clicks submit button.

import React, {useCallback, Component} from 'react';
import {useDropzone} from 'react-dropzone';
import axios from 'axios';


function Basic(props) {

const onDrop = useCallback(acceptedFiles => {
    let formData = new FormData();

    for (var i = 0; i < acceptedFiles.length; i++) {
        let file = acceptedFiles[i];
        formData.append('articleFiles[]', file);
    }  

    axios({
      method: 'post',

      data: formData,
      )}


}, [])
const {acceptedFiles, getRootProps, getInputProps} = useDropzone({onDrop});


const files = acceptedFiles.map(file => (
    <li key={file.path}>
        {file.path}
        - {file.size}
        bytes
    </li>
));



return (
    <section className="container">
        <div {...getRootProps({className: 'dropzone'})}>
            <input {...getInputProps()}/>
            <p>Drag 'n' drop some files here, or click to select files</p>
        </div>
        {files.length > 0 && <React.Fragment>
            <div>
                <h4>Files</h4>
                <ul>{files}</ul>
            </div>
            <button>Submit</button> //<---
        </React.Fragment>}

    </section>
);
}

 export class UploadManuscript extends Component {

render() {


    return (<Basic/>)
}
}

export default UploadManuscript
like image 600
Amiya Behera Avatar asked Oct 27 '22 11:10

Amiya Behera


1 Answers

I have done it:

import React, {Component} from 'react';
import {useDropzone} from 'react-dropzone';
import axios from 'axios'

function Basic(props) {

    const uploadFiles = () => {
        let formData = new FormData();

        for (var i = 0; i < acceptedFiles.length; i++) {
            let file = acceptedFiles[i];
            formData.append('articleFiles[]', file);
        }
       
       
        axios({
            method: 'post',
            
            data: formData,

            })
            

    }
    const {acceptedFiles, getRootProps, getInputProps} = useDropzone();

    console.log(props.id)

    const files = acceptedFiles.map(file => (
        <li key={file.path}>
            {file.path}
            - {file.size}
            bytes
        </li>
    ));

   

    return (
        <section className="container">
            <div {...getRootProps({className: 'dropzone'})}>
                <input {...getInputProps()}/>
                <p>Drag 'n' drop some files here, or click to select files</p>
            </div>
            {files.length > 0 && <React.Fragment>
                <div>
                    <h4>Files</h4>
                    <ul>{files}</ul>
                </div>
                <button onClick={uploadFiles}>Submit</button>
            </React.Fragment>}

        </section>
    );
}

export class UploadManuscript extends Component {

    render() {
      

        return (<Basic/>)
    }
}

export default UploadManuscript
like image 200
Amiya Behera Avatar answered Nov 15 '22 12:11

Amiya Behera