React-Admin | Невозможно загрузить файл с помощью FileInput

Впервые с React-Admin. Я использую его для создания панели, которая в основном отслеживает некоторые параметры, которые я получаю от API. Однако для одного раздела необходимо загрузить файл .csv. Я пытаюсь реализовать это с помощью FileInput, но не могу поймать файл. Я не понимаю, как это сделать.

Шаг выбора файла (с компьютера на браузер) работает правильно, но моя проблема в том, что я не могу обработать файл после этого шага. Я читал документацию, но не знаю, как это сделать. Я пробовал много разных способов, но схожу с ума.

Ниже приведен базовый код. Думаю, мне нужно добавить обработчик или что-то подобное, но как? У меня тоже мало опыта работы с React. Я знаю основы, но я только что создал пару (супер) простых приложений. Просто для обучения.

// UploadFile.js
...

export const UploadSection = props => (
    <SimpleForm>
        <FileInput source="csvFile" label="Upload file (.csv)" accept="text/csv" >
            <FileField source="src" title="title" />
        </FileInput>
    </SimpleForm>
);


// App.js
...

const App = () => (
    <Admin dataProvider={dataProvider} authProvider={authProvider} >
        ...
        <Resource name="uploadSection" list={UploadSection} />
        ...
    </Admin>
);

Вопрос:

  1. Как мне поймать файл .csv?

Заранее спасибо!


react-admin admin-on-rest
person oz19    schedule 20.03.2019    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Поработав над ним в течение нескольких часов, он заработал.

Первая проблема (я прокомментировал ответ @selens): я получил Uncaught TypeError: _this.props.save is not a function, потому что я не работал в режиме создания или редактирования. Кажется, вам нужно использовать FileInput в Create или Edit Views. В противном случае кнопка «Сохранить» не будет работать.

Из документов:

save: функция, вызываемая при отправке формы. Это передается автоматически с помощью response-admin, когда компонент формы используется внутри компонентов Create и Edit.

Вторая проблема: в моем случае я загружаю по одному файлу за раз (несколько = {false} в FileInput). Однако код addUploadFeature.js готов к использованию с несколькими файлами. Итак, Я отредактировал часть addUploadFeature.js, чтобы загрузить только один файл. См. Полный файл ниже.

// addUploadFeature.js

const convertFileToBase64 = file => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.readAsDataURL(file.rawFile);

  reader.onload = () => resolve(reader.result);
  reader.onerror = reject;
});

const addUploadFeature = requestHandler => (type, resource, params) => {

  if (type === 'UPDATE' && resource === 'myResource') {
  
      if (params.data.myFile) {

          // NEW CODE HERE (to upload just one file):
          const myFile = params.data.myFile;
          if ( !myFile.rawFile instanceof File ){
              return Promise.reject('Error: Not a file...'); // Didn't test this...
          }

          return Promise.resolve( convertFileToBase64(myFile) )
              .then( (picture64) => ({
                  src: picture64,
                  title: `${myFile.title}`
              }))
              .then( transformedMyFile => requestHandler(type, resource, {
                  ...params,
                  data: {
                      ...params.data,
                      myFile: transformedMyFile
                  }
              }));
      }
  }
  return requestHandler(type, resource, params);
};

export default addUploadFeature;

В конце концов, я смог отправить файл на сервер в формате Base64.

Надеюсь, это пригодится кому-нибудь в будущем;)

person oz19    schedule 22.03.2019

arrow_upward
1
arrow_downward

У меня аналогичная проблема, я не могу загрузить файл, проблема будет в accept prop.

Вы можете использовать следующий код:

<FileInput source="csvFile" label="Upload file (.csv)" accept=".csv" >

Вместо того:

<FileInput source="csvFile" label="Upload file (.csv)" accept="text/csv" >
person Orest Borovets    schedule 19.07.2019

arrow_upward
0
arrow_downward

Вы проверили разделы DataProvider и UploadFeature в документации? Если у вас есть собственный DataProvider, вы можете создать новый файл addUploadFeature.js и настроить его, как в примере по этой ссылке:

https://marmelab.com/react-admin/DataProviders.html#exnding-a-data-provider-example-of-file-upload.

person selens    schedule 22.03.2019
comment
Да, но когда я пытаюсь реализовать addUploadFeature.js, я получаю следующую ошибку, когда нажимаю кнопку «Сохранить»: Uncaught TypeError: _this.props.save is not a function. Любая идея? Спасибо за ответ, selens. - person oz19; 22.03.2019