Файл ввода не хранит информацию о файле, только имя - PullRequest
Новая
       5

Файл ввода не хранит информацию о файле, только имя

0 голосов
/ 26 апреля 2019

Я использую redux-form@8.1.0 и redux@4.0.1 и сохраняю данные в коллекции MongoDB.Однако, когда я наблюдаю за файловым объектом, который я загрузил в коллекцию моих БД Mongo, он просто получает имя файла.

FileInput.js - это компонент, который я передаю в компонент redux-form Field

FileInput.js 

import React from 'react';

const handleChange = (handler) => ({target: {files}}) =>
  handler(files.length ? {file: files[0], name: files[0].name} : {});

export default ({
  input: {onChange, onBlur, value: omitValue, ...inputProps},
  meta: omitMeta,
  ...props
}) => (
  <input type="file"
    onChange={handleChange(onChange)} onBlur={handleChange(onBlur)}
    {...inputProps} {...props} />
);

И вот как я использую его в своей форме 

...
import FileInput from './FileInput';
...
<Field name="fileUploaded" component={FileInput} type="file" 
  />

И это документ из коллекции MongoDB 

{...
"fileUploaded":{"name":"testingfile.png"},
...}

Кажется, он хранит только имя файла, и я ожидаю, что другая пара значений ключа с информацией / объектом файла будет загружена и отображать это изображение / файл позже.

1 Ответ

0 голосов
/ 26 апреля 2019

Redux-Form хранит файл, возможно, вам нужно прочитать его и затем отправить как multipart/form-data. Данные должны быть доступны на state.form.myFormNameHere.values.mFieldNameHere.

Я создал компонент ImageDisplay, который может помочь. Он читает файл из файла ввода в красной форме и отображает предварительный просмотр. 

const ImageReader = ({ file }) => {
    const reader = new FileReader();
    const [imageUrl, setImageUrl] = useState('');
    if (file && file.file instanceof Blob) {
        reader.onload = (event) => {
            const { target: { result } } = event;
            setImageUrl(result);
        };
        reader.readAsDataURL(file.file);
        return <Image src={imageUrl} />;
    }
    return <Image src={null} />;
};

ImageReader.defaultProps = {
    file: null,
};

ImageReader.propTypes = {
    file: PropTypes.shape({
        name: PropTypes.string,
        file: PropTypes.any,
    }),
};
...