How to extend the RadAsyncUpload handler

6 posts, 0 answers
  1. Dwayne
    Dwayne avatar
    41 posts
    Member since:
    Jun 2009

    Posted 21 Sep 2010 Link to this post

    I am trying to extend the the rad async uploader to do something similar to the demo but i am not having any luck with getting the custom configuartions  before inseting the image. The example i was trying to follow was this
    http://demos.telerik.com/aspnet-ajax/upload/examples/async/imageuploader/defaultvb.aspx

  2. Dwayne
    Dwayne avatar
    41 posts
    Member since:
    Jun 2009

    Posted 21 Sep 2010 Link to this post

    I have played with the coed until my block is the return of the IAsyncUploadResult since i am accesing them in this fashion

    i get no value returned from 'args.get_fileInfo().i_id; '

    i_id is the id of my image id returend from my the DB i see the new id it never gets to the client .

    <script type="text/javascript">
         //<![CDATA[
         function fileUploaded(sender, args) {
             var id = args.get_fileInfo().i_id;
             alert(id);
             $(".imageContainer")
                 .empty()
                 .append($("<img />")
                         .attr("src", getImageUrl(id))
                         .attr("id ", "newimages4d"));
            
             $(".info")
                 .html(String.format("<strong>{0}</strong> succesfully insterted. Record ID - {1}", args.get_fileName(), id));
         }
         function getImageUrl(id) {
            
             var url = window.location.href;
             var handler = "StreamImage.ashx?i_id=" + id;
             var index = url.lastIndexOf("/");
             var completeUrl = url.substring(0, index + 1) + handler;
             return completeUrl
         }
         function clientDeleting(sender, args) {
             
             var index = args.get_rowIndex();
             $(".imageContainer img:eq(" + index + ")").remove();
         }
         //]]>
     </script>

  3. Dwayne
    Dwayne avatar
    41 posts
    Member since:
    Jun 2009

    Posted 21 Sep 2010 Link to this post

    I have noticed that after the insert is complete - MyAsyncUploadResult  is empty with all ???? for  with no paramteres. 
     but i don't  know if my declaration is correct. i have included my  process insert statment, the config class, and  the

     

    MyAsyncUploadResult set.        


    Public Class MyAsyncUploadResult
        Inherits AsyncUploadResult
        Private _i_id As Integer
      
        Private _i_desc As String
      
        Private _i_image As System.Data.Linq.Binary
      
        Private _i_user_name As String
      
        Private _i_fk_post_Id As System.Nullable(Of Integer)
      
      
        Public Property i_id() As Integer
            Get
                Return Me._i_id
            End Get
            Set(ByVal value As Integer)
                If ((Me._i_id = value) _
                   = False) Then
                    Me._i_id = value
                End If
            End Set
        End Property
      
        Public Property i_desc() As String
            Get
                Return Me._i_desc
            End Get
            Set(ByVal value As String)
                If (String.Equals(Me._i_desc, value) = False) Then
                    Me._i_desc = value
                End If
            End Set
        End Property
      
        Public Property i_image() As System.Data.Linq.Binary
            Get
                Return Me._i_image
            End Get
            Set(ByVal value As System.Data.Linq.Binary)
                If (Object.Equals(Me._i_image, value) = False) Then
                    Me._i_image = value
                End If
            End Set
        End Property
      
      
        Public Property i_user_name() As String
            Get
                Return Me._i_user_name
            End Get
            Set(ByVal value As String)
                If (String.Equals(Me._i_user_name, value) = False) Then
                    Me._i_user_name = value
                End If
            End Set
        End Property
      
        Public Property i_fk_post_Id() As System.Nullable(Of Integer)
            Get
                Return Me._i_fk_post_Id
            End Get
            Set(ByVal value As System.Nullable(Of Integer))
                If (Me._i_fk_post_Id.Equals(value) = False) Then
                    Me._i_fk_post_Id = value
                End If
            End Set
        End Property
    End Class
      
    ' The upload configuration object is passed from the page to the custom handler.
    ' You can customize it to include custom properties by extending the AsyncUploadConfiguration class.
    ' In this case we send the ID of the currently logged-in user to be stored in the database as the auther of the image.
    Public Class MyAsyncUploadConfiguration
        Inherits AsyncUploadConfiguration
        Private _i_id As Integer
      
        Private _i_desc As String
      
        Private _i_image As System.Data.Linq.Binary
      
        Private _i_user_name As String
      
        Private _i_fk_post_Id As System.Nullable(Of Integer)
      
      
      
        Public Property i_id() As Integer
            Get
                Return Me._i_id
            End Get
            Set(ByVal value As Integer)
                If ((Me._i_id = value) _
                   = False) Then
                    Me._i_id = value
                End If
            End Set
        End Property
      
      
        Public Property i_desc() As String
            Get
                Return Me._i_desc
            End Get
            Set(ByVal value As String)
                If (String.Equals(Me._i_desc, value) = False) Then
                    Me._i_desc = value
                End If
            End Set
        End Property
      
        Public Property i_image() As System.Data.Linq.Binary
            Get
                Return Me._i_image
            End Get
            Set(ByVal value As System.Data.Linq.Binary)
                If (Object.Equals(Me._i_image, value) = False) Then
                    Me._i_image = value
                End If
            End Set
        End Property
      
      
        Public Property i_user_name() As String
            Get
                Return Me._i_user_name
            End Get
            Set(ByVal value As String)
                If (String.Equals(Me._i_user_name, value) = False) Then
                    Me._i_user_name = value
                End If
            End Set
        End Property
      
      
        Public Property i_fk_post_Id() As System.Nullable(Of Integer)
            Get
                Return Me._i_fk_post_Id
            End Get
            Set(ByVal value As System.Nullable(Of Integer))
                If (Me._i_fk_post_Id.Equals(value) = False) Then
                    Me._i_fk_post_Id = value
                End If
            End Set
        End Property
    End Class

     

          ' Call the base Process method to save the file to the temporary folder
          ' base.Process(file, context, configuration, tempFileName);
          ' Populate the default (base) result into an object of type SampleAsyncUploadResult
          Dim result As MyAsyncUploadResult = CreateDefaultUploadResult(Of MyAsyncUploadResult)(file)
          Dim vals As New localhost._sp_ImagesResult
          Dim userID As Integer = -1
          ' You can obtain any custom information passed from the page via casting the configuration parameter to your custom class
          Dim myConfiguration As MyAsyncUploadConfiguration = TryCast(configuration, MyAsyncUploadConfiguration)
          Dim imageData As Byte() = GetImageBytes(File.InputStream)
          If myConfiguration IsNot Nothing Then
              vals.i_desc = myConfiguration.i_desc
              vals.i_fk_post_Id = myConfiguration.i_fk_post_Id
              vals.i_user_name = myConfiguration.i_user_name
          End If
          ' Populate any additional fields into the upload result.
          ' The upload result is available both on the client and on the server
          result.i_id = InsertImage(file, vals)
          Return result
      End Function
      Public Function InsertImage(ByVal file As UploadedFile, ByVal vals As localhost._sp_ImagesResult) As Integer
          Dim connectionString As String = System.Configuration.ConfigurationManager.ConnectionStrings("4dpeepsconnect").ConnectionString
          Using conn As New SqlConnection(connectionString)
              Dim cmdText As String = "insert into images ( i_desc , i_image,i_user_name ,i_fk_post_Id )  values (@i_desc ,@i_image ,@i_user_name ,@i_fk_post_Id)   SET @Identity = SCOPE_IDENTITY()"
              Dim cmd As New SqlCommand(cmdText, conn)
              Dim imageData As Byte() = GetImageBytes(file.InputStream)
              Dim identityParam As New SqlParameter("@Identity", SqlDbType.Int, 0, "i_id")
              identityParam.Direction = ParameterDirection.Output
              cmd.Parameters.AddWithValue("@i_image", imageData)
              cmd.Parameters.AddWithValue("@i_desc", file.GetName())
              cmd.Parameters.AddWithValue("@i_fk_post_Id", 0)
              cmd.Parameters.AddWithValue("@i_user_name", My.User.Name)
              cmd.Parameters.Add(identityParam)
              conn.Open()
              cmd.ExecuteNonQuery()
              Return CInt(identityParam.Value)
          End Using
      End Function




    attached is an img of the error msg

  4. Dwayne
    Dwayne avatar
    41 posts
    Member since:
    Jun 2009

    Posted 22 Sep 2010 Link to this post

    after a little more debugging  i found out that the src of the image was incorrect. But now comes the question how do i delete the unwanted images from the database  i extened the functionality by adding a delete handler  and keep track of the id so when the user deletes the image i clear the text and delet the image from the database. I am only allowing one image per upload but this can be done for multiple images if you set the image id to the database id and use that to delete the selected user image
     My ending javascript looks like this .


        <script type="text/javascript">
            //<![CDATA[
            var id;
            function fileUploaded(sender, args) {
                id = args.get_fileInfo().i_id;
      
                $(".imageContainer")
                    .empty()
                    .append($("<img />")
                            .attr("src", getImageUrl(id)));
                // alert(getImageUrl(id));
                $(".info")
                    .html(String.format("<strong>{0}</strong> succesfully insterted. Record ID - {1}", args.get_fileName(), id));
      
            }
      
            function getImageUrl(id) {
      
                var url = window.location.href;
      
                var handler = "StreamImage.ashx?i_id=" + id;
                var index = url.lastIndexOf("/");
      
                var completeUrl = url.substring(0, index + 1) + handler;
                //  alert(completeUrl);
                return completeUrl
            }
      
            function clientDeleting(sender, args) {
      
                var index = args.get_rowIndex();
                $(".imageContainer img:eq(" + index + ")").remove();
                alert(id);
      
                $(".imageContainer")
      
                    .append($("<img />")
                            .attr("src", DeleteImageUrl(id)))
                    .empty();
      
      
                $(".info")
                    .html(String.format("", "", ""));
            }
      
      
            function DeleteImageUrl(id) {
      
                var url = window.location.href;
      
                var handler = "DeleteStream.ashx?i_id=" + id;
                var index = url.lastIndexOf("/");
                var completeUrl = url.substring(0, index + 1) + handler;
                //  alert(completeUrl);
                return completeUrl
            }
            //]]>
        </script>
      
    </telerik:RadCodeBlock>
    <div class="imageContainer">
    </div>
    <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" HttpHandlerUrl="~/UserControls/uploadControl/Handler.ashx"
        OnClientFileUploaded="fileUploaded" OnClientDeleting="clientDeleting" FocusOnLoad="True"
        InputSize="30" MaxFileInputsCount="1" Skin="Telerik">
    </telerik:RadAsyncUpload>
    <span class="info"></span>
    <h5>
        <span>Only the last Image Uploaded will be used</span></h5>

  5. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1549 posts
    Member since:
    Sep 2012

    Posted 24 Sep 2010 Link to this post

    Hello Dwayne,

    We will update the images demo so that it features a deletion from the database. Meanwhile, thank you for sharing this approach with the community, it seems to work fine. For that matter I've updated your telerik points.

    Kind regards,
    Genady Sergeev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  6. Dwayne
    Dwayne avatar
    41 posts
    Member since:
    Jun 2009

    Posted 25 Sep 2010 Link to this post

    Hello Genady ,
     Thank you. I wished you had a way to code so addition functionality such as a   
     
    OnClientEdit or some type of event

    So  we can do and update of the picture. for eq. I have one picture  I have no image input so to replace the picture you must delete and insert a new pic if we had that new ability i could grab the id of the file already loaded and do an update same goes for the multiple pictures  a input dialogue could be given with a return of the the new image to repaint the div with the new image and updated msge and id 

     since i am using one image at a time I was going to trying to use a tool tip   so i can try to pass it to the new page ,a new radloader could  use an edit handler to  update the image  but i need a way to pass the image id back from the tool tip  and reload the new image and  or update the msg  so i fall sort on that approach but I will play with it a little

    Sincerely Dwayne

Back to Top