Fig 1. screenshot of upload control with 4 files

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="55"></RowDefinition>
            <RowDefinition Height="437*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="75"/>
        </Grid.ColumnDefinitions>
        <TextBlock HorizontalAlignment="Left" Margin="5,5,5,0"  Name="textBlock1" 
                   Text="Drag and Drop Files Below" VerticalAlignment="Top" />
        <StackPanel Grid.Column="1" >
            <Button Content="Upload" Name="button1"  Click="button1_Click"  />
            <Button Content="Clear" Margin="0,5,0,0" Click="Button_Click" />
        </StackPanel>
        <ScrollViewer x:Name="ImagesTarget" Background="WhiteSmoke" AllowDrop="True" Grid.ColumnSpan="2" Grid.Row="1">
            <ItemsControl x:Name="ImagesList">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <controlsToolkit:WrapPanel Orientation="Vertical">
                            <Image Source="{Binding Image}" Margin="5" Stretch="Uniform" MaxHeight="100" MaxWidth="100" />
                            <ProgressBar Value="{Binding FileUpload.UploadPercent}" Margin="3" Height="10"/>
                        </controlsToolkit:WrapPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <controlsToolkit:WrapPanel />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </ScrollViewer>

    </Grid>

        public UploadControl()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            ImagesList.ItemsSource = _images; 
            ImagesTarget.Drop += new DragEventHandler(ImagesTarget_Drop);
        }

        void ImagesTarget_Drop(object sender, DragEventArgs e)
        {
            if (e.Data == null) return;

            IDataObject dataObject = e.Data as IDataObject;
            FileInfo[] files = dataObject.GetData(DataFormats.FileDrop) as FileInfo[];

            //create a collection of FilePair for databinding
            foreach (FileInfo file in files)
            {
                try
                {
                    FilePair pair = new FilePair();
                    using (var stream = file.OpenRead())
                    {
                        var imageSource = new BitmapImage();
                        try
                        {
                            imageSource.SetSource(stream);
                        }
                        catch 
                        {   //it is not an image - lets show a default icon
                            imageSource.UriSource = new Uri("unknownfile.png", UriKind.Relative);
                        }
                        pair.Image = imageSource;
                    }
                    pair.FileUpload = new FileUpload(this.Dispatcher, UploadUri, file);
                    _images.Add(pair);
                }
                catch (Exception ex)
                {
                    MessageBox.Show("Unknown error prepping file for upload: \n" + ex.ToString());
                }
            }
        }

1. Creates a Container in Azure for holding uploaded files if it does not already exist.
2. Checks to see if the file already exists in Azure
3. Listens for chunks of an incoming file writing them to a temporary file in the filesystem. I wanted to avoid this step, but I couldn't find a way to append to a file in Azure storage.
4. Writes the file to Azure Storage and deletes the temporary file.

       //the first time this method is called lets make sure our container is setup properly non-authenticated users have permissions 
        // to access files in the Azure container.
        void Initialize(HttpContext ctx)
        {
            CloudBlobClient client = CloudStorageAccount.FromConfigurationSetting("StorageAccount").CreateCloudBlobClient();

            //containers must be lower case - this seems strange to me but I cannot get it to work with uppercase 
            CloudBlobContainer container = new CloudBlobContainer(_containerName, client);
            container.CreateIfNotExist();
            container.SetPermissions(new BlobContainerPermissions() { PublicAccess = BlobContainerPublicAccessType.Blob });
            _container = container;
        }

                CloudBlob blob = Container.GetBlobReference(filename.ToLower());
                try
                {
                    blob.FetchAttributes(); // this will throw an exeception if it does not exist
                    context.Response.Write(blob.Attributes.Properties.Length);  //report the size of the file
                }
                catch (Exception) { context.Response.Write("0"); }  //I don't let checking for existence via exception handling, 
                                                                    // but that was the recommended/only approach on the MSFT blogs.  
                context.Response.Flush();

                       CloudBlob blob = Container.GetBlobReference(filename);
                        blob.UploadFile(filePath);

                        File.Delete(filePath);  //we stored this in a temporary area - delete it now that we are done

                        FileUploadCompletedEventArgs args = new FileUploadCompletedEventArgs(filename, blob.Uri.ToString());
                        FileUploadCompleted(this, args);

1. Show the list of files already on Azure, presumably so you could delete/move/rename them.
2. The ability to pause an upload via the UI
3. Set metadata in Azure storage to futher categorize the files
4. This should really be implemented as a custom control so that the UI can be re-styled more easily.

10 Comments    

Fig 1. Architecture Diagram

[ServiceBehavior(AddressFilterMode = AddressFilterMode.Any)]

0 Comments    

0 Comments    

Fig 1. Old and new architectures

1. My WCF Service was already running on port 80 and I couldn’t find an easy way to port share between with an embedded web server .
2. I considered running Cassini – and then using that to host WCF services, but this isn’t listed as a supported way for hosting WCF and I really didn’t want to go that far out of band .

    //The service contract for the WebServer - Url re-writing is used to simulate 
    //accessing file resources on a normal web server
    [ServiceContract]
    public interface IWebServer
    {

        [OperationContract, WebGet(UriTemplate = "/")]
        Stream Default();

        [OperationContract, WebGet(UriTemplate = "/Images/{imagename}")]
        Stream GetImage(string imageName);

        [OperationContract, WebGet(UriTemplate = "/ClientBin/{xapname}")]
        Stream GetXap(string xapName);
    }

    //WebServer extracts resources out of the Assembly and serves them up via a Stream
    //Note: production code should have improved exception handling in cases where resources cannot be found
    public class WebServer : IWebServer
    {
        public const string AssemblyRootPath = "ServiceHostedSilverlight.";
        public Stream Default()
        {
            WebOperationContext.Current.OutgoingResponse.ContentType = "text/html";
            return Assembly.GetExecutingAssembly().GetManifestResourceStream(AssemblyRootPath + "Default.htm");
        }

        public Stream GetXap(string xapFile)
        {
            WebOperationContext.Current.OutgoingResponse.ContentType = "application/x-silverlight-2";
            return Assembly.GetExecutingAssembly().GetManifestResourceStream(AssemblyRootPath + "ClientBin." + xapFile);
        }

        public Stream GetImage(string imageName)
        {
            string ext = new FileInfo(imageName).Extension.ToLower();
            WebOperationContext.Current.OutgoingResponse.ContentType = "image/" + ext;
            return Assembly.GetExecutingAssembly().GetManifestResourceStream(AssemblyRootPath + "Images." + imageName);
        }
    }

    <behaviors>
      <endpointBehaviors>
        <behavior name="ServiceHostedSilverlight.WebServerEndpointBehavior">
          <webHttp />  <!--Necessary for Http/REST style services-->
        </behavior>
      </endpointBehaviors>
      <serviceBehaviors>
        <behavior name="ServiceHostedSilverlight.WebServerBehavior">
          <serviceMetadata httpGetEnabled="false" /> <!--must be false or the Url re-writing will not work-->
          <serviceDebug httpHelpPageEnabled="false" includeExceptionDetailInFaults="true" />
          <!-- must disable the help page or the default re-written url (/) will not work -->
        </behavior>
        <behavior name="ServiceHostedSilverlight.DataServiceBehavior">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="false" />
        </behavior>
      </serviceBehaviors>
    </behaviors>

Fig 2. Resultant web page

1. A service that syncs data between two enterprise applications – the UI here would be minimal – but a robust log viewer could be presented through Silverlight.
2. The Admin UI for a network service such as a Firewall or Spam filter.
3. Pure configuration dialog instead of directing users to modify app.config settings. Your UI could give you validation and the ability to restart the service after a setting change if necessary.
4. A commercial application you wish to package for quick and easy setup and administration.

3 Comments    

Recent Posts

• In Defense of Portrait Mode
• ModalDialogManager - A simple approach to dealing with modal dialogs in MVVM
• SyncToy 2.1 - A very useful and free tool for syncronizing your files
• Connecting XBox 360 MCE to Windows 7 in a Domain
• Introducing TagBox
• Drag and Drop Upload to Azure Storage via Silverlight 4
• Architecting a Blog Engine for Windows Azure
• Hosting Silverlight Accessible WCF Services in an Azure WebRole
• Embedding Silverlight in a Windows Service
• Welcome to The Silver Method

By Month