Displaying Images Stored on a Server In Flex

My original idea for my app was to have live thumbnails of websites by screenshotting a html component in the app and saving these screenshots as jpgs which are applied as the source of the thumbnails. I now realise this is a bit too unstable as if the site doesn't load the images won't display. What I want to do instead is use the same idea but instead of the application writing to the application directory writing to a server where the images are stored so that it will overwrite these images.
What I need to know is how to display server stored images in flex in either an image component or an array collection so they can be applied to a tilelist. The problem is I have zero experience at using server side data with flex. Can anyone point me in the direction to some examples/tutorials on how to display server stored data or more specifically images within a flex application or give me advice on this? Cheers.

quick and easy way to do it would be with PHP.
Make a script, scan a server folder and return the results in an XML format that can simply be fed into a datagrid/tilelist/whatever. To give you a few hints of what to look into.
You'll need an initial HTTPService request fired off to the php script. The PHP script will then need to parse through the folder finding all the images, i'd recommend the glob() function in PHP to do this. eg:
print "<images>";
foreach (glob("directory/*.jpg") as $filename) {
print "<screen><name>".$filename."</name><location>directory/".$filename."</location></screen>"
print "</images>";
then you'll need to handle the result event, simply feed each item into its respective place and ta daa.
there are loads of examples around with this same methodology principle like this one:
http://www.vipercreations.com/tutorials.php?t=28&page=1&c=Adobe%20Flex
and i'm sure if you search around for 'flex php gallery' on google you'll probably even find a totally relevant example.

Similar Messages

Displaying images stored in SQL Server

Is there someway of displaying images stored within SQL
Server. Is FDS required? Prefer a method to display images without
using FDS; Web Service would be okay if that can work

I do that sort of thing using PHP and mySQL the binary part
of the image is stored in a BLOB field (Binary Large OBject) along
the rest of the information necessary for the http headers (e.g.
mime type, file name, file size) being staored in their own fields.
That info is then used to build the file using PHP. The PHP
file contains a mySQL query whos result is echoed with the
appropriate headers. The URL points at the PHP file rather than at
any saved image.
Here's the php:
<?
# display_imagebank_file.php
# Note: the ID is passed through the url e.g.
# this_files_name.php?id=1
# connect to mysql database
mysql_connect('HOST', 'USERNAME', 'PASSWORD');
mysql_select_db('DATABASE');
# run a query to get the file information
$query = mysql_query("SELECT FileName, MimeType, FileSize,
FileContents FROM blobTable WHERE ID='$id'");
# perform an error check
if(mysql_num_rows($query)==1){
$fileName = mysql_result($query,0,0);
$fileType = mysql_result($query,0,1);
$fileSize = mysql_result($query,0,2);
$fileContents = mysql_result($query,0,3);
header("Content-type: $fileType");
header("Content-length: $fileSize");
header("Content-Disposition: inline; filename=$fileName");
header("Content-Description: from imagebank");
header("Connection: close");
echo $fileContents;
}else{
$numRows = mysql_num_rows($query);
echo "File not found <br>";
echo $numRows;
echo " is the number of rows returned for id = ";
echo $ID;
?>
Hope that helps
Phil

Report - Unable to display image stored on External server

Hi
I need to display image on report that is on different instance for that i had put a formula column (in report 10g) and for that coloum i made file format as image and read from file as Yes and giving it the URL of Image stored on different server . but at run time for PDF output i am getting error like REP-1295: Data format of column 'CF_1' is unsupported
Please help me , Thx in advance.
Ranga

From the documentation:
URL Reference
1.Insert a dummy image in your template.
2.In Microsoft Word's Format Picture dialog box select the Web tab. Enter the following syntax in the Alternative text region to reference the image URL:
url:{'http://image location'}
For example, enter: url:{'http://www.oracle.com/images/ora_log.gif'}
Element Reference from XML File
1.Insert a dummy image in your template.
2.In Microsoft Word's Format Picture dialog box select the Web tab. Enter the following syntax in the Alternative text region to reference the image URL:
url:{IMAGE_LOCATION}
where IMAGE_LOCATION is an element from your XML file that holds the full URL to the image.
You can also build a URL based on multiple elements at runtime. Just use the concat function to build the URL string. For example:
url:{concat(SERVER,'/',IMAGE_DIR,'/',IMAGE_FILE)}
where SERVER, IMAGE_DIR, and IMAGE_FILE are element names from your XML file that hold the values to construct the URL.
This method can also be used with the OA_MEDIA reference as follows:
url:{concat('${OA_MEDIA}','/',IMAGE_FILE)}
Edited by: stevencallan on Feb 13, 2009 3:50 PM

Report - Not able to display image stored on External server or internet

Hi
I need to display image on report that is on different instance for that i had put a formula column (in report 10g) and for that coloum i made file format as image and read from file as Yes and giving it the URL of Image stored on different server . but at run time for PDF output i am getting error like REP-1295: Data format of column 'CF_1' is unsupported
Please help me , Thx in advance.
Ranga

Hi,
I've got the same problem.
Did you find any solution?
Thank you
Davide

Problems displaying images stored in SQL Server as Datatype "image"

I am trying to display an Image stored in SQL Server as
datatype
'image' and it only shows a portion of the image.
It seems to be tied to the size (kb) of the image since the
larger the
image the less of it is shown before it cuts off(sometimes it
cuts off
mid line so it's about the file size and not fitting the
image on the
screen).
Here is the code I am using that deals with the image.
[Bindable]
public var theImage:ByteArray = new ByteArray;
private function getScans_result(event:ResultEvent):void{
var imageByteArray:ByteArray = event.result[0].Image;
theImage = imageByteArray
<mx:Image id="theIMG" width="160" height="220"
source="{theImage}"/>
Any Thoughts??

I do that sort of thing using PHP and mySQL the binary part
of the image is stored in a BLOB field (Binary Large OBject) along
the rest of the information necessary for the http headers (e.g.
mime type, file name, file size) being staored in their own fields.
That info is then used to build the file using PHP. The PHP
file contains a mySQL query whos result is echoed with the
appropriate headers. The URL points at the PHP file rather than at
any saved image.
Here's the php:
<?
# display_imagebank_file.php
# Note: the ID is passed through the url e.g.
# this_files_name.php?id=1
# connect to mysql database
mysql_connect('HOST', 'USERNAME', 'PASSWORD');
mysql_select_db('DATABASE');
# run a query to get the file information
$query = mysql_query("SELECT FileName, MimeType, FileSize,
FileContents FROM blobTable WHERE ID='$id'");
# perform an error check
if(mysql_num_rows($query)==1){
$fileName = mysql_result($query,0,0);
$fileType = mysql_result($query,0,1);
$fileSize = mysql_result($query,0,2);
$fileContents = mysql_result($query,0,3);
header("Content-type: $fileType");
header("Content-length: $fileSize");
header("Content-Disposition: inline; filename=$fileName");
header("Content-Description: from imagebank");
header("Connection: close");
echo $fileContents;
}else{
$numRows = mysql_num_rows($query);
echo "File not found <br>";
echo $numRows;
echo " is the number of rows returned for id = ";
echo $ID;
?>
Hope that helps
Phil

Display image stored @ content managemenbt

Hi,
this is regarding to displaying image stored @ content management, using <html:img> tag in .jsp
under a node i am uploading two images. (node having two upload options)
in .jsp i am using <html:img> tag to display the images.
i tried to display both the images. But the first image what i upload is not showing. what i upload second is displaying.
pls let me know how to resolve this.
Thanks.

You need to access binary property values separately from the node. In 9.2 the API is accessed via INodeManager.getStream(). Alternatively you can take advantage of the tags we have for this as well. Take a look here on edocs:
http://e-docs.bea.com/wlp/docs92/cm/developCM.html
-Ryan

Displaying Images stored in Database

Hi, all i am having images stored in Databases as BLOB.
how i can display that in flex application. suppose i am having the ArrayList of Employees in which employee object also have a field of called empImage, how i can display this data in flex.
i am using BlazeDS.
Thanks
Regards
Amar Deep Singh

Hi,
This will give you the idea of getting the image from you array list.
http://blog.flexexamples.com/2008/02/15/creating-a-simple-image-gallery-with-the-flex-hori zontallist-control/
Johnny
Please rate my answer. Tks

Display Images stored on filesystem

Hello,
I have stored photos (JPEG images) in my OS filesystem and trying to create album to view them using BFILE datatype and stored procedure. I would like to diaply one photo on each page withlinks to next and previous photos. I was able to make this working but have still following issues.
- It only shows image for first row. For other rows, the strored procedure doesn't even run.
- The 'Layout and pagination' for report displays more rows on each page, even if I specify "Number of Rows" as 1.
Could you help me fix these issues? Also, if you have better way to do it, I am willing to try.
Thanks.
Following are more details of my setup.
Using Oracle Application Express 3.1.1.00.09 with Oracle 11g on RedHat server.
Table description:
SQL> desc swiss_photos
Name Null? Type
PHOTO_ID NOT NULL NUMBER
PHOTO BINARY FILE LOB
FILENAME VARCHAR2(255)
MIMETYPE VARCHAR2(255)
UPDATE_DATE DATE
DESCRIPTION VARCHAR2(400)
Sample data in table:
SQL> select photo_id, photo, filename from swiss_photos
PHOTO_ID PHOTO FILENAME
3 bfilename('PHOTO_DIR', '2008-0 2008-05-16/img_2101.jpg
5-16/img_2101.jpg')
2 bfilename('PHOTO_DIR', '2008_0 2008_05_16/img_2100.jpg
5_16/img_2100.jpg')
Proceduer to display image:
SQL> select text from user_source where name='DISPLAY_EASY_IMAGE' order by line;
TEXT
procedure display_easy_image( p_id number ) as
s_mime_type varchar2(48);
n_length number;
s_filename varchar2(400);
bfile_loc bfile;
begin
s_mime_type := 'image/jpeg';
--INSERT code to verify if procedure gets executed
insert into test_dei values (p_id);
commit;
select mimetype, dbms_lob.getlength(photo), filename, photo
into s_mime_type, n_length, s_filename, bfile_loc
from swiss_photos
where photo_id = p_id;
owa_util.mime_header(nvl(s_mime_type,'application/octet'), FALSE );
htp.p( 'Content-length: ' || n_length );
htp.p( 'Content-Disposition: filename="' || s_filename || '"' );
owa_util.http_header_close;
wpg_docload.download_file(bfile_loc);
end display_easy_image;
HTML expression of "PHOTO_ID" column for report:
<img src="#OWNER#.display_easy_image?p_id=#PHOTO_ID#" width="700" height="700" />

Hello,
I have stored photos (JPEG images) in my OS filesystem and trying to create album to view them using BFILE datatype and stored procedure. I would like to diaply one photo on each page withlinks to next and previous photos. I was able to make this working but have still following issues.
- It only shows image for first row. For other rows, the strored procedure doesn't even run.
- The 'Layout and pagination' for report displays more rows on each page, even if I specify "Number of Rows" as 1.
Could you help me fix these issues? Also, if you have better way to do it, I am willing to try.
Thanks.
Following are more details of my setup.
Using Oracle Application Express 3.1.1.00.09 with Oracle 11g on RedHat server.
Table description:
SQL> desc swiss_photos
Name Null? Type
PHOTO_ID NOT NULL NUMBER
PHOTO BINARY FILE LOB
FILENAME VARCHAR2(255)
MIMETYPE VARCHAR2(255)
UPDATE_DATE DATE
DESCRIPTION VARCHAR2(400)
Sample data in table:
SQL> select photo_id, photo, filename from swiss_photos
PHOTO_ID PHOTO FILENAME
3 bfilename('PHOTO_DIR', '2008-0 2008-05-16/img_2101.jpg
5-16/img_2101.jpg')
2 bfilename('PHOTO_DIR', '2008_0 2008_05_16/img_2100.jpg
5_16/img_2100.jpg')
Proceduer to display image:
SQL> select text from user_source where name='DISPLAY_EASY_IMAGE' order by line;
TEXT
procedure display_easy_image( p_id number ) as
s_mime_type varchar2(48);
n_length number;
s_filename varchar2(400);
bfile_loc bfile;
begin
s_mime_type := 'image/jpeg';
--INSERT code to verify if procedure gets executed
insert into test_dei values (p_id);
commit;
select mimetype, dbms_lob.getlength(photo), filename, photo
into s_mime_type, n_length, s_filename, bfile_loc
from swiss_photos
where photo_id = p_id;
owa_util.mime_header(nvl(s_mime_type,'application/octet'), FALSE );
htp.p( 'Content-length: ' || n_length );
htp.p( 'Content-Disposition: filename="' || s_filename || '"' );
owa_util.http_header_close;
wpg_docload.download_file(bfile_loc);
end display_easy_image;
HTML expression of "PHOTO_ID" column for report:
<img src="#OWNER#.display_easy_image?p_id=#PHOTO_ID#" width="700" height="700" />

How to display Images stored in a database using javascript

Hi.
I have some images stored in a table and I need to display them using javascript. The images are stored in BLOB columns: I would like to know if I can put them on a directory and then get it from there using BFILENAME function.
Any suggestion?
Regards,
Jeannine

Hi All,
Yes DuraiRaja - i am using the document.getElementById(' ').
In my app, I have a Main controller calling a View - Default.HTM,
This Default.HTM, in turn loads up three trays T1, T2, T3 and these tray elements in turn call up the controllers ctrl1, ctrl2, ctrl3 associated to them.
CTRL1 calls a view - View1 - V1.htm, which has the below code.
And on the below page all that i am trying to do is validate if "FieldVal" is blank or not.
I get an error on IE as "Object required"
I get a HTTP 501/505 error when i try to upload the code.
Thanks all !

Problem in displaying images stored in Blob variable

Hi all,
I have a requirement where i need to retrieve the image stored in Blob variable in DB and display the image in JSP page.
I have written the below code to achieve this, it works fine
In JSP, I am calling a action in the <img tag
<img src='downloadPhoto.page?method=getPhotoInBytes&accessoryModelPictures.id.accessoryNumber=${photo.id.accessoryNumber}/> In my controller class
InputStream inputStream=accessoryPicturesLOB.getPicture().getBinaryStream();
byte[] theBytes = new byte[inputStream.available()];
inputStream.read(theBytes);
response.setContentType("image/jpg");
response.getOutputStream().write(theBytes);But the problem is, *if i right click on the image and select save picture as option i get a error saying "The system cannot find the specified file "*
Can you please tell me what is wrong in my approach/code
Is there any better approach to display image that is store in Blob variable ?
Please help on this.
Thanks in advance.

You need at least to set the filename in the content disposition header.

Display images stored in the database

I have images stored in the databse. I followed the steps provided in the oracle documentation. Now i want to retrive the image from the database into a java object that can be dislayed in , say, a JLabel. I am able to retrieve the image from the database into the OrdImage in the oracle.java.ord package and view the properties of the image. But unable to retrive the image as such to be displayed.
Thanking You
vinay

This might help...
import javax.imageio.*;
import javax.imageio.stream.*;
import javax.swing.*;
import java.awt.*;
import java.sql.*;
import java.io.*;
import oracle.jdbc.driver.*;
import oracle.sql.* ;
import oracle.ord.im.*;
import java.awt.event.*;
public class HelloDBImage implements ActionListener{
OracleConnection con = null;
JLabel label = null;
String textFieldString = "Image ID entered";
public void actionPerformed(ActionEvent e)
String prefix = "You typed \"";
if (e.getActionCommand().equals(textFieldString))
JTextField source = (JTextField)e.getSource();
ImageIcon imgIcon = createImageIcon(source.getText());
if (null != imgIcon)
// Create image Label
label.setText(null);
label.setIcon(imgIcon);
else
label.setIcon(null);
label.setText("Image not found! ");
source.setText("");
label.repaint();
//actionLabel.setText(prefix + source.getText() + "\"");
public ImageIcon createImageIcon(String key)
Image image = null;
ImageIcon imgIcon = null;
try
     // Connect to the database if necessary
if (null == con) con = connect();
// Create Input Stream from DB image.
InputStream is = new BufferedInputStream(
getDBInputStream(con, key));
if (null != is)
// Create Image from Image Input Stream
ImageInputStream iis = ImageIO.createImageInputStream(is);
image = ImageIO.read(iis);
// Create Image Icon from ImageInputStream
if (null != image) imgIcon = new ImageIcon(image);
} catch (Exception e)
System.out.println("exception raised " + e);
     e.printStackTrace();
return imgIcon;
public Component createPanelAndContents(String key)
// Create the image label
ImageIcon imgIcon = createImageIcon(key);
if (null != imgIcon)
// Create image Label
label = new JLabel(imgIcon);
else
label = new JLabel("Image not found! ");
// Create layout
GridBagLayout gridBag = new GridBagLayout();
// Create panel to draw in
JPanel pane = new JPanel();
pane.setLayout(gridBag);
GridBagConstraints c = new GridBagConstraints();
JScrollPane scrollPane = new JScrollPane(label,
JScrollPane.VERTICAL_SCROLLBAR_ALWAYS,
JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS);
c.fill = GridBagConstraints.BOTH;
c.weightx = 1.0;
c.weighty = 1.0;
gridBag.setConstraints(scrollPane, c);
c.gridwidth = GridBagConstraints.REMAINDER;
c.fill = GridBagConstraints.HORIZONTAL;
scrollPane.setMinimumSize(new Dimension(300, 300));
pane.add(scrollPane, c);
// Add a text field and label to get anoter image
JTextField textField = new JTextField(10);
textField.setActionCommand(textFieldString);
textField.addActionListener(this);
// Add fields for input
JLabel promptLabel = new JLabel("Please enter DB key: ");
     pane.add(promptLabel);
pane.add(textField, c);
return pane;
public static void main(String[] args)
String key = "1";
try
UIManager.setLookAndFeel(
UIManager.getCrossPlatformLookAndFeelClassName());
} catch (Exception e) { }
//Create the top-level container and add contents to it.
JFrame frame = new JFrame("SwingApplication");
HelloDBImage app = new HelloDBImage();
if ((args.length > 0) && (args[0] != null)) key = args[0];
System.out.print("length= " + args.length + "/" );
if (args.length > 0) System.out.println(args[0]);
Component contents = app.createPanelAndContents(key);
frame.getContentPane().add(contents, BorderLayout.CENTER);
//Finish setting up the frame, and show it.
frame.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
frame.pack();
frame.setVisible(true);
public InputStream getDBInputStream(OracleConnection con, String key)
InputStream is = null;
try
     int index = 0;
     Statement s = con.createStatement();
     OracleResultSet rs =
     (OracleResultSet)s.executeQuery("select * from images " +
"where item_id = " + key );
     if (rs.next()) // Just get first image if more than 1.
     index = rs.getInt(1);
     OrdImage imgObj =
(OrdImage) rs.getCustomDatum(2, OrdImage.getFactory());
is = imgObj.getContent().getBinaryStream();
catch(Exception e)
System.out.println("exception raised " + e);
e.printStackTrace();
return is;
public OracleConnection connect() throws Exception
String connectString;
Class.forName ("oracle.jdbc.driver.OracleDriver");
connectString = "jdbc:oracle:oci8:@orcl";
OracleConnection con = (OracleConnection)
DriverManager.getConnection(connectString,"scott",
                    "tiger");
con.setAutoCommit(false);
return con;

Cache of Displayed Images Stored in a BLOB

I would like to know how I can cache the data that is an image stored as a blob? This is for when I refresh/revisit/branch to a page taht contains images sourced from a blob, such that it does not compel the browser to regenerate the blob image file data?

Hi!
We use jsp (for example ManagerPhoto.jsp), which is deployed to OC4J:
Blob managerPhoto;
response.reset();
response.setHeader("Content-Disposition", "attachment; filename=manager_photo.jpg");
response.setHeader("cache-control","public");
ServletOutputStream outputStream = response.getOutputStream();
outputStream.write(managerPhoto.getBytes(1, (int)managerPhoto.length()));
out.clear();
out = pageContext.pushBody();
And HTML-code in the page to display an image:
<img width=120 height=149 src=".../ManagerPhoto.jsp?p_orun_id=11">
Regards,
Al.

Displaying image, stored in KM, using HTMLB image UI Element...

Hello all,
I want to display the images in HTMLB UI Element which are stored under KM folder.
Image element requires src field to be filled with URL. So do I need to provide the full path to images including server's host name and port (e.g. http://<server>:<port>/irj/servlet/../KMDocs/..)? or is there any work around for this.....
Thanks in advance.
Amol.

Hi Amol,
Yes there is.
Actually two ways:
1. Use request.getServletRequest.getServerName() and request.getServletRequest.getServerPort()
2. Use the url from "/irj" and forth (then the server and port of the opening window will be used).
Hope that helps,
Yoav.

Encrypted, sparse disk image stored on WebDAV server: problems mounting

My goal is to have secure, encrypted storage to back up my computer to a remote site. The remote site is an internet hosting provider who provides a lot of disk space and bandwidth, and also serves up WebDAV, for a very small price.
I have created a 100GB sparse disk image, with encryption, and stored it on the remote server. I then mount the directory containing the sparseimage (which is itself password protected using .htaccess) using WebDAV. My plan is now to mount the disk image, and use rsync to copy changes on my computer to the disk image.
This worked perfectly when I tested with a small sparseimage. It was interesting how the OS seems to buffer the changes in chunks: rsync appears to be copying a lot of files super fast, then it stalls as network bandwith suddenly throttles up for a while, and they take turns this way.
Unfortunately, after copying a few hundred MBs into the image, I am now having trouble.
First, when I try to mount the disk image, I see an enormous amount of data start transferring over the network. It literally saturates my broadband connection for at least an hour (I haven't been able to go longer yet). It seems to first download at top speed for a while, then switches to uploading at top speed for awhile. During this time, I notice that a mount_webdav process is consuming large perentages of CPU. However I can't see anything else going on at this point -- the disk image isn't mounted yet, all this thrashing seems to be from the process of the image trying to mount.
So first question: is this normal? Does anyonw know what actually happens when you issue "hdiutil attach" on encrypted sparse images? Does it have to touch and read through everything in the image once or twice? Maybe this is just a Bad Idea™
Second: the webdav server always ends up getting disconnected during this process before the image actually gets mounted. Do you think I'm trying to do something that tests, and exceeds, the limits of WebDAV?
Thanks a million for any help!
PowerBook, 1.33 GHz G4, Aluminum, 17" Mac OS X (10.4.8) The remote server is Debian

A follow up to my MS word document. I found that I created the file in MS word 2000, and I used the Apple File Security for OS 9 to encrypt it. I can't remember the password, and I do not find anything in the key chain listing.
I have Pages 08, but I don't think I can use it if I can't remember the password to unlock this old document. Is there a program to decrypt this without a password?
Thanks,
DaisyMay

Display Images stored in KM in a random animated way

Hello Experts!
I need to do in the portal a frame with 4 diferents images (difents size of images) and the images will be stored in KM folder under a taxonomy. In each folder may be more than 1 image and I need to display them animated in a style similar to that of the iTunes Music Store. How can i do that?
Thanks!
Tzitzi

Hi Tzitzi,
The KM navigation iView approach seems a lil too complicated. You can try to simulate the same using the JSP approach which I suggested. For the sake of simplicity, lets assume that the images are now being stored in the jsp component instead of reading from the KM. You can later replace the code to fetch the items from KM instead.
The steps are as follows:
1. Create a Portal application 'BannerRotatorApp' and within it create a JSPDynPageComponent 'BannerRotatorComp'.
2. Under dist->scripts, download and copy the two javascript files available on the link [http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm], namely fadeslideshow.js and jquery.min.js.
3. For now, places all the images you want in the slideshow under dist->images. Name them as img1, img2 and so on.....
4. Simply copy and paste the following code in the JSP file of the banner rotator comp
6. When you run the application, you would get the desired effect. But as I said, the initial code where I read the images from the component itself, could be changed to read the images from the taxonomy in the KM. But I hope you got the gist of it.
Regards,
Prathamesh
Edited by: prathamesh dalvi on Mar 25, 2010 1:22 PM
Edited by: prathamesh dalvi on Mar 25, 2010 1:24 PM
Edited by: prathamesh dalvi on Mar 25, 2010 1:28 PM
Edited by: prathamesh dalvi on Mar 25, 2010 1:29 PM

Displaying Images Stored on a Server In Flex

Similar Messages

Maybe you are looking for