Display list of images from azure files in mvc

Question

I have the list of image files from azure files storage and can able to get through below code

CloudStorageAccount storageAccount = CloudStorageAccount.Parse(CloudConfigurationManager.GetSetting("StorageConnectionString"));
CloudFileClient fileClient = storageAccount.CreateCloudFileClient();
CloudFileShare share = fileClient.GetShareReference(ConfigurationManager.AppSettings["ShareReference"]);
if (share.Exists())
{
    CloudFileDirectory rootDir = share.GetRootDirectoryReference();
    CloudFileDirectory sampleDir = rootDir.GetDirectoryReference("freedom/" + DocName);
    if (sampleDir.Exists())
    {
        IEnumerable<IListFileItem> fileList = sampleDir.ListFilesAndDirectories();
                   //
    }

}

But I am unable to find a way to how I can bind this to model without downloading it in project so that I can show the png as thumbnail in my view.

This is how I am getting all the list in filelist

Answer 1

There are multiple ways to achieve the same:

• Best way to deal with this problem is to create a thumbnail of the actual image while storing it to Blob storage . Further in the screen,you can download the thumbnail of the image to memory stream and display it. This would save a lot of network traffic.

Check this link for additional reference:

https://github.com/MicrosoftDocs/azure-docs/blob/master/articles/event-grid/resize-images-on-storage-blob-upload-event.md

Alternativey , you can write your own code of creating thumbnail like below:

 public static System.Drawing.Bitmap ResizeImage(System.Drawing.Image image, int width, int height) 
    { 
        //a holder for the result 
        Bitmap result = new Bitmap(width, height); 

        //use a graphics object to draw the resized image into the bitmap 
        using (Graphics graphics = Graphics.FromImage(result)) 
        { 
            //set the resize quality modes to high quality 
            graphics.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality; 
            graphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; 
            graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; 
            //draw the image into the target bitmap 
            graphics.DrawImage(image, 0, 0, result.Width, result.Height); 
        } 

        //return the resulting bitmap 
        return result; 
    } 

Reference:

C# Creating thumbnail (low quality and big size problem)

• Another option is to download the image to memory stream and display it in the control, but this would take a lot of network bandwidth.

Reference:

https://www.c-sharpcorner.com/article/mvc-display-image-from-byte-array/

Hope it helps.