React-native-fetch-blob: Cannot access base64 data from response

[Larney11]

I cannot access the base64 data from response data.
For detailed explanation check out this write up.

[wkh237]

Hi @Larney11 , the resonse object looks fine in the screen shot, can you explain more about how you access resp.data ? What's the error message ? Because that function works fine in our test case.

[Larney11]

@wkh237 There is no error, the emulator won't open.
I now access it with resp.data and return it.
The response is then used for the source of the image.
<Image source={{uri: resp.data}} style={{width: 100, height: 50}} />.

The problem is now that the image will not display when 'resp.data' is returned.
Am I supposed to decode the response or something?

Thanks for the help.

[wkh237]

If that the resp.data does contains a BASE64 encoded image, you can try the following usage

<Image source={{uri : 'data:image/png;base64, ' + resp.data }} style={imageStyle} />

I think you may missed the MIME prefix, try it and see if the image displayed 👍

[Larney11]

@wkh237 That works perfect! Thanks very much!

[wkh237]

You're welcome :smiley:

[Larney11]

Hey @wkh237 .
I figured your the man to ask this question. If I was to decode a base64 pdf would it look like this:
var imageBase64 = "data:application/pdf;base64,"+base64Str;
Thanks.

[wkh237]

@Larney11 , If you're going to decode a base64 data you don't need the dataURI prefix (data), just use the BASE64 string as input.

[Larney11]

@wkh237
Thanks for the response.
I might have used the wrong terminology in my question.

This is my RNFetchBlob method containing the above sample code from the previous question.

`fetchAttachment: function(attachment_uri, attachment_mimetype) {

  return new Promise((RESOLVE, REJECT) => {

     RNFetchBlob.fetch('GET', config.apiRoot+'/app/'+pdf_uri)
       .then((res) => {
         let base64Str = res.data;

         var pdf_Base64 = 'data:application/pdf;base64,'+base64Str;

         RESOLVE(pdf_Base64)
       })

       .catch((errorMessage, statusCode) => {

         console.log("Error:",errorMessage)
      });
  })

}`

Does that look alright to you.

[wkh237]

@Larney11 , Yeah, that looks fine.

[Larney11]

@wkh237 Thanks for your help! This I was wondering . In case you know anything on react-native-fs.

[wkh237]

@Larney11 , can I have a look on the BASE64 data you got ? Perhaps the data not encoded correctly.

[Larney11]

@wkh237 Not sure what you mean by that. Will I console.log() the 'pdf_Base64' and send it to you?

[wkh237]

Okay 👍

[Larney11]

@wkh237
console.log(pdf_Base64) =

It printed almost another 12 pages of similar code.

[wkh237]

@Larney11 , I've done some test by download a PDF to storage and display it on Webview and that looks fine. I'm not sure if Image component supports PDF format, could you try using react-native-pdf-view or Webview ?

[Larney11]

@wkh237
I have been trying to display the PDF on wevview for a while and can't get it working. From what I read React-native-android's webview can only take a uri, and not a storage location or base64

I am currently trying to use react-native-pdf-view but unfortunately it only takes a file path([reference])(https://github.com/cnjon/react-native-pdf-view/blob/master/RNPDFView/RNPDFView.m#L56). And I can't get that file path because of this.

Thanks for you time.

[wkh237]

@Larney11 , I think you can try to save the BASE64 string to file system without data:application/pdf,BASE64 prefix.

It's pretty simple to do this with our fs API

// destination path of the PDF file
let pdfLocation = RNFetchBlob.fs.dirs.DocumentDir + '/tmp.pdf'
// The base64 encoded string
let pdfBASE64 = 'JEBERi0xLj ....='
RNFetchBlob.writeFile(pdfLocation, pdfBASE64, 'base64')
    .then(() => {
        // use the path `pdfLocation`
    })

Hope it's gonna work 😏

[Larney11]

Thanks a million for all your help. I'll let you know how it goes.

[Larney11]

@wkh237 It works! Thanks for all your help.
Solution
Check out this Stackoverflow solution.

[wkh237]

@Larney11 ,That's great ! I'm glad to be of help 😄