0

I'm trying to use react-avatar-edit to crop profile image before uploading it, I made implementation successfully, and now I can get cropped image but here is the problem, the cropped image is retrieved in base64string first issue was trying to convert it to an image and after research I found the code below to convert it to blob after some tries to solve it in several ways

// code from stack overflow link: https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript#answer-36183085
  convertBase64ToBlob = (url) =>{
    fetch(url)
      .then(res => res.blob())
      .then(blob => {
        this.convertBlobToFormData(blob)
      })
    ;
  }

then I want to send it as a file so i used this

convertBlobToFormData = (blob) => {
    let data = new FormData();
    data.append('profile_image', blob)
    this.setState({
      convertedFile: data
    })
  }

and calling the functions happens when the user drag&drop the crop shape you can see this link for more details about how the package work

onCrop(preview) {
    this.setState({preview})
    this.convertBase64ToBlob(preview)
    console.log(this.state.convertedFile)
    
    if(this.state.convertedFile){
      this.props.onChange(this.state.convertedFile)
    };
  }

the issue is while printing blob in console.log it retrieves

Blob {size: 1805, type: "text/html"}

and that means it failed to convert base46string to image that I can send it to the endpoint so what's wrong in this or how I can fix it.

the second issue while printing form data that we retrieve from convertBlobToFormData it retrieves enter image description here

so why storing the blob retrieves an empty form data and how I can solve it

note: the backend I use is laravel backend developed by another developer

Community
  • 1
  • 1
Mohamed Najiub
  • 1
  • 6

2 Answers2

1

This simple function worked perfectly for me

 const convertToFile = async (dataUrl) => {
    const res = await fetch(dataUrl);
    const blob = await res.blob();
    let newFile = new File([blob], pictureName, { type: pictureType });
    handlePictureSelect(newFile)
  }

dataUrl is the base64 data.

handlePictureSelect is the function that will send it to backend. I call the convertToFile when the user clicks a button to upload image.

Hope this helps

Amaka
  • 141
  • 1
  • 8
0

After research, I found some information that helped me to solve this problem. part of an issue was in backend and that because I was sending the request with put method and that a common issue in php while uploading the file, to solve it you have to sent the file in form data using post method not put method you can find the details here

another part of the issue was in converting and the base64string to an image and that solved by 

urltoFile=(url, filename, mimeType)=>{
    mimeType = mimeType || (url.match(/^data:([^;]+);/)||'')[1];
    return (fetch(url)
        .then(function(res){return res.arrayBuffer();})
        .then(function(buf){
          return new File([buf], filename, {type:mimeType});
        })
    );
  }

the code above is converting base 64 string to file and to use it 

onCrop(preview) {
    this.setState({preview})
    this.urltoFile(preview, 'a.png')
      .then((file)=>{
        return this.props.onChange(file)
      });
  }

this code is from stack overflow you can find the answer in this link

Mohamed Najiub
  • 1
  • 6