Display new image on web page

[RuiT]

Hello,

I'm uploading images to a folder and I want to display each new image on a web page every time it is saved in the folder.

I can display the initial image, which is already in the folder, and I can also detect when a new image is saved into the folder but I don't know how to display the new images.

I'm new to web development. Can somebody help me?

Here's the code:

public partial class _Default : System.Web.UI.Page
{
    string DirectoryPath = "C:\\Users\\Desktop\\PhotoUpload\\Uploads\\";
 
    protected void Page_Load(object sender, EventArgs e)
    {
        FileSystemWatcher watcher = new FileSystemWatcher();
 
        try
        {
            watcher.Path = DirectoryPath;
            watcher.Created += new FileSystemEventHandler(watcher_Created);
            watcher.EnableRaisingEvents = true;
 
            Image image = Image.FromFile(DirectoryPath + "inicial.jpg");
            MemoryStream ms = new MemoryStream();
            image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
            byte[] im = ms.ToArray();
 
            Context.Response.ContentType = "Image/JPG";
            Context.Response.BinaryWrite(im);
        }
        catch (Exception ex)
        {
        }
    }
 
    void watcher_Created(object sender, FileSystemEventArgs e)
    {
        Console.WriteLine("File Created: Name: " + e.Name);
 
        try
        {
          //How to display new image?  
        }
        catch (Exception ex)
        {
        }
    }
}

[Frinavale]

You need to periodically post back to the server to check if there are any new photos in the folder. The FileSystemWatcher is going to be useless to you. Even though it can watch the folder, it only does so on the server. The web browser needs to know when there is a new image available and the only way that it can do that is to preform a postback.

Instead of using the FileSystemWatcher, use a DirectoryInfo to figure out what files are in the folder.

You will have to do this every postback, so it would be a good idea to place the code that displays the images into the method that Page Load or Page PreRender event.

It would also be a good idea to use a Repeater or a GridView to display the images. Place an ASP.NET Image control in the Repeater template (or GridView ItemTemplate) ...then create the DataSource for the control based on the files in the folder and bind the image URLs appropriately.

Cheers!

-Frinny

[RuiT]

I'm sorry for my lack of experience or if I didn't explain correctly but I don't understand how FileSystemWatcher is going to be useless to me. You said that it only watches the folder on the server. But I want the solution to be server-side only. The only thing user needs to do is to open the URL on a web browser. The server should replace the old image by the new image every time it is saved on the folder and the page should refresh without any action being performed by the user, so we can watch the sequence of images like a slideshow. Is this possible? Thanks for your time!

[Frinavale]

You are developing an ASP.NET application.

ASP.NET works in a stateless, disconnected environment.

The following must take place for it to work (in this order):

• The web browser makes a request to the server for an ASPX page
• The web server executes the code for the ASPX page.
• The ASPX page (code) dynamically creates HTML
• The HTML is sent to the browser
• The browser receives the HTML and displays it

There is no connection maintained between the web browser and the server (this is what I mean when I say ASP.NET works in a stateless, disconnected environment). Once the HTML is sent to the browser all of the Objects used to generate the HTML are destroyed (hence the stateless part of my statement). The server waits for the next page request...all of the Objects required for the execution are recreated and then destroyed one the response has been sent to the browser.

So if there's no connection open between the server and the browser, how is the browser supposed to know when the server has new images to display?

The browser must make a request to the server to do this.

This can be done automatically without the end user noticing it happening. There is an Ajax control called a Timer that will "tick" and each tick will cause a postback to the server. If you place your images in an UpdatePanel then this will be very smooth and the end user doesn't have to know what's going on (unless you want to indicate something's happening).

As for the slide show thing...you can have the web browser download all of the images but use CSS to hide them (display:none)...and then use JavaScript to show them after some time has passed....

Or you could use the Timer control to post to the server and have the server return the new image....

-Frinny

[RuiT]

Ok, I understand now. Thanks for your clear explanation.

[Frinavale]

If you have any questions regarding the implementation feel free to ask and I'll give you a hand.

Happy coding!

-Frinny