React-Admin |无法使用FileInput上传文件

Question

第一次使用React-Admin。我用它来创建一个面板，它基本上监视我从API获得的一些参数。但是，一个部分需要上载.csv文件。我试图用FileInput实现它，但我无法捕获该文件。我不明白该怎么做。

文件选择步骤（从pc到浏览器）工作正常，但我的问题是我无法在该步骤后处理该文件。我阅读了文档，但我不知道该怎么做。我尝试了很多不同的方法，但我变得疯狂。

以下是基本代码。我想我必须添加一个处理程序或类似的东西但是，怎么样？我对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文件？

提前致谢！

Answer 1

你检查过文档中的DataProvider和UploadFeature部分吗？如果您有自己的DataProvider，则可以创建一个新文件addUploadFeature.js并按照此链接下的示例进行自定义：

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

Answer 2

经过几个小时的工作后，我开始工作了。

第一个问题（我评论@selens的答案）：我得到了Uncaught TypeError: _this.props.save is not a function，因为我没有在创建或编辑视图中工作。您似乎需要在“创建”或“编辑视图”中使用FileInput。如果没有，保存按钮将不起作用。

来自docs：

save：提交表单时调用的函数。当在创建和编辑组件中使用表单组件时，这将由react-admin自动传递。

第二个问题：在我的情况下，我一次上传一个文件（在FileInput中多个= {false}）。但是，代码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格式将文件发送到服务器。

希望这对将来的某些人有用;）

Answer 3

我有类似的问题，我无法上传文件，问题将在accept道具。

您可以使用以下代码：

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

代替：

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