convert react-native-signaturepad output to formData?

Question

i need to upload my react-native-signaturepad output as image in to a server.i have tried this following code

//this.state.base64 is signaturepad output
let  blob = new Blob([this.state.base64], {type: 'image/png'});
    alert(blob.size);
      var fd = new FormData()
      fd.append('file',blob,"Sign.png")
         let url="http://xxxxxx/xxxx/xxx/";
        fetch(url, {
          method: 'POST',
          headers: {        
            'Content-Type': 'multipart/form-data'
          },
          body: fd
        }).then(function (response) {
               alert("dfdfdfdfd")
        });

using this above code i am getting

"multipart body must have at least one part "

error please any one help me solve this issue

Thanks

Are you sure `this.state.base64` is set at the time you call it in `new Blob`? The error leads me to believe that the formData body is empty which would suggest your blob may not be created correctly. My other suggestion would to be to try using axios for your post request to see if that is any different. You could also try a library like https://www.npmjs.com/package/b64-to-blob for creating your blob to see if it's an issue with that. — Stretch0, Apr 18 '18 at 08:56
i have tried this package npmjs.com/package/b64-to-blob this throwing error "cannot fint variable atob" — R.Anandan, Apr 18 '18 at 09:52
You could have a look at the solution here to make atob defined: https://stackoverflow.com/questions/23097928/node-js-btoa-is-not-defined-error/23097961 I know this seems like a lot of effort but it's more for the debugging process to try figure out what is going wrong. You can then refactor later. — Stretch0, Apr 18 '18 at 10:00

score 0 · Answer 1 · answered Apr 18 '18 at 15:09

I think there might be a problem generating the blob that way since the Blob(blobParts\[, options\]), the types of blobParts supported are

an Array of ArrayBuffer, ArrayBufferView, Blob, DOMString objects, or a mix of any of such objects, that will be put inside the Blob. DOMStrings are encoded as UTF-8.

Therefore a simple way to convert base64 to blob would be using the fetch api

let base64Url = // Your Base 64 URL

fetch(base64Url)
.then(res => res.blob())
.then(blob => //Use the blob here)

Then you can perform the rest of the operations as you wish.

convert react-native-signaturepad output to formData?

1 Answers1