VueJS FileReader

Question

I'm trying to use ExcelJS in Vue and I need FileReader to read and parse the files but I'm getting errors. How do I use FileReader with VueJS?

Input Form

    <input type="file" 
        id="importProductionSchedule" 
        name="importProductionSchedule" 
        @change="checkFile($event)" 
        ref="importProductionSchedule"
    >

checkFile method

    checkFile() {
        let reader = new FileReader()
        let self = this

        reader.onload = (e) => {
            let bstr = e.target.result
            let wb = XLSX.read(bstr, {type:'binary'})
            let wsname = wb.SheetNames[0]
            let ws = wb.Sheets[wsname]
            let data = XLSX.utils.sheet_to_json(ws, {header:1})
            self.form.filedata = data
            self.cols = make_cols(ws['!ref'])
        }
        reader.onerror = (stuff) => {
            console.log("error", stuff)
            console.log (stuff.getMessage())
        }
        // reader.readAsArrayBuffer(event)
        reader.readAsBinaryString(event.target.files[0])
    },

First of all, logging event.target.files[0] in the console would return the file, but I'm testing both event and event.target.files[0] to make sure.

These are my errors:

    event = Uncaught Error: cannot read as File: {"isTrusted":true}
    event.target.files[0] = Uncaught Error: cannot read as File: {}

I think you just need to receive the event here checkFile(event) {... — Richard Matsen
– Richard Matsen, Commented Jan 29, 2018 at 4:46
@RichardMatsen regardless if I add the event or argument or not, the event variable is passed. I tested both ways and both log results of the same event data — Kay Singian
– Kay Singian, Commented Jan 29, 2018 at 5:13
I'm not sure how the event gets in if you don't have a parameter. I guess if you put a console.log before the reader.readAsBinaryString( line, you get correct info about your file? — Richard Matsen
– Richard Matsen, Commented Jan 29, 2018 at 5:16
I tried this code: reader.readAsArrayBuffer(event.target.files), then the error returns: Uncaught Error: cannot read as File: {"0":{}} It seems like object inside the target.files is empty event though it has a file attached onto it already — Kay Singian
– Kay Singian, Commented Jan 29, 2018 at 5:55
Sorry, I got lost when you told me the event was getting picked up even though it's not passed in. Normally in Vue events are handled with v-on: syntax, not @ syntax. — Richard Matsen
– Richard Matsen, Commented Jan 29, 2018 at 6:04

Wei Lin · Accepted Answer · 2020-08-13 07:36:55Z

2

you can use below method

createImage(file) {
    let reader = new FileReader()
    reader.onload = (event) => {
        this.product.image = event.target.result
    }
    reader.readAsDataURL(file)
}

edited Aug 13, 2020 at 7:36

Wei Lin

3,8213 gold badges27 silver badges61 bronze badges

answered Apr 17, 2018 at 22:20

Unknown

4364 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tdbeckett Over a year ago

This seem to only work for me on images. what about not image files? I've tried readAsBinaryString, readAsArrayBuffer and readAsText none of them seem to work.

Ikram Ullah · Accepted Answer · 2021-06-09 06:05:31Z

0

    methods:{
        uploadImage(event) {
        const image = event.target.files[0];
        const reader = new FileReader();
        reader.readAsDataURL(image);
        reader.onload = (event) => {
        this.previewImage = event.target.result;
       };
     }, 
 }

answered Jun 9, 2021 at 6:05

Ikram Ullah

11 silver badge7 bronze badges

Comments

Ashok Parmar · Accepted Answer · 2023-07-26 13:44:06Z

0

<input class="patientPorting"
type="file"
@change="onFilePicked( $event )"/>

Create below method to get the file.

const onFilePicked = (event) =>{

        const fData = event.target.files[0];
        const reader = new FileReader();
        reader.readAsDataURL(fData);
        reader.onload = (event) => {
            fileData = event.target.result;
        };
        console.log(fileData);
        jsonObj = [];
        jsonObj.push({
            "fileData" : fileData,
            "fileName":fData.name,
            "fileSize":fData.size,
            "fileType":fData.type,
        }
       );
    }

answered Jul 26, 2023 at 13:44

Ashok Parmar

4085 silver badges4 bronze badges

Collectives™ on Stack Overflow

VueJS FileReader

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related