Question

176

Ant Design Upload get file content

rated 0 times [ 180] [ 4] / answers: 1 / hits: 35090 / 5 Years ago, tue, march 19, 2019, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

amari

Add To Favorites

Follow

Total Points: 736

Total Questions: 111

Total Answers: 90

Location: Saint Pierre and Miquelon

Member since Fri, Jan 28, 2022

2 Years ago

amari questions

1 Do SubmitEvents made by a 'submit' event contain the form values?

Mon, May 23, 22, 00:00, 2 Years ago

1 ERR_UNHANDLED_REJECTION UnhandledPromiseRejection when awaited inside an array of promise Objects

Mon, Jun 21, 21, 00:00, 3 Years ago

1 Dropdown with Search Box using Bootstrap Selectpicker not working

Thu, Jun 3, 21, 00:00, 3 Years ago

1 Redux-Toolkit: How to reject a createAsyncThunk?

Sat, May 15, 21, 00:00, 3 Years ago

1 Webpack, optimization chunking gives Conflict: Multiple chunks emit assets to the same filename error

Wed, Mar 3, 21, 00:00, 3 Years ago

View All

answered 5 Years ago alanisannettep · Accepted Answer

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>;