Блог

Главная - Вопросы по программированию - Как отправить файл из react-dropzone в другой api

Как отправить файл из react-dropzone в другой api

#javascript #node.js #react-native #react-redux

#javascript #node.js #react-native #react-redux

Вопрос:

Мне нужно отправить файл из react-dropzone в переменную в файле .js. Я написал этот код для 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;

и у меня есть import.js файл, в котором есть переменная, подобная этой:

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

Я хочу вставить файл, который пользователь отправляет в dropzone, в мою переменную app_stream import.js . Я вижу из консоли, что файл взят, но я не могу понять, как им управлять. Извините, если это звучит глупо, это мой первый проект react.

Ответ №1:

Вам import.js понадобится export class или function , который нужно будет import отредактировать из вашего компонента Dropzoned:

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);
   },
// ...

Комментарии:

1. Хорошо, я попробую это. Reguarding fs — это библиотека NodeJS, не подходящая для браузеров. Вы уверены?» Нет, я только что разработал сначала import.js чтобы работать в локальном режиме, и теперь мне это нужно для работы с браузерами, что бы вы предложили?

2. Для доступа к содержимому файла вам понадобится встроенный в браузер API, например FileReader .

3. @NoProg Если ответ был полезен, пожалуйста, отметьте как правильный и проголосуйте.