[New Plugin] Convertio

Idea Implemented
41

I am really keen to use Convertio to create and email a PDF in my app as it has a free option for testing, and is relatively cheap (compared to the very expensive SelectPDF).
Unfortunately, as so often happens with Bubble, I spend days trying to interpret the cryptic and incomplete instructions available.
Some questions:

  1. When I invoke “Convert url to image” I must enter “(parameter) file”. It took awhile to work out that this refers to the url of the page I wish to convert. When I enter “This url” (selected from Dynamic data), the converted image consists of an empty white page. How do I enter the url of the current page (which contains the button to initiate the convertio process)?
  2. Then I am asked to enter “(parameter) filename”. I put in “test.pdf”. What is this filename for? Will it contain my converted image? If yes, how do I view the file? Where do I find this file? Can I attach it to an email?
  3. When I schedule my event “ConvertioEmail”, I am asked to specify “Workflow data”. What should I put in here? Currently I am putting the ConvertioStatus, for want of a better idea.
  4. When I attempt to “Open an external website” using the “data:application/pdf…” string generated, nothing at all happens. Is this the right command?
  5. How would I attach the converted pdf of my webpage to an email? Currently I am just dumping the whole “data:application/pdf…” string into the body of the email.

Any help would be greatly appreciated.

42

here is a demo, It will give you an idea. Its a dressed up, even easier copy of the old demo.

what part seemed cryptic to you? Your using a conversion api - the file is the file you wish to convert, with the exception that you can provide your sites url instead and convert that. Given that url’s in bubble are all referenced as the remote resource I would have thought the param would make sense, having said that though its convertios endpoint parameter so unfortunately it will have to stay that way.

This sounds like permissions or incompatible elements/code or something similar. use the debugger and grab the full url as it appears from that state, then give it a try in the demo.

So the action your attempting to run here is to convert and return a file, here is where you get the opportunity to name the file - this should give you some context around why the next parameter required is what type of file you want to convert to…

As for sending a file as an email attachment, its not a feature of this plugin, you may want to have a look in the store for a plugin that does this.

have a look at the demo

We have Chrome to thank for this, they are not allowing for base encoded resources to be opened in the _top-frame so i will sort this although bare in mind email body can use base anyway. I will update either CSS Tools or Plug Bubble to have a method of dealing with it soon.

Sounds bad when you say it like that - although once the user receives the email even company specific spam servers and what not wont have your email body broken up into mixed (wont load) and ok code…

43

Hi Jarrad
Many thanks for your lengthy reply.
I can only see the live version of your demo, not the edit/development version. I get an error when using the live version.

This sounds like permissions or incompatible elements/code or something similar. use the debugger and grab the full url as it appears from that state, then give it a try in the demo.

Tried all these options - still just a blank page appears when putting returned string in browser.

I cannot find the filename specified (test.pdf) in the bubble file manager. Should I look elsewhere?

Sounds bad when you say it like that - although once the user receives the email even company specific spam servers and what not wont have your email body broken up into mixed (wont load) and ok code…

Not sure what this means.
I will setup the environment in a separate test app and make that available in the hope you can inspect and see what I am doing wrong.

Regards

44

Hi Jarrad,

the demo seems to fail with any url I’ve tried

image
image1085×389 36.3 KB

45

Ive fixed it for pdf, just give png a miss for now until i have some time to finish that too…

46

Ok thanks!
I’ve just seen it’s ok now.
but I’m still waiting on png case while trying on my own to make it works

47

its the exact same flow, just swap the application/pdf for image/png as the mime type in the data url.

48

@jarrad
Sorry to bother you again but I can’t figure it out.
In the demo app, the workflow seems to run correctly but I can’t display anything neither pdf nor png.
I’d like to store a screenshot image in my database and then display it as an image.
Seems to be exactly what does this pluggin, but I can’t figure it out although I’ve read all this thread!
I’ve understood that the pluggin returns a base64 content but how to store it as an image in the database? Is that possible?

49

Bubble stores links to files, not the actual content by default. When you save an image your just storing its reference url eg. https://my.domain.com/myImage.png and calling it type image. The data url eg.

data:image/png;base64,YOUR-BASE64

You can just save as an image also. You will also have the bonus that your entire images data is included in this data url meaning no remote file loading with the cloudfront corrs method when you want to display it. I know this method is a little messy and a bit of a pain because the api doesnt return the document you need to make the call for it meaning there is timing issues if not done well. This is why i havent pushed more of this services features and instead have focused on in app methods via other plugins.

50

Hi, I followed your link to get an API key but it seems the website is out of service. Can the plugin still be used?

thanks

51

the demo is not working. After i click on the icon of the converted pdf it is opening a new tab which is blank. I tried the png format and nothing is showing up in the image area

1 Like
53

Did you manage to make it work? I’m really struggling here :sob:

54

No. I used PDF Conjurer instead.

55

its working fine, the only problem is with the action that tries to open it in external window

I will let you know when I solve it

1 Like
56

Ok solved it

Use toolbox plugin and run this code

var pdfResult = data_.data.info.result.result;

let pdfWindow = window.open("")
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, " + encodeURI(pdfResult) + "'></iframe>")

image

Not the cleanest solution but it works

1 Like
57

Thanks for the solution!!

58

I am getting this error message as well.

59

I tried this but did not work.

60

anyone managed to get this to work? doesn’t seem to be working

61

Same issue as everyone else. Get a Base64 code back, but using data:application/pdf;base64 or data:image/png;base64 just returns a blank white screen…