Convert file to base64 and add v-model binding in Vuejs

Question

I am building a component which has file input fields and being rendered through function in VueJs:

export default {
    name: 'nits-file-input',
    props: {
        label: String,
    },
    render (createElement) {
        return createElement('div', { class: 'form-group m-form__group'}, [
            createElement('label', this.label),
            createElement('div'),
            createElement('div', { class: 'custom-file'},[
                createElement('input', {
                    class: 'custom-file-input',
                    attrs: { type: 'file' },
                    domProps: {
                        value: self.value
                    },
                    on: {
                        input: (event) => {
                            var reader = new FileReader()
                            reader.readAsDataURL(event.target.value)
                            reader.onload = function () {
                                console.log(reader.result);
                            };
                            this.$emit('input', event.target.value)
                        }
                    }
                }),
                createElement('label', { class: 'custom-file-label'}, 'Choose File')
            ])
        ])
    }
}

While having the values in v-model I get the path of file but I need to have a base64 element. currently in my console I'm getting following error:

Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'

Help me out in execution. Thanks

@BoussadjraBrahim File size is 96 KB. I'm using smallest file to do the testing. — Nitish Kumar
– Nitish Kumar, Commented Dec 27, 2018 at 11:25
@BoussadjraBrahim I tried 22 bytes. It still showing same error. — Nitish Kumar
– Nitish Kumar, Commented Dec 27, 2018 at 11:39

Boussadjra Brahim · Accepted Answer · 2021-10-24 17:37:08Z

11

You should set reader.readAsDataURL(event.target.files[0])

instead of

reader.readAsDataURL(event.target.value) :

on: {
    input: (event) => {
        var reader = new FileReader()
        reader.readAsDataURL(event.target.files[0])
        reader.onload = () => {
            console.log(reader.result);
        };
        this.$emit('input', event.target.files[0])
    }
}

edited Oct 24, 2021 at 17:37

answered Dec 27, 2018 at 11:45

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

3 Comments

Nitish Kumar Over a year ago

Hi, I'm unbale to assign base64 value inside my $emit function. I am using

let baseFile = ''                             reader.onload = function () {                                 baseFile = reader.result                             }; this.$emit('input', baseFile)

can you help with that?

Boussadjra Brahim Over a year ago

i hope that i could, please post a new question where you explain your use case and the issue that you're getting

Nitish Kumar Over a year ago

here it is stackoverflow.com/questions/53945241/…

Maxim · Accepted Answer · 2018-12-27 11:47:27Z

3

Change to reader.readAsDataURL(event.target.files[0])

Following post could be helpful https://alligator.io/vuejs/file-reader-component/

answered Dec 27, 2018 at 11:47

Maxim

2,40110 silver badges17 bronze badges

Collectives™ on Stack Overflow

Convert file to base64 and add v-model binding in Vuejs

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related