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

How to extend the RadAsyncUpload handler

5 Answers 261 Views
Upload (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Dwayne
Top achievements
Rank 1
Dwayne asked on 21 Sep 2010, 04:03 PM
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

5 Answers, 1 is accepted

Sort by
0
Dwayne
Top achievements
Rank 1
answered on 21 Sep 2010, 06:58 PM
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>
0
Dwayne
Top achievements
Rank 1
answered on 21 Sep 2010, 08:54 PM

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
0
Dwayne
Top achievements
Rank 1
answered on 22 Sep 2010, 11:22 AM
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>
0
Genady Sergeev
Telerik team
answered on 24 Sep 2010, 12:36 PM
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
0
Dwayne
Top achievements
Rank 1
answered on 25 Sep 2010, 05:10 AM
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
Tags
Upload (Obsolete)
Asked by
Dwayne
Top achievements
Rank 1
Answers by
Dwayne
Top achievements
Rank 1
Genady Sergeev
Telerik team
Share this question
or