Open a PDF that arrives in Base64 (Mobile App)

Open a PDF that arrives in Base64 (Mobile App)

  

Good morning,


I am developing a mobile application and it should load PDF files. The difficulty is that I receive that PDF in Base64, and in mobile I can not find the way to show the file when it arrives in that format. In web application if I have seen how it is done, but for the mobile I have no idea.


Can anybody help me?


Thank you very much,

Greetings.

Hi Jordi,

Just convert the Base4 to Binary and then use File Plugin to convert it to a pdf file.

Cheers,
John

John Guiller wrote:

Hi Jordi,

Just convert the Base4 to Binary and then use File Plugin to convert it to a pdf file.

Cheers,
John

Hi John,
First of all, thanks for your response.

Now, I'm seeing the actions that I have of the plugin that you mention to me (which I had previously installed), but I only see the ones that I attached in the image.

My idea is that when I click on a specific button, it is with the Base64 of the PDF that I want to see it, through the conversion to BinaryData and then PDF, but I do not know what action I should use. You can help?

Thank you very much,
Greetings.


Hi Jordi,

This is how I did it on my end.

1. Determine first the Path for which the file will be stored.

2. Convert Base64 to Binary Data

3. Using the File Plugin, use the Save File logic action.

4. Using the File Viewer Plugin, use the Open Document logic action to open the file.

John Guiller wrote:

Hi Jordi,

This is how I did it on my end.

1. Determine first the Path for which the file will be stored.

2. Convert Base64 to Binary Data

3. Using the File Plugin, use the Save File logic action.

4. Using the File Viewer Plugin, use the Open Document logic action to open the file.

Hi John,

Thanks for your response.
I attached an image so you can see the action by clicking on the button to view a PDF. The first thing is the Base64 that I receive from a call to a REST service, the following is the conversion to BinaryData. Now my question comes, in what route do I indicate that I keep it? What do I put in the path? and in the OpenDocument, I put the same filePath that I put in the save action?

Thank you very much,
Greetings.


Hi Jordi,

Here's what I done:


Hope it helps...

Harlin Setiadarma wrote:

Hi Jordi,

Here's what I done:


Hope it helps...

Hi Harlin,

Thanks for your answer. I attached the two images so you can see how I have it configured. I have tried my mobile and it does not open or save the PDF, at least it does not appear on the screen. I do not really know what I have wrong.






Thank you very much,
Greetings.


where's you got pdf binary from?

if from REST API like mine, then there is no need to convert base64 to binary.

Like you saw on my SaveFile screenshot, I got my pdf directly from REST API output with no conversion.


Harlin Setiadarma wrote:

where's you got pdf binary from?

if from REST API like mine, then there is no need to convert base64 to binary.

Like you saw on my SaveFile screenshot, I got my pdf directly from REST API output with no conversion.


Hello Harlin,

I get the Base64 of the REST API, once I have it, I convert it to BinaryData to be able to use the following actions, both the save and the show. The first step of my flow is to collect the Base64, that's what it does.


Thank you very much,

Greetings.


Here's my REST API looks like.

Like you can see below, I got Response output already as binary, so I don't need to convert.

Harlin Setiadarma wrote:

Here's my REST API looks like.

Like you can see below, I got Response output already as binary, so I don't need to convert.

Hi Harlin,


Let me put things way simpler so you'll get to understand me:


Here's the response I get whenever I call the service ( https://pastebin.com/yF9C0MFs ), you'll see that if you try to use that Base64 string in webs like https://www.freeformatter.com/ , you should get a working pdf ( I've already tried it, it works 100% sure).


You should know by now that what I'm trying to do here is way easier on a website/desktop project rather than the mobile ones because on web project it is nothing more than:


-Call the service.

-Use Base64ToBinary (Server Action) Component.

-Use Download Component with Mime-Type as 

"application/pdf"

 and Save to Disk as "No" in order to open the PDF on the current browser.


That said, how can I get this working on a mobile app? Now that you know that the service returns, could you please show me the proper way to do this? And again, I got this working on a OS website so I can not see a reason why this would not work on mobile.

Thank you by advance,

Jordi.


Now I see your problem.

In Outsystems, binary data type is not a real binary.

But it was actually base64.


Try this in mobile app, create a screen with image upload or capture image using Camera plugin, and store it into local variable (or entity) with data type binary.


After that, create a button with logic that run this javascript:


JS Input parameter: image (type binary).

JS Code: alert($parameters.image);


Publish and run the mobile app, upload or capture image from camera, click that button.

You will see that the content of that image (with binary data type) is actually base64.


So, in order for your base64 text (text data type) to be "converted" into binary data type, try this Javascript (Run Javascript):


JS Input Parameter: base64_text (Text)

JS Output Parameter: binary (Binary Data)

JS Code:

$parameters.binary = $parameters.base64_text


I hope it works, I never tried this with PDF file.

But I've done this with images like in my Forge's component: Image_Utils_Mobile

https://www.outsystems.com/forge/component/2078/image-utils-mobile/

Harlin Setiadarma wrote:

Now I see your problem.

In Outsystems, binary data type is not a real binary.

But it was actually base64.


Try this in mobile app, create a screen with image upload or capture image using Camera plugin, and store it into local variable (or entity) with data type binary.


After that, create a button with logic that run this javascript:


JS Input parameter: image (type binary).

JS Code: alert($parameters.image);


Publish and run the mobile app, upload or capture image from camera, click that button.

You will see that the content of that image (with binary data type) is actually base64.


So, in order for your base64 text (text data type) to be "converted" into binary data type, try this Javascript (Run Javascript):


JS Input Parameter: base64_text (Text)

JS Output Parameter: binary (Binary Data)

JS Code:

$parameters.binary = $parameters.base64_text


I hope it works, I never tried this with PDF file.

But I've done this with images like in my Forge's component: Image_Utils_Mobile

https://www.outsystems.com/forge/component/2078/image-utils-mobile/

Hello Harlin,

Thanks for your explanation,

I followed the steps you said and yes, now I understand it better. However, I still can not open the document, so I will explain my current situation.

Right now I have the Base64 as we have been talking, and with it you can get the plain text of the PDF, which is achieved through the atob () function of JavaScript, but of course, the OpenDocument action of the FileViewerPlugin plugin needs to pass a filePath and I only have the Base64 or plain text failing, any suggestions?

Thank you very much,
Greetings.


You can use File Plugin to store the binary to storage, then use output parameter Uri to FileViewerPlugin.



Harlin Setiadarma wrote:

You can use File Plugin to store the binary to storage, then use output parameter Uri to FileViewerPlugin.



Hello Harlin,

Well, I have continued doing tests and the truth is that I can not get it. I pass again the flow that I am following, I have seen with the debugger that the part of the "CreateDirectory" is skipped, and I do not really know why it does this. I know I have to use the "SaveFile" and then in the FileViewerPlugin to put the output, but how do I create a directory? What exactly has to be put into creating as well as saving? If you can take another look to see how I got it, it would be great.




Thank you very much,
Greetings.

Solution

You don't need to Create Directory first.

Just use Save File action like this (Path will automatically created):

Leave StorageTypeId to default (blank).

After that call OpenDocument action like this:

It work for me.

Also I think you don't need Base64ToBinary server action.

It doesn't make sense, because I don't need that to succeed in my case.

Like I said, binary data in Outsystems is actually BASE64.

You can proof it by alert($parameters.binary_data_input); in Javascript.

Solution

Harlin Setiadarma wrote:

You don't need to Create Directory first.

Just use Save File action like this (Path will automatically created):

Leave StorageTypeId to default (blank).

After that call OpenDocument action like this:

It work for me.

Also I think you don't need Base64ToBinary server action.

It doesn't make sense, because I don't need that to succeed in my case.

Like I said, binary data in Outsystems is actually BASE64.

You can proof it by alert($parameters.binary_data_input); in Javascript.

Hello Harlin,

Thanks again for your answer. I have the flow exactly like you, with the action of "Save" and the "OpenDocument" equal set. After executing with the Debugger these are the messages that appear to me, to see if with this we can arrive at a final solution.

Thank you very much,
Greetings.


It's mean you've been testing with Outsystems Now or browser.

To do this, you need to Generate Native Apps (APK for Android, IPA for iPhone), and installed it to real device.

Harlin Setiadarma wrote:

It's mean you've been testing with Outsystems Now or browser.

To do this, you need to Generate Native Apps (APK for Android, IPA for iPhone), and installed it to real device.

Hello,

Thank you very much again, I have tried generating the app and trying on my Android phone and it works, only when opening the PDF it closes at the moment and I get a message that says "Can not show PDF (The format of mifichero.pdf is not valid) "

Thank you very much,
Greetings.


Jordi Gisbert Ponsoda wrote:

Harlin Setiadarma wrote:

It's mean you've been testing with Outsystems Now or browser.

To do this, you need to Generate Native Apps (APK for Android, IPA for iPhone), and installed it to real device.

Hello,

Thank you very much again, I have tried generating the app and trying on my Android phone and it works, only when opening the PDF it closes at the moment and I get a message that says "Can not show PDF (The format of mifichero.pdf is not valid) "

Thank you very much,
Greetings.



UPDATE: 

Everything works correctly, thank you very much for the support and apologize for the inconvenience.

Greetings,

Jordi



Nice hearing that.

Jordi Gisbert Ponsoda wrote:

Jordi Gisbert Ponsoda wrote:

Harlin Setiadarma wrote:

It's mean you've been testing with Outsystems Now or browser.

To do this, you need to Generate Native Apps (APK for Android, IPA for iPhone), and installed it to real device.

Hello,

Thank you very much again, I have tried generating the app and trying on my Android phone and it works, only when opening the PDF it closes at the moment and I get a message that says "Can not show PDF (The format of mifichero.pdf is not valid) "

Thank you very much,
Greetings.



UPDATE: 

Everything works correctly, thank you very much for the support and apologize for the inconvenience.

Greetings,

Jordi



Could you share how you resolved "Can not show PDF" message?