Greetings, internet strangers,
The scope of this question is Retool Mobile.
I have this run-of-the-mill image component. The source is a URL.
My use case is the following: I want to generate a QR code (sorted), display it in an image (sorted), and then have some app-based way (no screenshot or right-click/save) to copy the image to the clipboard and/or trigger a download (preferably with a file name that I, developer, can control) so that I then may use a Whatsapp API link to open WhatsApp, and easily incorporate said QR code into the message.
I suspect (not checked yet) that I can use utils.openUrl in the mobile app so the WhatsApp part of this business is probably sorted. But the part that isn't, is the download/clipboard thing.
As a JS high-functioning disaster (I survived so far by being good at other languages and figuring things out with duct tape and chewing gum), I am in need of a tutorial for dummies on how to do this download/clipboard thing. I've seen there is some sort of discussion around happening with utils.downloadFile and some base-64 business, but I'm totally out of my depth with this for now and I cannot even say if it is relevant to my scenario.
I would rather avoid the utils.openUrl -> URL of the QR image in mobile browser -> hold click to download or copy image as this goes against the smooth user experience I want to give. I wish to be able to do it all in a single click: clipboard/download, open whatsapp with a pre-drafted message where I just need to plop the image before hitting Send.
Thank you kindly, good people of the internet.
Hey @DocShades!
You should be able to configure a solution using utils.downloadFile without much JavaScript. If you make a REST query you can dynamically pass it your image URL. Depending on how the image is hosted, it's possible that you'll get different responses, but as long as the response is consistent you should be able to grab a base64 string from it that you can pass to the downloadFile util:
The above uses https://www.qrstuff.com/images/default_qrcode.png as an example URL. If you're having trouble getting the base64 data it might be helpful if you can share one of the image URLs you're using.
When using the downloadFile util the person using the mobile app can be prompted with how they want to deal with the file and can choose WhatsApp themselves. Could that flow work for you?
Thanks @Kabirdas for picking this up.
I replicated exactly what you have displayed there, and I do get a nice base64 string out of it in the output section of the RESTQuery panel so I am confident this part is sorted.
First I tried it in the regular web-app retool environment, before moving on to Mobile. I had to modify the download script to the following:
utils.downloadFile({base64Binary: getQR.data.base64Binary}, 'QR_Code', 'png')
specifying the data is base64 as otherwise the image downloaded onto my computer was not readable (it had a .png extension, but the contents according to notepadd++ were just the base64 string, not an actual image). After this fix, I was downloading a correct, readable png of my image.
Moving on to the Mobile environment, the same script causes no noticeable outcome. Debugger says it is running, but I get no download notification/prompt of any kind. So it seems to be specific to the Mobile version. Tested both on my desktop in the mobile dev, and directly in the Mobile app (Android, Galaxy S10e, retool app is up to date).
I tested this both with my own image (generated by api.qrserver.com) and with the QRStuff that you used in your example. Same outcome, so we can probably narrow it down to an issue with utils.downloadFile for mobile.
1 Like