-
-
Notifications
You must be signed in to change notification settings - Fork 5.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Import CSV #3809
Comments
Hello @Odonno and thanks for offering the feature. Is it possible to see the solution/component you've been working on? |
Of course. Here is my solution, and some thoughts:
import React from 'react';
import Button from '@material-ui/core/Button';
import GetAppIcon from '@material-ui/icons/GetApp';
import { connect } from 'react-redux';
import { parse as convertFromCSV } from 'papaparse';
import { crudUpdateMany } from 'ra-core';
const ImportButton = (props: any) => {
const { resource, dispatch, basePath } = props;
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files && e.target.files[0];
if (file) {
convertFromCSV(file, {
delimiter: ',',
complete: (result) => {
const { data } = result;
const keys: string[] = data[0];
const primaryKey = keys[0];
const values = data.slice(1).map(row => {
const value: any = {};
keys.forEach((key, index) => {
value[key] = row[index];
});
return value;
});
const ids = values.map(v => v[primaryKey]);
dispatch(
crudUpdateMany(resource, ids, values, basePath)
);
}
});
}
};
return (
<>
<input
type="file"
id="text-button-file"
style={{ display: 'none' }}
accept='.csv'
onChange={handleChange}
/>
<label htmlFor="text-button-file" style={{ display: 'inline-flex', alignItems: 'center' }}>
<Button
color="primary"
component="span"
>
<GetAppIcon style={{ transform: 'rotate(180deg)', fontSize: 20 }} />
<span style={{ paddingLeft: '0.5em' }}>Import</span>
</Button>
</label>
</>
);
};
export default connect()(ImportButton); |
Would you mind creating an addon package for it ? |
Hey Guys, Still hard to do, so I implemented the solution from @Odonno into an npm package ( https://github.com/benwinding/react-admin-import-csv Cheeers, |
Well, since we are now lockdown, I would have like to take a look next week to integrate the Import button. But it seems you were faster than me. I also intensified the test of this feature in the previous weeks and I found some issues. I can do some code reviews/PRs in your repository if you like. |
@benwinding Would you mind opening a PR on the docs to add a link to your package in the Ecosystem section? |
Is your feature request related to a problem? Please describe.
We already have an Export button in CSV format but we don't have an Import button to save/update entities from another source (like importing data from a different environment).
Describe the solution you'd like
An Import button which can be added side-by-side with the Export button.
Additional context
I have already written a solution/component by myself. I can make a PR for that feature.
The text was updated successfully, but these errors were encountered: