I can post the blocks I’m using but it’d be helpful to know if anyone has tried/succeeded in doing this. Otherwise, the blocks aren’t going to mean a whole lot to anyone.
No. It’s the legacy interface. But I’m avoiding using the media db component because I want to upload a scaled image (i.e. 200 pixels wide) to Cloudinary and the API allows me to do that.
Uploading and resizing is simple enough using cloudinary url transition api and/or presets.
I am mentally guessing your projects block diagram.
If my memory serves me well, what may be complex is deleting an asset and syncing your firebase db with the cloudinary assets (if this is indeed what you are doing). Even using nodejs you will need to set up a loop to compare and remove assets not found in the fbdb node. You cannot use the ‘on child removed’ listener because of an anomoly with the way Thunkable handles lists in fbdb. I am unsure is this relates to what you are dabbling in.
I have played a lot with this and I should have many code snippets for you. Are you using node js?
@eddie.rebehy Do you have an example of this? It’s my understanding that the Thunkable media db upload block uploads at full resolution and then it’s possible by modifying the cloudinary media url to download/access a scaled version of the image but I don’t see a way to upload a scaled version except through the API which I’m struggling with.
I’m not concerned at the moment with firebase. I happen to be storing and retrieving the media urls using firebase but that’s all working great (except for the delay accessing a large 5-10 MB image file in Thunkable).
I’m not familiar with node js and I don’t have a server. I’ve just been trying to do everything via web urls (APIs). But I’m willing to learn!
fyi. node js can run in firebase functions and doesn’t need a server.
I also have a html/javascript solution that doesn’t need cloudinary or nodejs (uses js canvas to resize). You can use this in web viewer. It has in built file picker.
I will also get some cloudinary transformation blocks to you when I get back to my computer later today.
I know you are more advanced than I am with web API’s but have you looked into ‘eager’ transformations? Check the above link just for starters.
I am having some difficulty finding these functions I previously created. I stopped using Cloudinary for many reasons and subsequently deleted much of my working code. I honestly can’t remember whether I was transforming on the fly or only after upload. But I do vaguely recall that using presets and eager transformations was possible.
Would you like a vanilla javascript solution using javascript canvas?
Edit: Transformations on upload | Cloudinary
I think I did it using nodejs and incoming_transformations. You may be able to do the same with the provided php sdk in your api?
@eddie.rebehy That IS what I’m wanting to do. I did use the eager transformations when accessing photos stored in Cloudinary and that helped speed up the display process:
Node js code functions reside on the server and you don’t send them as commands. In your case they would reside in Firebase Functions. In short you would create the function/s and deploy to Firebase Functions (this is a small learning curve). You could then call the node js function either via http or by some event listener in the node js script itself such as listening to change in a firebase node.
The challenge here is that the image url is probably on the local device and not accessible to the server. If you are uploading an image from the local device then I would look at resizing using javascript canvas and input Type:File then and storing the png image data directly into firebase storage using the Firebase javascript client SDK. Once you have that you can trigger the Nodejs function to store and use transformations in Cloudinary although that would probably be redundant because you have the image and control directly between Thunkable and Firebase without need for Cloudinary.
The attached file is a good indication of what you may consider instead of Cloudinary. It is perhaps overly complicated by the PDF to image thumbnails and Video first frame Thumbnails.
The file select button is 100% screen size and the canvas and video engines are hidden and not displayed. I use this with Thunkable to select my files from local device and generate thumbnails with original and thumb images stored in Firebase Storage and referenced in Firebase RTDB.
I can look at stripping the code down for you to use as a simple image resizer if you decide to take this further.
Given the perpetual beta issues of Thunkable, I am trying to instead learn more robust and proven methods for production apps such as Ionic/Vue or similar. I am therefore not spending much time here. I am however always on the lookout in the community to try and assist those that have helped me in the past
Have a look at the txt file and PM me if you want some guidance with this method.
Hi tatiang,
Did you succeed with the blocks using Cloudinary API or go with eddie’s suggestion?
I have spent many days reverse engineering you block code above and learning the power of Cloudiary but just wondering if I am barking up the wrong tree.
My Goal is to upload an image and apply a watermark or edit a previously uploaded image and apply the watermark using blocks.
Also using Thunkable X DnD for learning purposes and only for the prototype.
Still working on this. It is a merry go round I have the signature working but the transformation is not working. I will create a small app to generate the SHA1 and a Curl command when I have it working and share it. Basically there are to many configurations to fight each other as in you have to have Strict = True but then eager does not work???
Now concentrating, when I can, on a crud approach.
I have made a cloudinary curl generator to create Curl command lines for testing. They work as far as uploading but the final uploads still are not transformed. I have contacted cloudinary support for advise. Copy the gsheet first so you don’t accidentally give away your secret.
I shall. Just want to iron some things out first. But to work out the blocks, you need to know you are passing the correct url to the WEB api. Getting the right signature is the hard bit.
Fill the associated cells
from you cloudinary account
Public ID - the final file name. It is option but not in this sheet.
Eager - the eager string. Easily worked out using cloudinary tools.
The file is the text url of the image to upload/apply the eager too. Either a local file as lblError here would display file:///storage/emulated/0/Pictures/image-171fd323-fb9f-49dc-966a-4b6820fee39b.jpg) or the url of a uploaded file or external url.
I have the signature working but the transformation is not working. I will create a small app to generate the SHA1 and a Curl command when I have it working and share it. Basically there are to many configurations to fight each other as in you have to have Strict = True but then eager does not work???
