ASP.NET - dynamically add async upload control to html table

Asked By Anandh Ramanujam on 16-Jun-11 06:17 AM
HI,

I tried to add async upload control dynamically to the html table collection in the button event.

here is my code

      hdnWorkingDocCount.Value = (Convert.ToInt32(hdnWorkingDocCount.Value) + 1).ToString();
      TableCell cell = new TableCell();
      cell.ID = "cell" + hdnWorkingDocCount.Value;
      TableRow row = new TableRow();
      row.ID = "row" + hdnWorkingDocCount.Value;
      AsyncFileUpload fileUpload = new AsyncFileUpload();
      fileUpload.ID = "AsyncFileUploadWD" + hdnWorkingDocCount.Value;
      fileUpload.UploaderStyle = AjaxControlToolkit.AsyncFileUpload.UploaderStyleEnum.Traditional;
      fileUpload.UploadingBackColor = System.Drawing.Color.FromName("#CCFFFF");
      fileUpload.Width = Unit.Percentage(100.00);
      fileUpload.UploadedComplete += new EventHandler<AsyncFileUploadEventArgs>(FileUploadComplete);
      cell.Controls.Add(fileUpload);
      row.Cells.Add(cell);
      tblWorkingDocument.Rows.Add(row);

When I try to click the button, on the first time it will create the control, but after that the control is not created.

And also, when i try to upload file on the dynamically created control, it reports error like 'unknown server error occurred'.

Can anybody help me in this regard.

thanks
Ravi S replied to Anandh Ramanujam on 16-Jun-11 07:45 AM
HI

use AJAX asynFileupload control

refer the link

http://www.telerik.com/community/forums/aspnet-ajax/upload/async-upload-item-control-display-problem.aspx
http://www.telerik.com/community/forums/aspnet-ajax/upload/async-upload-item-control-display-problem.aspx
Jitendra Faye replied to Anandh Ramanujam on 16-Jun-11 11:33 AM

file upload using JQuery plug-in. Ajax file upload plug-in  allows us to upload files to server.


<script type="text/javascript">
    $(function() {
      //Function to upload file.
      new AjaxUpload('#uploadFile', {
        action: 'FileUploadHandler.upload',
        name: 'upload',
        onComplete: function(file) {
          $('<div><img src="../../Content/delete.jpg" style="width:20px;height:20px" class="delete"/>' + file + '</div>').appendTo('#fileList');
          $('#uploadStatus').html("Upload Done.");
        },
        onSubmit: function(file, ext) {
          if (!(ext && /^(txt|doc|docx|xls|pdf)$/i.test(ext))) {
            alert('Invalid File Format.');
            return false;
          }
          $('#uploadStatus').html("Uploading...");
        }
      });
      //Function to delete uploaded file in server.
      $('img').live("click", function() { $('#uploadStatus').html("Deleting"); ; deleteFile($(this)); });
    });
    function deleteFile(objfile) {
      $.ajax({ url: 'FileUploadHandler.upload?del=' + objfile.parent().text(), success: function() { objfile.parent().hide(); } });
      $('#uploadStatus').html("Deleted");
    }
</script>


follow this also-
http://www.c-sharpcorner.com/UploadFile/satisharveti/745/

Eric replied to Anandh Ramanujam on 07-Aug-11 05:17 AM
add 

            fileUpload.ThrobberID = "myThrobber";
            fileUpload.EnableViewState = false;
            fileUpload.PersistFile = true;

to your file upload?