How to save RadBinaryImage to database

9 posts, 0 answers
  1. Emil
    Emil avatar
    19 posts
    Member since:
    Oct 2012

    Posted 03 Dec 2012 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Dec 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Emil
    Emil avatar
    19 posts
    Member since:
    Oct 2012

    Posted 04 Dec 2012 Link to this post

    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?
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Dec 2012 Link to this post

    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.
  6. Emil
    Emil avatar
    19 posts
    Member since:
    Oct 2012

    Posted 05 Dec 2012 Link to this post

    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?
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Dec 2012 Link to this post

    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.
  8. Emil
    Emil avatar
    19 posts
    Member since:
    Oct 2012

    Posted 06 Dec 2012 Link to this post

    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.
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Dec 2012 Link to this post

    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.
  10. Emil
    Emil avatar
    19 posts
    Member since:
    Oct 2012

    Posted 07 Dec 2012 Link to this post

    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?
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017