ajaxfileupload multiple inputs on page

I'm using ajaxFileUpload as described here: http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/AjaxFileUpload/AjaxFileUpload.aspx

It is working fine except when I have multiple file upload controls on the same page. Specifically, I am trying to upload different files for different questions. When I upload the first on the page, it works fine, but the one lower down on the page will only upload it's file into the answer for the first question.

I'm not sure that makes sense... so it may help you to know that my page is populated with questions dynamically using ascx files. The document ascx file looks like this:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Document.ascx.cs" Inherits="ScholarshipApplication.controls.questions.Document" %>


<ajaxToolkit:AjaxFileUpload OnUploadComplete="UploadComplete"  ID="FileUploadControl" MaximumNumberOfFiles="1" runat="server" AllowedFileTypes="png,jpg,jpeg,pdf,tiff,tif,gif" />
<asp:LinkButton ID="downloadButton" runat="server" CausesValidation="false" OnClick="downloadButton_Click" />

And the code behind:

public void UploadComplete(object sender, AjaxFileUploadEventArgs e)
        {
            entry.data = e.FileName;
            entry.setDocumentData(e.GetContents());

            this.downloadButton.Text = e.FileName;
        }

My initial thoughts are that somehow I need to help the control's generated javascript to know which question it should be triggering when.

I believe this is a bug in control or this was implemented by some non-obvious reason. Actually, this control doesn't support multiple instances on a page. Consider to use AsyncFileUpload control instead or customize a bit sources of the AjaxFileUpload control. If you prefer second option then you need to download sources from here: http://ajaxcontroltoolkit.codeplex.com/SourceControl/BrowseLatest and change AjaxFileUpload.cs file (here is a path: /Server/AjaxControlToolkit/AjaxFileUpload/AjaxFileUpload.cs). What you need to do is to change ContextKey constant to property for combining context key guid with unique id of control:

public class AjaxFileUpload : ScriptControlBase
{
    private const string ContextKeySuffix = "{DA8BEDC8-B952-4d5d-8CC2-59FE922E2923}";

    private string ContextKey
    {
        get { return this.UniqueID + "_" + ContextKeySuffix; }
    }

Actually, if you'll look on PreRender method of AjaxFileUpload class you'll easy realize reson for such behavior of this control (the first control handle uploads from all sibling controls on a page).

as per my understanding You need a hidden field variable to identify your question id IN UserControl:

<input type="hidden" id="hdnQuestionId" runat="server"/>

while populating/generating question you need to set this variable , and when you upload the doc , fetch this hidden value and use it.

I created a data attribute named "data-upload-type" on ALL AjaxFileUpload controls and set it to the name of the type. Then I set up the client call to grab that value and set a cookie with the same value. The cookie IS received on the server side functions and I branch based on the value I receive.

Here is an example:

function StartUpload(sender, args) {
    var t = $(sender._element).attr('data-upload-type');
    document.cookie = 'upload-type=' + $(sender._element).attr('data-upload-type') + ';';
}

<asp:AjaxFileUpload ID="afuUploader1" runat="server"  OnClientUploadStart="StartUpload" OnUploadComplete="UploadComplete" OnClientUploadComplete="UploadComplete" data-upload-type="UploadType2"></asp:AjaxFileUpload>

Then in your server side upload call simply check Response.Cookies("upload-type"). Works like a charm!

来源：https://stackoverflow.com/questions/14132165/ajaxfileupload-multiple-inputs-on-page

标签

ajaxcontroltoolkit