How to save RadBinaryImage to database

[Emil]

I have a RadBinaryImage control which is displaying an image loaded using RadAsyncUpload.

I have an SQL table containing a 'Photo' column (image data type). How to pass the RadBinaryImage to the insert function which look like this:

Private Sub InsertPhotoIntoDB()
        Dim sMyConn As String = My.Settings.appDBConnString
        Dim myConnection As SqlConnection
        Dim myCommand As New SqlCommand
        myConnection = New SqlConnection(sMyConn)

        myConnection.Open()

        myCommand = New SqlCommand("INSERT INTO Photos(Photo) VALUES(@Photo)")
        myCommand.Connection = myConnection

        myCommand.Parameters.Add("@Photo", SqlDbType.Image, 0, "Photo")
        myCommand.Parameters("@Photo").Value = WhatDoIPutHere???

        myCommand.ExecuteNonQuery()

        myConnection.Close()
        myConnection.Dispose()
End Sub

[Princy]

Hello,

Please take a look into the following code that I tried to save the RadBinaryImage into the database.

ASPX:

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" OnFileUploaded="RadAsyncUpload1_FileUploaded">
</telerik:RadAsyncUpload>
<telerik:RadBinaryImage ID="RadBinaryImage1" runat="server"  />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="button" />

VB:

Protected Sub Button1_Click(sender As Object, e As EventArgs)
        Dim sMyConn As String = My.Settings.appDBConnString
        Dim myConnection As SqlConnection
        Dim myCommand As New SqlCommand
        myConnection = New SqlConnection(sMyConn)

        myConnection.Open()

        myCommand = New SqlCommand("INSERT INTO Photos(Photo) VALUES(@Photo)")
        myCommand.Connection = myConnection

        myCommand.Parameters.Add("@Photo", SqlDbType.Image).Value = RadBinaryImage1.DataValue

        myCommand.ExecuteNonQuery()

        myConnection.Close()
        myConnection.Dispose()

End Sub

Protected Sub RadAsyncUpload1_FileUploaded(sender As Object, e As FileUploadedEventArgs)
    Dim image As Byte()
    Dim fileLength As Long = RadAsyncUpload1.UploadedFiles(0).InputStream.Length
    image = New Byte(fileLength - 1) {}
    RadAsyncUpload1.UploadedFiles(0).InputStream.Read(image, 0, image.Length)
    RadBinaryImage1.DataValue = image
End Sub

Hope this helps.

Regards,
Princy.

[Emil]

Thank you for the reply!

But, I get an error:

The parameterized query '(@Photo image)INSERT INTO Photos (Photo) VALUES (@Photo)' expects parameter '@Photo', which was not supplied.

Do I need to convert RadBinaryImage1.DataValue to image?

[Princy]

Hi Emil,

I could replicate the issue when the DataValue of the RadBinaryImage is not set. Please make sure that you are setting the DataValue of the RadBinaryImage when the RadAsyncUpload file is uploaded.

VB:

Protected Sub RadAsyncUpload1_FileUploaded(sender As Object, e As FileUploadedEventArgs)
    Dim image As Byte()
    Dim fileLength As Long = RadAsyncUpload1.UploadedFiles(0).InputStream.Length
    image = New Byte(fileLength - 1) {}
    RadAsyncUpload1.UploadedFiles(0).InputStream.Read(image, 0, image.Length)
    RadBinaryImage1.DataValue = image
End Sub

Hope this helps.

Regards,
Princy.

[Emil]

Hello Princy,

Still doesn't work!

To select the image and display it in a RadBinaryImage, I'm using a modified version of this code:
http://demos.telerik.com/aspnet-ajax/asyncupload/examples/ajaxprocessing/defaultcs.aspx

The code below is in a RadWindow, in RadTabStrip/RadMultiPage tab, if it make any difference.

Here is the code I'm using:

<div class="binary-image">
   <telerik:RadBinaryImage runat="server" Width="640px" Height="400px" ResizeMode="Fit"
       ID="RadBinaryImage1" ImageUrl="~/Images/Other/blank_picture.jpg" AlternateText="the photo" CssClass="binary-image" ImageAlign="Middle" />
   </div>
   <span class="invalid"></span>
   <div class="upload">
   <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" MaxFileInputsCount="1" OnClientFileUploaded="fileUploaded"
       OnFileUploaded="RadAsyncUpload1_FileUploaded" AllowedFileExtensions="jpeg,jpg,gif,png,bmp" OnClientValidationFailed="validationFailed">
       <Localization Select="Choose photo..." />
   </telerik:RadAsyncUpload>
</div>

The JavaScript:

<script type="text/javascript">
     function fileUploaded(sender, args) {
         $find('RadAjaxManager1').ajaxRequest();
         $telerik.$(".invalid").html("");
         setTimeout(function () {
             sender.deleteFileInputAt(0);
         }, 10);
     }

     function validationFailed(sender, args) {
         $telerik.$(".invalid")
             .html("Invalid extension, please choose an image file!");
         sender.deleteFileInputAt(0);
         $find('RadAjaxManager1').ajaxRequest('a');
     }
</script>

To upload and display, I'm using the exact sub, you provided:

Protected Sub RadAsyncUpload1_FileUploaded(sender As Object, e As FileUploadedEventArgs)
    Dim image As Byte()
    Dim fileLength As Long = RadAsyncUpload1.UploadedFiles(0).InputStream.Length
    image = New Byte(fileLength - 1) {}
    RadAsyncUpload1.UploadedFiles(0).InputStream.Read(image, 0, image.Length)
    RadBinaryImage1.DataValue = image
End Sub

Could it be that the RadBinaryImage1 data is not persisted? If so, how can I persist it in a temporary file?

[Princy]

Hi,

One suggestion is that you can save the image to the database on the AjaxRequest of RadAjaxManager. Following is the sample code that worked as expected at my end.

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadBinaryImage1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" MaxFileInputsCount="1" OnClientFileUploaded="fileUploaded" OnFileUploaded="RadAsyncUpload1_FileUploaded" AllowedFileExtensions="jpeg,jpg,gif,png,bmp" OnClientValidationFailed="validationFailed">
    <Localization Select="Choose photo..." />
</telerik:RadAsyncUpload>
<telerik:RadBinaryImage runat="server" Width="640px" Height="400px" ResizeMode="Fit" ImageUrl="~/Images/Other/blank_picture.jpg" ID="RadBinaryImage1" AlternateText="the photo" ImageAlign="Middle" />

VB:

Protected Sub RadAsyncUpload1_FileUploaded(sender As Object, e As FileUploadedEventArgs)
    Dim image As Byte()
    Dim fileLength As Long = RadAsyncUpload1.UploadedFiles(0).InputStream.Length
    image = New Byte(fileLength - 1) {}
    RadAsyncUpload1.UploadedFiles(0).InputStream.Read(image, 0, image.Length)
    RadBinaryImage1.DataValue = image
End Sub

Protected Sub RadAjaxManager1_AjaxRequest(sender As Object, e As AjaxRequestEventArgs)
        Dim sMyConn As String = My.Settings.appDBConnString
        Dim myConnection As SqlConnection
        Dim myCommand As New SqlCommand
        myConnection = New SqlConnection(sMyConn)

        myConnection.Open()

        myCommand = New SqlCommand("INSERT INTO Photos(Photo) VALUES(@Photo)")
        myCommand.Connection = myConnection

        myCommand.Parameters.Add("@Photo", SqlDbType.Image).Value = RadBinaryImage1.DataValue

        myCommand.ExecuteNonQuery()

        myConnection.Close()
        myConnection.Dispose()
End Sub

JS:

<script type="text/javascript">
    function fileUploaded(sender, args) {
        $find('RadAjaxManager1').ajaxRequest();
        $telerik.$(".invalid").html("");
        setTimeout(function () {
            sender.deleteFileInputAt(0);
        }, 10);
    }

    function validationFailed(sender, args) {
        $telerik.$(".invalid")
             .html("Invalid extension, please choose an image file!");
        sender.deleteFileInputAt(0);
        $find('RadAjaxManager1').ajaxRequest('a');
    }
</script>

Hope this helps.

Regards,
Princy.

[Emil]

Thank you, Princy.

I don't need to save (insert) my photo right away. I choose to save it in a temp folder, then (if needed) read it in a byte array and insert it in the database.

[Princy]

Hi Emil,

The DataValue is a property which specifies the source field from which the data will be passed as a byte array. This value is used only when the control is bound. After that the value is deleted and there is no way how you can retrieve it. One workaround is that you can save the DataValue of the RadBinaryImage in a HiddenField and can load it into the database on click of a button. Following is the sample code that I tried.

ASPX:

<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />

VB:

Protected Sub RadAsyncUpload1_FileUploaded(sender As Object, e As FileUploadedEventArgs)
    Dim image As Byte()
    Dim fileLength As Long = RadAsyncUpload1.UploadedFiles(0).InputStream.Length
    image = New Byte(fileLength - 1) {}
    RadAsyncUpload1.UploadedFiles(0).InputStream.Read(image, 0, image.Length)
    RadBinaryImage1.DataValue = image
    HiddenField1.Value = image.ToString()
End Sub
Protected Sub Button1_Click(sender As Object, e As EventArgs)
    Dim sMyConn As String = My.Settings.appDBConnString
        Dim myConnection As SqlConnection
        Dim myCommand As New SqlCommand
        myConnection = New SqlConnection(sMyConn)

        myConnection.Open()

        myCommand = New SqlCommand("INSERT INTO Photos(Photo) VALUES(@Photo)")
        myCommand.Connection = myConnection
        Dim array As Byte() = Encoding.ASCII.GetBytes(HiddenField1.Value)
        myCommand.Parameters.Add("@Photo", SqlDbType.Image).Value = array

        myCommand.ExecuteNonQuery()

        myConnection.Close()
        myConnection.Dispose()
End Sub

Hope this helps.

Regards,
Princy.

[Emil]

Thank you, Princy.

I don't know why, but HiddenField1.Value doesn't keept its value when I try to convert/save it to the database.
I've tried to declare a Private page variable but with the same result. Is it from the postback?