How to send file from react-dropzone to other api

Question

I need to send a file from react-dropzone to a variable in a .js file. I wrote this code for dropzone:

const baseStyle = {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '20px',
    borderWidth: 2,
    borderRadius: 2,
    borderColor: '#eeeeee',
    borderStyle: 'dashed',
    backgroundColor: '#fafafa',
    color: '#bdbdbd',
    outline: 'none',
    transition: 'border .24s ease-in-out'
  };
  
  const activeStyle = {
    borderColor: '#2196f3'
  };
  
  const acceptStyle = {
    borderColor: '#00e676'
  };
  
  const rejectStyle = {
    borderColor: '#ff1744'
  };

const maxSize = 5000000 // bytes
const acceptedFileTypes = '.csv, text/csv, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values'

const TFApartCsvInput = (props) => {
    const [files, setFiles] = useState([]);
    const {
        getRootProps,
        getInputProps,
        isDragActive,
        isDragAccept,
        isDragReject,
        acceptedFiles,
      } = useDropzone({
        accept: acceptedFileTypes,
        multiple: false,
        minSize: 0,
        maxSize: maxSize,
          onDrop: (acceptedFiles, rejectedFiles) => {
            console.log('Accepted files:', acceptedFiles);
            console.log('Rejected files:', rejectedFiles);
        },
        onDropAccepted: props.onCSVUpload,
        onDropRejected: props.CSVTooBig
    });
    
      const style = useMemo(() => ({
        ...baseStyle,
        ...(isDragActive ? activeStyle : {}),
        ...(isDragAccept ? acceptStyle : {}),
        ...(isDragReject ? rejectStyle : {})
      }), [
        isDragActive,
        isDragReject,
        isDragAccept
      ]);

      //ACCEPTED
      const acceptedFileItems = acceptedFiles.map(file => (
        <li key={file.path}>
          {file.path}
        </li>
      ));


      // RETURN
      return (
        <div className="container">
          <div {...getRootProps({style})}>
            <input {...getInputProps()} />
            <p>Drag 'n' drop some files here, or click to select files</p>
            <aside>
                <h4>Drag 'n' drop here .CSV files</h4>
                <ul>{acceptedFileItems}</ul>
            </aside>
          </div>
        </div>
      );
}

export default TFApartCsvInput;

and i have my import.js file which have a variable like this one:

let app_stream = fs.createReadStream("app.csv");
let csvData_app = [];
let csvData = []; 
//other code

I wanna insert the file that the user drop in dropzone inside my app_stream variable of import.js . I can see from console that file is taken but I can't undestand how to manage it. Sorry if it sounds stupid, this is my first react project.

Answer 1

Your import.js will need to export a class or function , which will need to be import ed from your Dropzoned component:

import.js

export default function (filename) {
  // `fs` is a NodeJS library not suited for browsers. Are you sure?
  let app_stream = fs.createReadStream(filename);
  let csvData_app = [];
  let csvData = []; 
  //other code
}

dropzoned.jsx

import Importer from './import.js'
// ...
   onDropAccepted: (...args) => {
     Importer(args); // I don't know what `args` contains
     props.onCSVUpload(...args);
   },
// ...