[Solved] Problem with MVC Upload Control -- file names are duplicated

[David]

Please help.

I have attached a screenshot of the malfunction I've experienced.  I'm trying to upload 2 files, but I see 8 files (note that 4 of them are repeated).  The files are never actually uploaded.  I'm using MVC2.

View Code:

<% using(Html.BeginForm("ProcessUploadSelect", "Auction", FormMethod.Post, new {id="uploadForm", enctype="multipart/form-data"})) { %>
        <p class="note">
            ---------<br />
            VERSION 2<br />
            Select image files to upload.


            <%= Html.Telerik().Upload()
                    .Name("attachments")
                    .Async(async => async
                        .Save("Save", "Auction")
                        .Remove("Remove","Auction")
                        .AutoUpload(true)
                    )
                    .Multiple(true)
            %>
        </p>
    <%
    } %>

Controller Code:

public ActionResult Remove(string auctionId, string[] fileNames)
        {
            foreach (var fullName in fileNames)
            {
                var fileName = Path.GetFileName(fullName);
                var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);

                // TODO: Verify user permissions
                if (System.IO.File.Exists(physicalPath))
                {
                    System.IO.File.Delete(physicalPath);
                }
            }

            // Return an empty string to signify success
            return Content("");
        }
        public ActionResult Save(IEnumerable<System.Web.HttpPostedFileBase> attachments)
        {
            // The Name of the Upload component is "attachments"
            foreach (var file in attachments)
            {
                // Some browsers send file names with full path. We only care about the file name.
                var fileName = Path.GetFileName(file.FileName);
                var destinationPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);

                file.SaveAs(destinationPath);
            }

            // Return an empty string to signify success
            return Content("");
        }

[Georgi Tunev]

Hi David,

You are the first to report such problem and at this point we cannot tell what might be the reason for it. Do you experience the same problem in any of our online demos? If so, please let us know what is your exact browser version and provide reproduction steps.
Your code looks OK, so if you experience the problem only in project, please send us a sample one that reproduces it so we can investigate further.

Best wishes,
Georgi Tunev
the Telerik team

[David]

Georgi,

Thanks for checking the code.  Your website samples are working perfectly.

I may not have time to create a project to reproduce the problem.  I went with your synchronous uploader and it appears to be working.

Windows Vista Home Premium SP2 32-Bit
Visual Studio 2010 Ultimate
Firefox 7.01
Chrome 14.0.835.202 m

Your asynchronous uploader is very snazzy, but I can't put any more time into it.  I was hoping you had a quick work-around, but if not, don't worry.

[Georgi Tunev]

Hello again David,

I'm sorry that we were not able to help you in this case, but it is good to know, that the sync uploader fits your scenario. I'll write back in this forum thread if someone else reports such problem and we are able to reproduce it.


Regards,
Georgi Tunev
the Telerik team

[storyr]

I'm having the same issue - when a file is selected, it shows up twice in the list - and is uploaded twice.

Observations:

• Each time a file is selected, the "attachments" input is duplicated (see html below).
• One note: the upload control is dynamically loaded via ajax.

sample html (after one file select operation):

<div class="t-widget t-upload" sizcache="2032" sizset="9" jquery164008893823556807334="61">
  <div class="t-button t-upload-button" sizcache="2032" sizset="9">
    <span>Select...</span>
    <input style="display: none" id="attachments" type="file" name="attachments" autocomplete="off" multiple="multiple" jquery164008893823556807334="63">
    <input id="attachments" type="file" name="attachments" autocomplete="off" multiple="multiple" jquery164008893823556807334="62"></div>
  <ul class="t-upload-files t-reset">
    <li class="t-file" jquery164008893823556807334="64"><span class="t-icon"></span><span class="t-filename">background.png</span>
      <button class="t-button t-button-icontext t-upload-action" type="button"><span class="t-icon t-delete"></span>Remove</button></li>
    <li class="t-file" jquery164008893823556807334="66"><span class="t-icon"></span><span class="t-filename">background.png</span>
      <button class="t-button t-button-icontext t-upload-action" type="button"><span class="t-icon t-delete"></span>Remove</button></li></ul>
  <button class="t-button t-upload-selected" type="button">Upload files</button></div>

sample code:

<%= Html.Telerik().Upload()
      .Name("attachments")
      .Async(async => async
          .Save("Upload", "Record")
          .Remove("RemoveUpload", "Record")
          .AutoUpload(false)
      )
      .Multiple(true)
      .ClientEvents(c => c
        .OnSelect("xManageRecord.onFileSelect")
        .OnUpload("xManageRecord.onFileUpload")
      )

[T. Tsonev]

Hello Storyr,

This is a known issue with IE8 caused by a jQuery bug. Updating to jQuery 1.7 solves it, but creates problems on it's own. We're waiting for the 1.7.1 release to address them.

Please let us know if the bug occurs in other browsers as well.

Greetings,
Tsvetomir Tsonev
the Telerik team

[SUNG]

I have same problem too. Is there any workaround?

[T. Tsonev]

Hi Sung,

We will include a fix for the issue in the upcoming Service Pack release. Note that this will still require updating jQuery to 1.7.1

We can send you an internal build once the fix is ready, if you want to try it out.

Regards,
Tsvetomir Tsonev
the Telerik team

[Tim]

After developing against IE 9 for 4 weeks, I started regression testing with IE8 and was just bitten by this event firing 2x issue.  Is there a scheduled date for the service release or a workaround?  I need to have file uploads working in 3 weeks and would hate to scrap this control due to this bug.

[Georgi Tunev]

Hi Tim,

 I attached the latest build - I hope this helps.

Kind regards,
Georgi Tunev
the Telerik team

[Tim]

Unfortunately the provided hot fix did not seem to work for me...  I replaced the content and scripts folders with the new version, updated the reference to the hotfix'd Terlrik dll, and changed 2 script includes in my layout to use the new Telerik scripts version folder (using script tag in head instead of ScriptRegistrar due to load sequence issues with other jquery)...

However,  I am now working... When the fix didn't work and the Upload_to_database sample project worked even when updated to the 2011.3.1115 version, I tried a more drastic debugging technique...  I took my entire MVC Razor view and removed everything but  the upload control and it worked fine...  Then I put the page back and emptied my OnDocumentReady function...  Still worked in IE.  Added lines back one by one and found that it was related to the onchange event of a textbox that caused the issue (along the lines of the above JQuery bug reference...)  I found that :

$("#Amount").live('change', Amount_OnChange);

caused the double event, but

$(".LineAmount").change(function () { LineAmount_OnChange(this) });

did not...

I changed the first wiring from the .live to the .change syntax and now the upload control does not appear to be double-firing the events anymore in IE8...

Thanks again for the help, and hopefully the above JQuery syntax change will help others too...