how can I add image from external api

Khan aqib

I have call external api I want to store name and image the name was store but image not I can shear my external api data below photo[external_api_data.PNG]the above photo image store in url i am call this api and store data using for loop the below photo[add_recode_table.PNG]i get the name of breed but not image see the below photo you can see there is no image[table_recode.PNG]when i get the table data the image field is empty in below photo[get_recode.PNG]can you please help me how to get photo from external api 

Michael Udinski



Take the URL and inject it into the Create Resource from Variable function... then add the result of that function to your database.

[CleanShot 2021-12-07 at 11.34.53.png]

Khan aqib

I try but same problem can you please shear any video regarding this issue

Michael Udinski

Hey Khan - sure, but I need to understand your use case more first. Can you please record a loom explaining where you are struggling with to help save time?

David Richardson

I have a similar issue with images.  My interest is to allow users to upload image files (jpg or png) at 300 DPI and then serve them as a web resource (at 72 DPI for electronic displays) OR print them via a separate service that requires DPI greater than 200 DPI for hard copy or .

Uploadcare.com offers a means to upload the file in a Webflow form with some JavaScript that modifies form elements like the submit button and an input field with CSS.  The uploadcare.com upi returns a URL referencing the file now stored on Amazon CDNs upon success uploading the file.  The only element needed to be stored in the database (or CMS) is the URL from uploadcare.com.

But what then?  The URL could be inserted in a new row in a Google sheet or the CMS in Webflow with a Zapier Zap.  I've explored both but feel the path of least resistance might ultimately be Xano.  While Xano might be a hybrid, a relational DB offers greater flexibility retrieving and serving data. 

The URL is not the image file but "points to" the image file. 
 https://ucarecdn.com/86788f37-431a-4f13-ad20-e7710afdf7a2/
It still needs to be converted to a jpg or png file type.

Google sheets offers a function: IMAGE=("[imageURL]") e.g.
=IMAGE(" https://ucarecdn.com/86788f37-431a-4f13-ad20-e7710afdf7a2/ ") that will generate an image.  And THAT image can be inserted into the CMS (with a ZAP perhaps...I think) but not via a file CSV upload (where everything is converted to text).  The clarity of the image is or would be in question.

The uploadcare.com upi allows the website host to request the file by appending function parameters in a structured format that will enhance or filter or modify the original image file by size for instance on the fly for presentation on a web page as modified and requested.  This would be accomplished via JavaScript.  That served file IS served as filetype jpg (or optionally as a png file).

The benefit of the latter approach is reducing web resources and getting what is required.  The challenge left unresolved is getting the uploadcare URL into the Xano database table.

Khan aqib

hii  
can you got the solution how we will store url image in xano
if yes than please help me

David Richardson

Hi Khan
What I've learned is that the uplaodcare "app" is used to upload and manipulate image files and then store the TEMPORARILY.  It does not provide a long term solution for storage.  

Using the URL / UUID you can retrieve the file to use it in your website.  It might live in the XANO database or the Webflow CMS as a jpg or png file at perhaps 72 to 100 DPI.  That way it can be served to your users without much latency.   But that would be a low resolution image file.  An original image file with say 200 - 300 DPI loads too slowly on the website. 

I've played around with some code to change a URL/UUID of an image file to an actual image file (ending in jpg or png). Google Sheets has the IMAGE(url) formula that does that.  I haven't completed a solution yet.

I am considering having the individual uploading the file to a cloud platform like say Google Docs in a public shared folder (where I would have a link) giving me access to the file, but I would not have to host the high DPI image on my end.