Sep 1

Written by: Michael Washington
9/1/2012 8:38 AM 

Visual Studio LightSwitch has the capability to allow you to create a picture file manager that will upload files to the server hard drive and display them in the user interface. This article builds on the previous article: Saving Files To File System With LightSwitch (Uploading Files). The difference is that in this article the pictures uploaded are displayed and you have the ability to delete them.

To add pictures, we click the “+” button.

This opens the Select File Dialog.

We use the Browse button to select a local file.

We click the OK button to upload the file.

The file will be uploaded and the picture will display.

 

To delete a file, we select the picture and click the “-“ button.

 

A “X” will show next to each picture selected for deletion.

When the Save button is clicked the pictures marked for deletion will be deleted.

WCF RIA Service

To enable the functionality to view and delete files, we use a WCF RIA Service.

You can find more information on creating WCF RIA Services at the following links:

WCF RIA Service: Combining Two Tables

Using WCF RIA Services In LightSwitch To Simplify Your Application UI

In the WCF RIA Service, a class is created to pass the data between the service and LightSwitch:

 

public class FileRecord
{
    [Key]
    public string FileName { get; set; }
    public byte[] FileImage { get; set; }
} 

 

Note that the image will be stored as a byte[]. When the WCF RIA Service is imported into LightSwitch we will change the field type in LightSwitch to Image.

The following code reads the files in the server hard drive and creates a collection of FileRecords:

 

   public FileDomainService()
    {
        _LocalFiles = new List<FileRecord>();
        string strFileDirectory = GetFileDirectory();
        EnsureDirectory(new System.IO.DirectoryInfo(strFileDirectory));
        // Add all directories at this directory.
        DirectoryInfo objDirectoryInfo = new DirectoryInfo(strFileDirectory);
        string FolderName = objDirectoryInfo.Name;
        // Get the files in the directory
        foreach (var fi in objDirectoryInfo.EnumerateFiles().OrderBy(x => x.Name))
        {
            FileRecord objFileRecord = new FileRecord();
            objFileRecord.FileName = fi.Name;
            // Load Image
            string strPath = string.Format(@"{0}\{1}", strFileDirectory, fi.Name);
            FileStream sourceFile = new FileStream(strPath, FileMode.Open);
            long FileSize;
            FileSize = sourceFile.Length;
            byte[] getContent = new byte[(int)FileSize];
            sourceFile.Read(getContent, 0, (int)sourceFile.Length);
            sourceFile.Close();
            objFileRecord.FileImage = getContent; 
            // Add file to the collection
            _LocalFiles.Add(objFileRecord);
        }
    }

 

The following method will be called by LightSwitch to retrieve the FileRecords:

 

    [Query(IsDefault = true)]
    public IQueryable<FileRecord> GetFileRecords()
    {
        return _LocalFiles.AsQueryable();
    }

 

The following method will be  called by LightSwitch to delete files:

 

    public void DeleteFile(FileRecord objFileRecord)
    {
        // Look for the file
        var objFile = (from LocalFiles in _LocalFiles
                       where LocalFiles.FileName == objFileRecord.FileName
                       select LocalFiles).FirstOrDefault();
        if (objFile != null)
        {
            string strFileDirectory = GetFileDirectory();
            File.Delete(Path.Combine(strFileDirectory, objFile.FileName));
        }
    }

 

The presence of a method with the word delete in it that takes a single FileRecord as a parameter is all that is needed by LightSwitch to automatically enable the delete capability when the WCF RIA Service is imported into LightSwitch.

To import the service into LightSwitch we right-click on Data Sources, and we Add Data Source.

In the wizard we select WCF RIA Service.

We Add Reference.

We add a reference to our WCF RIA Service.

We can now select the service.

Note: If you do not see your service make sure your WCF RIA Service is ASP.NET 4.0 not ASP.NET 4.5 (go into properties in the WCF RIA Service to change it).

We select the Entity (table) and click Finish.

The table will show.

We must open the table and switch the FileImage property from Binary to Image (and save the changes).

We are now able to add the table to any LightSwitch screen and select a Image Viewer to display the pictures.

The ability to view and delete pictures is handled automatically by the WCF RIA Service.

Uploading pictures (and downloading) is covered in the following articles:

Help Desk: An Advanced Visual Studio LightSwitch Application

Saving Files To File System With LightSwitch (Uploading Files

 

Advanced File Management

This example is suitable for a small amount of files. It reads all the files in the Files directory each time. If you have a lot of files, it is better to simply store the file names in the database when they are uploaded and display a list of the files from the database. The WCF RIA Service can still be used to display the pictures but it would get its list of files from the database rather than reading the list of files directly from the file system. The article Help Desk: An Advanced Visual Studio LightSwitch Application has an example of this.

 

Links

Help Desk: An Advanced Visual Studio LightSwitch Application

WCF RIA Service: Combining Two Tables

Using WCF RIA Services In LightSwitch To Simplify Your Application UI

Saving Files To File System With LightSwitch (Uploading Files

 

 

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(note: When you deploy the application, you must give permission to the web server process to access the files on the file system)