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


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?

Source: Vue – Stack Overflow

November 29, 2021
Category : News
Tags: base64 | croppie | Vue.js

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.