Dot Net Thoughts

From Silverlight 2 onwards it supports Open File Dialog, which helps developers to implement upload file logic, with the help of WCF services. Silverlight Open File Dialog offers better control over the existing HTML FileUpload control, like File Filter, File Sizes etc, and it can be managed from client side. Here is a simple implementation of Silverlight uploader with WCF.

Silverlight UI – XAML

<Canvas x:Name="LayoutRoot">
    <StackPanel Margin="10" Background="White" Orientation="Horizontal">
        <TextBlock Text="Select File :" />
        <TextBox Name="txtFileName" Width="200" />
        <Button Name="cmdBrowse" Content="Browse" Click="cmdBrowse_Click" />
        <Button Name="cmdUpload" Content="Upload" Click="cmdUpload_Click" />
    </StackPanel>
</Canvas>

And the code behind

FileInfo fi;
private void cmdBrowse_Click(object sender, RoutedEventArgs e)
{
    //Open File Dialog
    OpenFileDialog dlg = new OpenFileDialog();
    //The _FilterText variable used to control file extentions
    //supported by the Upload control
    dlg.Filter = this._FilterText;
    bool? result = dlg.ShowDialog();
    if (result.HasValue && result.Value)
    {
        this.fi = dlg.File;
        //The _FileSize variable used to control the
        //Maximum Size supported by the control.
        if (this.fi.Length > this._FileSize)
        {
            //Control will fire a FileSizeError event, if the
            //Uploading File Size greater than the specified.
            if (this._onFileSizeError != null)
            {
                this._onFileSizeError(this, EventArgs.Empty);
            }
            return;
        }
        this.txtFileName.Text = this.fi.Name;
    }
}

private void cmdUpload_Click(object sender, RoutedEventArgs e)
{
    //Uploading part.
    if (this.fi != null)
    {
        byte[] buffer = new byte[this.fi.Length];
        using (Stream s = this.fi.OpenRead())
        {
            //Reading the File Content to the Stream.
            //It is using a WCF Service with Upload File method
            s.Read(buffer, 0, buffer.Length);
            ServiceReference1.Service1Client client = new ServiceReference1.Service1Client();
            client.UploadFileCompleted += new EventHandler<System.ComponentModel.AsyncCompletedEventArgs>(client_UploadFileCompleted);
            client.UploadFileAsync(this.fi.Name, buffer);
        }
    }
}

private void client_UploadFileCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
{
    //Application will raise another Event
    //after the completion of the File Upload.
    if (this._onFileUploadCompleted != null)
    {
        this._onFileUploadCompleted(this, EventArgs.Empty);
    }
}

And here is the WCF Service with Upload File method.

//IService1 Interface
[ServiceContract]
public interface IService1
{
    [OperationContract]
    void UploadFile(string fileName, byte[] content);
}

//IService1 Interface implementation
public class Service1 : IService1
{
    public void UploadFile(string fileName, byte[] content)
    {
        using (FileStream sw = File.OpenWrite(Path.Combine(@"C:\Uploads", fileName)))
        {
            sw.Write(content, 0, content.Length);
        }
    }
}

To enable communication between Silverlight and Javascript the “System.Windows.Browser” namespace is used. Which supports various attributes and methods, will expose the properties and events of the silverlight application to the Javascript.

public MainPage()
{
    InitializeComponent();
    //This method enables the scripting support to the Application.
    //From Javascript developer can access the Properties and events
    //like SilverlightObj.Content.Page.Property
    HtmlPage.RegisterScriptableObject("Page", this);
}

private string _FilterText = "Text Files|*.txt";
private int _FileSize = 1000;
private event EventHandler _onFileSizeError;
private event EventHandler _onFileUploadCompleted;

//This attribute used to expose the Property to Client side.
//From Javascript : ctrl.Content.Page.FileSize = 2000;
[ScriptableMember]
public int FileSize
{
    get
    {
        return this._FileSize;
    }
    set
    {
        this._FileSize = value;
    }
}
[ScriptableMember]
public string Filter
{
    get
    {
        return this._FilterText;
    }
    set
    {
        this._FilterText = value;
    }
}

[ScriptableMemberAttribute]
public EventHandler OnFileSizeError
{
    get
    {
        return this._onFileSizeError;
    }
    set
    {
        this._onFileSizeError = value;
    }
}

[ScriptableMemberAttribute]
public EventHandler OnFileUploadCompleted
{
    get
    {
        return this._onFileUploadCompleted;
    }
    set
    {
        this._onFileUploadCompleted = value;
    }
}

And in the Javascript, the property can access and can modify it.

function onPluginLoaded() {
    var ctrl = document.getElementById("silverlightControlHost1");
    ctrl.Content.Page.Filter = "Image Files|*.jpg;*.gif;*.png|All Files(*.*)|*.*";
    ctrl.Content.Page.FileSize = 20000;
    ctrl.Content.Page.OnFileSizeError = function () {
        alert("File Size should be less than 2 KB");
    };
    ctrl.Content.Page.OnFileUploadCompleted = function () {
        alert("Uploaded successfully !");
    };
}

And the HTML Part – Here the onLoad parameter will assign the Javascript to execute on loading of the silverlight application.

<object id="silverlightControlHost1" data="data:application/x-silverlight-2," type="application/x-silverlight-2"
    width="100%" height="100%">
    <param name="onLoad" value="onPluginLoaded" />
</object>

And here is the screen shot, of the same running on my Windows 7 machine.

Silverlight File Uploader

Please let me know your comments and feedbacks. Happy Programming.