how can I covert a base64 image to a file, similar to an Input File type, in a vue frontend

Question

My application gas an edit window, where a user can select and upload a profile image.

I use the following method:


 onFileChange(e){ 
               
      this.selectedFile = e.target.files[0];
      console.log(this.selectedFile);
      this.url = URL.createObjectURL(this.selectedFile);
}

The file: this.selectedFile will be uplaoded to the backend. This works like a charm.

The console reflects the loaded file like:

File {name: 'IMG_6736.jpg', lastModified: 1529420030000, lastModifiedDate: Tue Jun 19 2018 16:53:50 GMT+0200 (Central European Summer Time), webkitRelativePath: '', size: 1307592, …}

blob:http://localhost:8000/deaf3008-e989-4db5-8ee4-41e7cc618916

Now I created and added a croppie component to the page. Croppie generates a cropped image result in 64base format.

The plan is to assign the file from croppie also to this.selectedFile, and process it like the file from the input field as described above.

So I try to convert it, and send the resulting file to the parent component. This works well also, except for the fact that it is not a File I am sending upward with the $emit...

setImage(){
            this.croppie.result({
                type:'blob',
                size:'viewport'
            })
            .then(blob =>{
                const file = new File([blob], "File name", {type: blob.type})
                this.$emit('updateImage', file);
            });
        }

In the parent-component it is processed by:

 freshImage(freshImg){  
            const url = URL.createObjectURL(freshImg); 
            fetch(url).then(file => {
                console.log(file)
                console.log(url);
                //this.selectedFile = file;
            })
        }

Now the console shows:

[object Response]
blob:http://localhost:8000/a4e212c3-d9e7-48b7-bd0b-cb99eadeebc9

Is here anyone who can help me get the file out of the response object?

score 0 · Answer 1 · answered Nov 30 '21 at 13:06

puzzling on I found a description on google: How to convert Base64 String to javascript file object like as from file input form?

The solution was :

1st to get the file from the input and store in this.selectedFile

onFileChange(e){ 
               
            this.selectedFile = e.target.files[0];
            
}

Then process it by Croppie ( code not included) and send the result from Croppie: (which is a blob-url I believe)

        setImage(){
            this.croppie.result({
                type:'canvas',
                size:'viewport'
            })
            .then(blob =>{          
                this.$emit('updateImage', blob);
            });
        }

and then convert it to a javascript-file. The file-name is taken from the

<input type="file">

then this.selectedFile is assigned the converted croppie result

        freshImage(freshImg){  
            fetch(freshImg)
            .then(res => {return res.arrayBuffer();})
            .then(buf => {return new File([buf], this.selectedFile.name, {type:'image/png'});})
            .then(file => { 
                this.selectedFile = file;
            } );

how can I covert a base64 image to a file, similar to an Input File type, in a vue frontend

1 Answers1