QUERCUS BLOG
Industry Insights from Our Experts

Tag Archives: Database

Save an Image from the Database to the File System with LightSwitch

Comments Off
Filed under .NET, LightSwitch, SharePoint

I recently saw an forum posting where someone asked how to save a LightSwitch Image value to a desktop file. After some poking around the web, here is a solution that I found to achieve this…

The goal is this; provide functionality that allows a user to take an Image value stored in a LightSwitch table, and save that image as a file to the user’s computer.

Seems simple enough. I come from a Windows Forms, and ASP.Net development background, and not so much a Silverlight background. So, I was pleasantly perplexed (I like “P” words) when trying to take that image from the LightSwitch database stream it to a file on the file system.

The SilverLight Challenge

With that thinking in mind I attempted to tackle the problem via the Image class from the System.Drawing namespace in the System.Drawing.dll assembly. With that Image class I thought I could take that image data in my database, a byte array, and convert it to an image format that I can then save as a file. But guess what, that System.Drawing.dll assembly can’t be used in a  Silverlight project – well according to Visual Studio anyway.

So, now my dilemma is to figure out how to get that image data into some kind of image type object that I can then save to the file system. With an ever optimistic view on life, and a fundamental belief that anything is possible, I fired up the trusty search engines and started scouring the net for info. I knew there had to be an answer out there.

…and lookie what I found…

ImageTools to the rescue. ImageTools (http://imagetools.codeplex.com) is an open source project that produces a library of tools for working with images in Silverlight development.

Cool! Let’s give it a try then.

I downloaded the bits, opened my LightSwitch solution in File View, and referenced a few of the ImageTools assemblies into my LightSwitch Client project…

With that little bit of infrastructure set up, I created a little table titled ImageUpload. This table will hold the name of an image, and the image itself…

Next, I created a simple List Details screen, and added a Method data item named SaveImage to the screen…

With that method item added to my screen definition, I drag a drop the element onto the screen design…

Now I need to wire this method up to do what I want, which is save the image from the selected ImageUpload record to my computer’s file system. To do that, I right-click the newly added screen item, and select to Edit Execute Code…

And in the code for the SaveImageToComputer_Execute() method, I apply the following (the whole class is shown here)…

using System;
using System.Linq;
using System.IO;
using System.IO.IsolatedStorage;
using System.Collections.Generic;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using Microsoft.LightSwitch;
using Microsoft.LightSwitch.Framework.Client;
using Microsoft.LightSwitch.Presentation;
using Microsoft.LightSwitch.Presentation.Extensions;
using Microsoft.LightSwitch.Threading;
using ImageTools;
using ImageTools.IO;
using ImageTools.IO.Png;
using ImageTools.IO.Jpeg;
using ImageTools.IO.Bmp;
using ImageTools.IO.Gif;
using ImageTools.Helpers;

namespace LightSwitchApplication
{
    public partial class ImageUploadsListDetail
    {

        partial void SaveImageToComputer_Execute()
        {
            Encoders.AddEncoderImageTools.IO.Png.PngEncoder();
            Encoders.AddEncoderImageTools.IO.Jpeg.JpegEncoder();
            Encoders.AddEncoderImageTools.IO.Bmp.BmpEncoder();

            // Write your code here.
            Dispatchers.Main.Invoke(() =
            {
                string imageName = this.ImageUploads.SelectedItem.ImageName;

                // get the LightSwitch image value and save it to a memory stream. 
                MemoryStream stream = new MemoryStream(this.ImageUploads.SelectedItem.UploadImage);

                // add the stream to a BitmapImage object. 
                BitmapImage myImage = new BitmapImage();
                myImage.SetSource(stream);

                // create a WritableBitmap, because we can use with the ImageTools stuff,
                // and use the BitmapImage object.
                WriteableBitmap writableBitmap = new WriteableBitmap(myImage);
                ExtendedImage extendedImage = new ExtendedImage();
                extendedImage = writableBitmap.ToImage();

                // now instantiate a SaveFileDialog, and apply image file filters to it, 
                // as well as a default file name.
                SaveFileDialog dialog = new SaveFileDialog();
                dialog.Filter = "Png Image|*.png|JPeg Image|*.jpg|Bitmap Image|*.bmp";
                dialog.DefaultFileName = imageName;

                // show the dialog to the user.
                if (dialog.ShowDialog() == true)
                {
                    // FileStream the file created by the user using the dialog.
                    using (Stream fileStream = dialog.OpenFile())
                    {
                        // instantiate an ImageTools ImageEncoder object.
                        IImageEncoder encoder = null;

                        // check which filter was selected by the user, then
                        // use the appropriate encoder for it.
                        switch (dialog.FilterIndex)
                        {
                            case 1: 
                                encoder = new PngEncoder();
                                break;
                            case 2:
                                encoder = new JpegEncoder();
                                break;
                            case 3:
                                encoder = new BmpEncoder();
                                break;
                        }

                        // encode the image and place it in the file stream.
                        encoder.Encode(extendedImage, fileStream);

                        // write the file to the file system.
                        stream.WriteTo(fileStream);
                    }
                }
            });
         }
    }
}

Note the using statements

The code is pretty self explanatory, so I am not going to waste time typing out what each line does. You can figure that part out.

Now, when I run the app, I am able to successfully save the image as a file on my computer, neat!

Cool!

Okay, now the caveat!

This example works fine for a Desktop (out of browser)  based LightSwitch application. If you want to do the same for a web application (in browser) then you will need to do some tweaking. Remember, this is a Silverlight based application, which brings up some trust elevation issues that need dealing with. For more information on elevating trust for an in browser LightSwitch application, check out this great article by Jewel Lambert on how you might be able to achieve this – http://dotnetlore.com/how-to-use-previously-out-of-browser-only-features-in-lightswitch-for-in-browser-apps-with-vs-11-beta/

Now for lunch!

Let me know how it works out for you.

Cheers!

Article source: http://www.paulspatterson.com/technology/lightswitch/db-image-to-file-system/

The Official Release of Visual Studio 2012 LightSwitch HTML Client

Comments Off
Filed under .NET, LightSwitch, Productivity

Helping People Do Their Jobs Better, Quercus Solutions Inc

Visual Studio 2012 Update 2 has been officially released. This means that the RTM of the new LightSwitch HTML client tools. This update will give developers the ability to create HTML5 and Javascript clients using Visual Studio LightSwitch.

MSDNHTMLLightSwitch

A few important resources for you the look in to:

LSTagCloud003

Enjoy!

 

Copyright 2017 by Quercus Solutions
Login