You are here:   Blog
Register   |  Login

Sep 1

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

image

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.

image

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

image

This opens the Select File Dialog.

We use the Browse button to select a local file.

image

We click the OK button to upload the file.

image

The file will be uploaded and the picture will display.

 

image

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

 

image

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

image

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.

image

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

image

In the wizard we select WCF RIA Service.

image

We Add Reference.

image

We add a reference to our WCF RIA Service.

image

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).

image

We select the Entity (table) and click Finish.

image

The table will show.

image

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

image

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)

1 comment(s) so far...


Gravatar

Re: A Visual Studio LightSwitch Picture File Manager

I recommend you to take a look at this explorer file manager. You can set up your own file server for managing and sharing files through web browser. It's like DropBox but self-hosted so that you can keep all your confidential files on your own server. The web based UI looks and feels like Windows 7 Explorer. It offers features that are not possible with a FTP server such as zipping files, downloading multiple files and folders in single download etc. It's also easier to set up and administrate than a FTP server.

By simoness on   12/18/2012 11:27 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation