Retrieve image from SQL filestream

[Cecil]

My Application has photos that are stored in a SQL using a filestream column.

The question I have is, is there a method, plugin, or whatever for retrieving those photos?

 

[Anton Dobrev]

Hi Cecil,

Thanks for your question.

You can map this column to a field in your Backend Services content type (it will be mapped to a field of type Object). Then you can use the image data in your client app from this field. The values of the column will be received in the client app as a base64 string.

You can use the string as value of the src attribute of the IMG tag:

<img alt="MyImage" src="data:image/png;base64,MY_BASE64_STRING_HERE" />

I hope that this answers your question.


Regards,
Anton Dobrev
Telerik

 

 

[Cecil]

Thanks Anton. 

That worked so well that I would like to expand on this.

From that same filestream database, how would I retrieve and display a pdf?

[Anton Dobrev]

Hello Cecil,

You can retrieve the base64 string representation of a PDF file in the same way. 

For iOS apps, you can construct a data URL like data:application/pdf;base64, base64StringHere to open the PDF in the device browser.

For example:
​

<a id="pdf-link">Get PDF</a> /* holder of the link to the PDF

/* when you have the base64 string use it as a value of the href attribute to construct the link*/
var src = "data:application/pdf;base64," +str;

var img = document.getElementById('pdf');
img.href = src;

For Android devices, a more robust solution would be:

- Get the base64 string
- Convert the base64 string to a byte/binary array
- Save it to the device file storage as a file
- Open the PDF from the device file storage

You can refer to this example app for reading a local PDF file. You can also use the File Transfer plugin to write the base64 string to the local storage.

I hope that this helps. Let me know if you have questions.

Regards,
Anton Dobrev
Telerik