Блог

Первый раз с 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?

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

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

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

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

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

Вторая проблема: в моем случае я загружаю по одному файлу за раз (multiple = {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' amp;amp; 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.

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

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

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

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

Вместо:

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

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

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