How to display an image from Tiggzi database?

[Antonia Warren]

I want to display an image along with a description (text) on a page. I uploaded a few images to the Files section in my database. I created a new collection (equations) with two columns; the description and the URL that I copy pasted from the Files section in my database.

On the UI I have a label and an image.

The rest service queries the collection equations and returns the description and the image URL.

I mapped the label on the UI to the description and the URL to the image asset. While the description displays, the image doesn't.

The URLs that I've tried were in the form like this
i) 06266a98-0de6-4468-ba6f-11f9dcda4ae3.eom2.jpg
ii) https://api.tiggzi.com/rest/1/db/file...
but none of these worked.

How can I fix this?

Thanks

[Kateryna Grynko]

Hello!

To get image from database additional HTTP header "X-Tiggzi-Database-Id" must be present in GET request. This could be done with JavaScript only.

code
var fileUrl = 'https:&#47;&#47;api&#46;tiggzi&#46;com&#47;rest&#47;1&#47;db&#47;files&#47;<file_name>';

$&#46;ajax({
type: "GET",
beforeSend: function(request) {
request&#46;setRequestHeader("X-Tiggzi-Database-Id", <database ID HERE>),
},
url: fileUrl,
data: file,
processData: false,
contentType: false,
success: function(data) {
&#47;&#47;'data' variable now cointans image data
},
error: function(data) {
&#47;&#47; do something in case of an error&#46;&#46;&#46;
}
});

/code
To display image data on a page Data URI must be used (http://en.wikipedia.org/wiki/Data_URI... )

[Antonia Warren]

Thanks Katya for your reply.
I don't know where to put this code (for instance, should it go in a panel or if I should create a new Javascript file)

Also I am not sure how to handle the result 'data' in order to display the image on the page. Can you help me here?

Is there a tutorial that I can go through that would help me to learn about what's needed here?

Thanks

[Antonia Warren]

I've managed to try the following:

Created a button with a click event that run javascript when clicked.
I created an image on the UI with the name imgEquation

I modified your script with my db id, name of image file and I assigned the image on the UI to be the equal to 'data' (this I am unsure about)

This is my new code. It doesn't work.

var fileUrl = 'https://api.tiggzi.com/rest/1/db/file...';

$.ajax({
type: "GET",
beforeSend: function(request) {
request.setRequestHeader("X-Tiggzi-Database-Id", "my_db_id"),
},
url: fileUrl,
data: file,
processData: false,
contentType: false,
success: function(data) {
//'data' variable now cointans image data
imgEquation=data;
},
error: function(data) {
// do something in case of an error...
}
});

[Kateryna Grynko]

Hello,

This JS code allows you to download data from server, but there is no possibility to show loaded image on screen.

We will search a solution.

[Antonia Warren]

Thanks Katya, but I think that a solution does exist already for what I want to do.

This post is about a user who was able to display an image to image containers on his page by using a file name and querying it to files storage to retrieve the image. This is similar to what I want to do.
https://getsatisfaction.com/tiggzi/to...

I also completed something similar when I did the Building Twitter Search App tutorial on http://help.gotiggr.com/getting-start...; the Rest service returned an image URL as part of the response. I mapped the image URL to the asset part of the image component on the UI to display the image.

Is it really more involved than this?

[Kateryna Grynko]

Solution is found! Here is an example of downloading image from database.

To make it work change "database_id" parameter in "db_settings" and change "file_name" request parameter to "mainScreen"/"Data" tab/"Edit mapping"
project backup is here

We are going to write tutorial for this functionality.

[Antonia Warren]

Hi Katya thanks for this.

I took a while to figure out how to use the 'More Options' button on the create page to load your zip file but I was able to do it.

I changed, as you said the database_id parameter in db_settings to be my database id.

I don't know how to populate with the file name. Can you give me some more help here please?

[Antonia Warren]

Hey Katya I got through by creating an input field on the page to type in the name of the file to retrieve and mapped it to the filename field. I got the image loaded when I did this.

Now I will look for a way to get all this done in the backend (because the users would not have access to the file names) but this is a big leap forward.
Many thanks.

[Antonia Warren]

Hi again, is there a way to create a rest service to return a row where a column is equal to a specific value.
I don't understand how to use the queries as explained on this link http://help.gotiggr.com/documentation... for instance, where do I put them?

Is there anyway to do it using the Edit mapping functionality?

Many thanks