I am using the Ant Design Upload component. Is there a way I can get the content of the selected file as a string in JavaScript in order to display it on the page?
Ideally, I would like to access file.data
or something.
<Upload
accept=".txt, .csv"
showUploadList={false}
beforeUpload={(file, fileList) => {
// Access file content here and do something with it
console.log(file);
// Prevent upload
return false;
}}
>
<Button>
<Icon type="upload" /> Click to Upload
</Button>
</Upload>
Heavily inspired by this answer from Shreyans Shrivastav but modified to better suit what has been asked. You can use a FileReader
to read the content of the file:
<Upload
accept=".txt, .csv"
showUploadList={false}
beforeUpload={file => {
const reader = new FileReader();
reader.onload = e => {
console.log(e.target.result);
};
reader.readAsText(file);
// Prevent upload
return false;
}}
>
<Button>
<Icon type="upload" /> Click to Upload
</Button>
</Upload>;
const { Upload, message, Button, Icon, } = antd;
const props = {
name: 'file',
action: '//jsonplaceholder.typicode.com/posts/',
headers: {
authorization: 'authorization-text',
},
onChange(info) {
if (info.file.status !== 'uploading') {
let reader = new FileReader();
reader.onload = (e) => {
console.log(e.target.result);
}
reader.readAsText(info.file.originFileObj);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
ReactDOM.render(
<Upload {...props}>
<Button>
<Icon type="upload" /> Click to Upload
</Button>
</Upload>,
mountNode
);
Please check CodePen
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With