This is a migrated thread and some comments may be shown as answers.

How to save RadBinaryImage to database

8 Answers 351 Views
BinaryImage
This is a migrated thread and some comments may be shown as answers.
Emil
Top achievements
Rank 2
Emil asked on 03 Dec 2012, 10:33 PM
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

8 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 04 Dec 2012, 07:17 AM
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.
0
Emil
Top achievements
Rank 2
answered on 04 Dec 2012, 10:24 AM
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?
0
Princy
Top achievements
Rank 2
answered on 05 Dec 2012, 05:10 AM
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.
0
Emil
Top achievements
Rank 2
answered on 05 Dec 2012, 10:38 AM
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?
0
Princy
Top achievements
Rank 2
answered on 06 Dec 2012, 05:57 AM
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.
0
Emil
Top achievements
Rank 2
answered on 06 Dec 2012, 11:58 AM
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.
0
Princy
Top achievements
Rank 2
answered on 07 Dec 2012, 05:17 AM
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.
0
Emil
Top achievements
Rank 2
answered on 07 Dec 2012, 08:37 AM
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?
Tags
BinaryImage
Asked by
Emil
Top achievements
Rank 2
Answers by
Princy
Top achievements
Rank 2
Emil
Top achievements
Rank 2
Share this question
or