Custom Http Handler, Asyncupload and additional fields

[Gianluca]

Hi all,
I'm implementing a file upload with direct access to DB with custom http handler. I read all the samples but I dont understand how to add an additional description field that the user have to write before sent the file.
I have to implement a page like this http://demos.telerik.com/aspnet-ajax/asyncupload/examples/imageuploader/defaultcs.aspx adding a description textbox, sent this value with the handler and save all to DB.

It's this possible?

Thanks,
Gianluca

[Princy]

Hi

One suggestion is that you can add additional fields as explained in the following demo.
Upload / Additional Fields

Thanks,
Princy

[Gianluca]

Thanks but...this is the old method with upload...and it isnt what I'm searching for.
I want to use async upload with not page post...so, this is why I'd to use custom http handlers

[Princy]

Hi,

I suppose you want to add additional fields to the RadAsyncUpload. Please take a look into this demo.

Hope this helps.

Regards,
Princy.

[Gianluca]

Hi, this sample don't solve my problem...
I've a texboxt for description and asyncupload component and then I want to save description with the custom configuration...but I dont understand how to do.

[Princy]

Hi,

I am not sure about your scenario. I suppose you want to add the additional textbox and get the value in the code behind. Following is the sample code that I tried to achieve the scenario.

ASPX:

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientFileUploaded="onClientFileUploaded" MultipleFileSelection="Automatic" />
<asp:Button ID="Button1" OnClick="btnRedirect_Click" runat="server" Text="submit" />

JS:

<script type="text/javascript">
    function onClientFileUploaded(radAsyncUpload, args) {
        var row = args.get_row(),
        inputName = radAsyncUpload.getAdditionalFieldID("TextBox"),
        inputType = "text",
        inputID = inputName,
        input = createInput(inputType, inputID, inputName),
        label = createLabel(inputID),
        br = document.createElement("br");

        row.appendChild(br);
        row.appendChild(label);
        row.appendChild(input);
    }

    function createInput(inputType, inputID, inputName) {
        var input = document.createElement("input");

        input.setAttribute("type", inputType);
        input.setAttribute("id", inputID);
        input.setAttribute("name", inputName);

        return input;
    }

    function createLabel(forArrt) {
        var label = document.createElement("label");

        label.setAttribute("for", forArrt);
        label.innerHTML = "File info: ";

        return label;
    }
</script>

C#:

protected void Button1_Click(object sender, System.EventArgs e)
{
    foreach (UploadedFile file in RadAsyncUpload1.UploadedFiles)
    {
        UploadedFile f = file;
        string s= file.GetFieldValue("TextBox").ToString();
        //Custom Code to save file and description to the database
    }
}

Hope this helps.

Regards,
Princy.

[Gianluca]

Thanks but this dont help me...I post one sample.

ASPX PageLoad

protected void Page_Load(object sender, EventArgs e)
{
  AsyncUploadConfiguration config =
                AsyncUpload1.CreateDefaultUploadConfiguration<AsyncUploadConfiguration>();

            config.ID = idFattibilita;

            AsyncUpload1.UploadConfiguration = config;
}

ASPX

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
    function selected(sender, args) {
        $telerik.$(args.get_row()).addClass("ruUploading");
    }
        </script>
</telerik:RadCodeBlock>

 <style type="text/css">
    .ruUploadProgress, li .ruCancel, li .ruRemove
    {
        visibility:hidden;
    }
    li.ruUploading
    {
        height:1px;
    }
 </style>

<table border="0">
<tr>
    <td>Description</td>
    <td><telerik:RadTextBox ID="txtDescription" runat="server" InputType="Text"  /></td>
    <td></td>
    <td valign="middle">
        <telerik:RadAsyncUpload runat="server" ID="AsyncUpload1"
                                DisablePlugins="true"
                                UploadedFilesRendering="BelowFileInput"
                                DisableChunkUpload="true"
                                onfileuploaded="AsyncUpload1_FileUploaded"
                                OnClientFileSelected="selected"
                                HttpHandlerUrl="~/CustomHandlers/Docs.ashx">
        </telerik:RadAsyncUpload>
    </td>
</tr>
</table>

CodeBehind:

protected void AsyncUpload1_FileUploaded(object sender, Telerik.Web.UI.FileUploadedEventArgs e)
{
    AsyncUploadResult result = e.UploadResult as AsyncUploadResult;
}

Handler:

public class Handler : AsyncUploadHandler, IRequiresSessionState
    {
        protected override IAsyncUploadResult Process(UploadedFile file,HttpContext context,IAsyncUploadConfiguration configuration,string tempFileName)
        {
            AsyncUploadResult result = CreateDefaultUploadResult<AsyncUploadResult>(file);

            AsyncUploadConfiguration fConfiguration = configuration as AsyncUploadConfiguration;

            string nameFile = string.Empty;
            string fullNameFile = string.Empty;

            nameFile = string.Format("{0}" + file.GetExtension(), Guid.NewGuid());
            fullNameFile = Path.Combine(context.Server.MapPath(<code>), nameFile);
            file.SaveAs(fullNameFile);

            result.DocumentID = InsertDocument(Configuration.ID, null, nameFile);

            return result;
        }

        public long? InsertDocument(int ID, int Description,string Filename)
        {

            long? retval=null;
            <code>
            return retval;
        }
    }

Configuration

public class AsyncUploadConfiguration : AsyncUploadConfiguration
    {
        private long id;
        public long ID
        {
            get
            {
                return id;
            }

            set
            {
                id = value;
            }
        }

        private string description;
        public string Description
        {
            get
            {
                return description;
            }

            set
            {
                description = value;
            }
        }
    }

Result

public class AsyncUploadResult : AsyncUploadResult
   {
       private long? documentID;
       public long? DocumentID
       {
           get { return documentID; }
           set { documentID = value; }
       }
   }

I've change copying the name of methods and classes for privacy, so you can find some problems running the code.
My problem if after selecting one single file to attach the description written in textbox.
Thanks for any suggestion

[Plamen]

Hi Gianluca,

 
You can use the value of the field in the onClientFileUploading event by using Query String Parameters.

Hope this will be helpful.

Regards,
Plamen
the Telerik team

[Gianluca]

Thanks!!! That's great and works very fine!

Only another question because there is a problem with server event FileUploaded: I see that every time I upload a file, this event add a file upload response.
For sample...I've sent a file, and fileuploaded was called one time, then I sent another file and Fileuploaded was called twice and uploaded result have all data.
There is a method to solve this problem?

[Plamen]

Hello Gianluca,

 
It is not quite clear to me what exactly is the unusual behavior you explain but I will clarify that -the server-side FileUploaded occurs after a file is uploaded and a postback is triggered as it is mentioned here. 
If you observe some unusual issue with it please provide the exact steps to reproduce it so we could inspect it and be more helpful.

Greetings,
Plamen
the Telerik team

[Rajan]

I am trying to create a http handler inside a Custom Control e.g. 

namespace Common.Controls
{
    /// <summary>
    /// Summary description for Handler
    /// </summary>
    public class Handler : AsyncUploadHandler, System.Web.SessionState.IRequiresSessionState
    {
    }
}

Is it really possible to use this Handler in web application? When i tried to register the handler in web.config, i get below Message

 "RadAsyncUpload handler is registered succesfully, however, it may not be accessed directly." 

Can someone please help? 

 

[Plamen]

Hi,

The error that you observe is seen when there are no files in the request. in this case it is not executed from the upload and should not proceed.

Regards,
Plamen
Telerik