Silverlight to Sharepoint – Upload Image

Upload images to Sharepoint using Silverlight and SPAPI (a link to the code in a txt file for easier copying-silverlightImageUpload.txt (5.53 kb) )

This little piece of code is a Silverlight control that will place an image into a Sharepoint folder. After the upload, a thumbnail of that image is placed into the UI for feedback to the user. It uses the opensource Javascript to Sharepoint library, SPAPI, http://darrenjohnstone.net/2008/07/22/ a-cros....

In the Html that holds your Silverlight object definition, include the two SPAPI files Core and Imaging. The function sendImageToSharepoint will be used by your Silverlight object after it has been told what image to send to Sharepoint. I keep mine in another javascript file and it's also part of a larger object, I've placed just the piece used to upload here because the rest of that object doesn't apply here.

html------------------------------------------------

  <script src="scripts/SPAPI_Core.js" type="text/javascript"></script>
    <script src="scripts/SPAPI_Imaging.js" type="text/javascript"></script>
<script type="text/javascript">
    sendImageToSharepoint: function(strListName, strFolder, bytes, fileName) {
        var lists = new SPAPI_Imaging(labstools.sharepointUrl);
        var returned = lists.upload(strListName, strFolder, bytes, fileName, true);
        if (returned.status != 200) {

            alert("There was an error: " + returned.statusText);

        };

    }
</script>

In the Silverlight UserControl XAML file, place this StackPanel, it will be your user's point of interaction with the control. The second StackPanel, imagestorage, is used to place the thumbnail image.

Xaml--------------------------------------------------

<StackPanel Orientation="Horizontal" Margin="0,5,0,0">
    <TextBlock Text="Attach Images(s):" TextWrapping="Wrap" Width="100"/>
    <TextBox x:Name="ImageFile" TextWrapping="Wrap" Width="211"/>
    <Button x:Name="btnUploadImage" Width="75" OnClick="bOpenFileDialog" Content="Browse" Style="{StaticResource styleA}" Height="25" Margin="5,0,0,0"/>
</StackPanel>
<StackPanel x:Name=" imagestorage" />

In the Silverlight UserControl XAML code behind file, place this code, it is the Click event handler for btnUploadimage.. The Javascript function that is used to communicate with SPAPI is in a Namespace called labsSurveyQues, so you can see that being initialized in this code as well. One piece that isn't shown here, is where the EventHandler was added for CompositionTarget_Rendering, this piece of code syncronizes with the UI to place the thumbnail. I got this from Jeff Prosise's Blog, http://www.wintellect.com/CS/blogs/jprosise/archive/2008/10/24/cool-silverlight-trick-5.aspx

behind Xaml:------------------------------------------------

 Private Sub bOpenFileDialog(sender as Object, evt as EventArgs)
        ' Create an instance of the open file dialog box.
        Dim openFileDialog1 As OpenFileDialog = New OpenFileDialog
        Dim so As ScriptObject = TryCast(HtmlPage.Window.Eval("labsSurveyQues"), ScriptObject)

        ' Set filter options and filter index.
        openFileDialog1.Filter = "Image Files (*.png, *.jpg, *.jpeg)|*.png;*.jpg;*.jpeg"
        openFileDialog1.FilterIndex = 1

        openFileDialog1.Multiselect = True

        ' Call the ShowDialog method to show the dialogbox.
        Dim UserClickedOK As Boolean = openFileDialog1.ShowDialog

            ' Process input if the user clicked OK.
        If (UserClickedOK = True) Then
           
            _files.Clear()
            For Each file1 As FileInfo In openFileDialog1.Files

                    Dim tb As New TextBlock
                    tb.Text = openFileDialog1.File.Name
                    tb.Name = "image_" + imagestorage.Children.Count.ToString()

                    Dim testextension As String = tb.Text.ToLower()
                    If testextension.Contains("jpg") Or testextension.Contains("jpeg") Or testextension.Contains("png") Then
                        imagestorage.Children.Add(tb)

                    '' ''Open the selected file to read.
                    Dim fileStream As System.IO.Stream = openFileDialog1.File.OpenRead
                    Dim binary As BinaryReader = New BinaryReader(fileStream)
                    Dim imgB() As Byte = binary.ReadBytes(fileStream.Length)
                    fileStream.Close()

                    'send the binary stream to the script that will put it out to the server for me
                    so.Invoke("sendImageToSharepoint", "PictureLibrary", "", Convert.ToBase64String(imgB), file1.Name)

                    _files.Enqueue(file1) 'displays to the UI

                End If
            Next
        End If
    End Sub

    Private _files As New Queue(Of FileInfo)()
       Private Sub CompositionTarget_Rendering(ByVal sender As [Object], ByVal e As EventArgs)
        Dim imagestorage As StackPanel = DirectCast(FindControls.RecursiveFindControl(controlspanel.Children, "imagestorage"), StackPanel)
        If _files.Count <> 0 And imagestorage IsNot Nothing Then
            Dim fi As FileInfo = _files.Dequeue()
            Using stream As Stream = fi.OpenRead()
                Dim bi As New BitmapImage()
                bi.SetSource(stream)
                Dim Img As New Image
                Img.Source = bi
                imagestorage.Children.Add(Img)
            End Using
        End If
    End Sub