MVC Ajax Uploader

Last post 03-01-2013, 12:16 PM by Kenneth. 5 replies.
Sort Posts: Previous Next
  •  02-28-2013, 11:33 AM 76948

    MVC Ajax Uploader

    I am testing your ajax uploader before we buy it, and I encountered several problems on my tests.

    Here are the issues I need to solve.

     

    I am using  the MVC Uploader, with the Multiple file upload on, and MVC version 4.

     

    1. Is there a way to pass data from javascript to UploadHandler.ashx before a the file is uploaded, or after the file are selected?

     

    2. I tried to render the MVC Uploader in partial view that exist on my main view 4 times and got an error :

     

    Microsoft JScript runtime error: global event handler error #CuteWebUI_AjaxUploader_OnQueueUI : Unable to get value of the property 'FileName': object is null or undefined

     

     When I render the

       @{Html.BeginForm();}
                        @Html.Raw(ViewBag.uploaderhtml)
    @{Html.EndForm();} 

     

    on the main view it's work fine, but on the partial view I get the error above.

     

    3. The queue list always have ALL the file I uploaded and not just the last files I upload.

        even if I try to clean the rows with Jquery Script, the queue is cleaned but when I start a new upload, again it's show ALL the files

        I uploaded, is there a way to avoid that?

     

    4. If in the UploadHandler.ashx OnFileUploaded(MvcUploadFile file) event I try to move the uploaded file (from temp directory) into another directory (or copy and delete it)  I get an error "File does not exist : {file guid} "

    I want to move it in order to clean the temp directory and put it in the right place

     

    5.  is there a way to avoid using UploadHandler.ashx and post the file into the mvc controller?

     

    Thanks in advance

     

    Avi. 


     

     

     

  •  02-28-2013, 12:55 PM 76949 in reply to 76948

    Re: MVC Ajax Uploader

    Hi Avi,

     

    1. Is there a way to pass data from javascript to UploadHandler.ashx before a the file is uploaded, or after the file are selected?
     

    I suggest you handle the upload file in the controller directly. So you can pass the value to the controller directly.

     

    refer to the example below, you can save/move or do other control of the upload file directly.

     

    public ActionResult Start_uploading_manually(string myuploader)
                {
                      using (CuteWebUI.MvcUploader uploader = new CuteWebUI.MvcUploader(System.Web.HttpContext.Current))
                      {
                            uploader.UploadUrl = Response.ApplyAppPathModifier("~/UploadHandler.ashx");
                            //the data of the uploader will render as <input type='hidden' name='myuploader'> 
                            uploader.Name = "myuploader";
                            uploader.AllowedFileExtensions = "*.jpg,*.gif,*.png,*.bmp,*.zip,*.rar";
                            uploader.MaxSizeKB = 1024;
                            uploader.ManualStartUpload = true;
                            uploader.InsertText = "Browse Files (Max 1M)";
                                         //prepair html code for the view
                            ViewData["uploaderhtml"] = uploader.Render();
                   
                            //if it's HTTP POST:
                            if (!string.IsNullOrEmpty(myuploader))
                            {
                                  //for single file , the value is guid string
                                  Guid fileguid = new Guid(myuploader);
                                  CuteWebUI.MvcUploadFile file = uploader.GetUploadedFile(fileguid);
                                  if (file != null)
                                  {
                                        //you should validate it here:
                                        //now the file is in temporary directory, you need move it to target location
                                        //file.MoveTo("~/myfolder/" + file.FileName);
                                        //set the output message
                                        ViewData["UploadedMessage"] = "The file " + file.FileName + " has been processed.";
                                  }
                            }
                      }
                      return View();
                }

    2. I tried to render the MVC Uploader in partial view that exist on my main view 4 times and got an error :
     
    Microsoft JScript runtime error: global event handler error #CuteWebUI_AjaxUploader_OnQueueUI : Unable to get value of the property 'FileName': object is null or undefined
     
     When I render the
       @{Html.BeginForm();}
                        @Html.Raw(ViewBag.uploaderhtml)
    @{Html.EndForm();} 
     
    on the main view it's work fine, but on the partial view I get the error above.
     

    can you create an example which can reproduce this issue and send it to Kenneth@CuteSoft.net? So I can check the code directly. 


    3. The queue list always have ALL the file I uploaded and not just the last files I upload.
        even if I try to clean the rows with Jquery Script, the queue is cleaned but when I start a new upload, again it's show ALL the files
        I uploaded, is there a way to avoid that?
     
    4. If in the UploadHandler.ashx OnFileUploaded(MvcUploadFile file) event I try to move the uploaded file (from temp directory) into another directory (or copy and delete it)  I get an error "File does not exist : {file guid} "
    I want to move it in order to clean the temp directory and put it in the right place
     

    please refer to the example in question 1, you can use method "MoveTo" to save the upload file, and this method will clean the temp files too.


    5.  is there a way to avoid using UploadHandler.ashx and post the file into the mvc controller?

     

    Please refer to the example in question 1, you can handle the upload file directly in the controller.

     

    Regards,

     

    Ken
     

  •  02-28-2013, 2:33 PM 76952 in reply to 76949

    Re: MVC Ajax Uploader

    Hi Ken

     

    Thanks for the quick reply.

     

    If I understand your suggestion in the sample code you gave,

    if I want the controller will get the Post when then file done uploding I need

    to submit the form in which the ajax upload render.

     

    The problem is that I can't submit my view at all, because my module is a partial view and

    it's part of another main view, if I submit it, the main view will lose user editing data.

    all my module is using jquery ajax in order to perform saving data to database.

     

    I need to keep my view as is and not refresh or submit it to server. 

     

    I will try to send you sample for issue 2 ASAP.

     

    thanks,

     

    Avi. 

     

     

     

  •  02-28-2013, 2:49 PM 76953 in reply to 76952

    Re: MVC Ajax Uploader

    Hi,

     

    To achieve this, you do not need to submit the form. you can refer to example page "multiple_files_upload". it has the same code. 

     

    1. public ActionResult multiple_files_upload(string myuploader)  
    2.         {  
    3.             using (CuteWebUI.MvcUploader uploader = new CuteWebUI.MvcUploader(System.Web.HttpContext.Current))  
    4.             {  
    5.                 uploader.UploadUrl = Response.ApplyAppPathModifier("~/UploadHandler.ashx");  
    6.                 //the data of the uploader will render as <input type='hidden' name='myuploader'>   
    7.                 uploader.Name = "myuploader";  
    8.                 uploader.AllowedFileExtensions = "*.jpg,*.gif,*.png,*.bmp,*.zip,*.rar";  
    9.                 //allow select multiple files  
    10.                 uploader.MultipleFilesUpload = true;  
    11.                 //tell uploader attach a button  
    12.                 uploader.InsertButtonID = "uploadbutton";  
    13.                 //prepair html code for the view  
    14.                 ViewData["uploaderhtml"] = uploader.Render();  
    15.                 //if it's HTTP POST:  
    16.                 if (!string.IsNullOrEmpty(myuploader))  
    17.                 {  
    18.                     List<string> processedfiles = new List<string>();  
    19.                     //for multiple files , the value is string : guid/guid/guid   
    20.                     foreach (string strguid in myuploader.Split('/'))  
    21.                     {  
    22.                         Guid fileguid = new Guid(strguid);  
    23.                         CuteWebUI.MvcUploadFile file = uploader.GetUploadedFile(fileguid);  
    24.                         if (file != null)  
    25.                         {  
    26.                             //you should validate it here:  
    27.                             //now the file is in temporary directory, you need move it to target location  
    28.                             //file.MoveTo("~/myfolder/" + file.FileName);  
    29.                             processedfiles.Add(file.FileName);  
    30.                         }  
    31.                     }  
    32.                     if (processedfiles.Count > 0)  
    33.                     {  
    34.                         ViewData["UploadedMessage"] = string.Join(",", processedfiles.ToArray()) + " have been processed.";  
    35.                     }  
    36.                 }  
    37.             }  
    38.             return View();  
    39.         }  
     

    Regards,

     

    Ken 

  •  02-28-2013, 3:36 PM 76954 in reply to 76953

    Re: MVC Ajax Uploader

    Hi Ken

     

    Thanks for the reply,

    I will check the multi file upload code sample.

     

    do you have the same sample code also for MVC4?

    I don't have MVC3 installed yet.

     

    thanks

    Avi 

  •  03-01-2013, 12:16 PM 76967 in reply to 76954

    Re: MVC Ajax Uploader

    Hi aviweiss,

     

    You can find the mvc4 example code in the demo download package.

     

     mvc4_cs_razor, mvc4_cs

     

    Regards,

     

    Ken 

View as RSS news feed in XML