2

The problem is in IE when I submit a file the ajax loader gif doesn't spin while the file is loading. The page is locked even though its supposed to be Ajax. In FF the image does spin. In both browsers, the built in loading indicator spins while the file is uploading. I've tried experimenting with preventDefault() in IE which prevents the browser loading indicator from spinning, and the gif spins, but nothing is posted to the server even though it still hits the javascript block that should be uploading the file. Unfortunately I'm stuck with just JQuery, cannot deploy any other third party plugins or libraries. Also, can't use HTML5, client has a mix of older and newer browsers. The code:

EDIT: I can get the image to spin now, and hit the controller, with the code below. However, in the controller Request.Files is empty! In the original code, the original ajax call was posting to controller/controller/upload file when preventdefault was called, and returned a 404. So I chnaged the path in the ajax call from client/uploadfile to uploadfile and now it hits the controller. Makes no sense why the request files is empty though.

      $("form").submit(function (event) {           
       event.preventDefault()      
    });

    $('#submit').click(function (data) {
        $('#progImg').fadeTo(0, 1);
        $(".mgnlft").css("visibility", "visible");
        var filename = $("#file").val();
        $.ajax({
            type: "POST",
            url: "uploadFile",
            enctype: 'multipart/form-data',
            data: {
                file: filename 
            },
            success: function () {
                $('#progImg').fadeTo(0, 0);
            }                      
        });
        //data.preventDefault()
    });

  <input name="File" type="file" style="width: 380px;" id="file" />
        <p>
            <input type="submit" value="Upload" id="submit"/>
        </p>

controller:

   public ActionResult uploadFile(string file)
    {
        var destinationFolder = mypath;
        foreach (var name in Request.Files)
        {
            var postedFile = Request.Files[0];
            if (postedFile.ContentLength > 0)
            {
                var fileName = Path.GetFileName(postedFile.FileName);
                var path = Path.Combine(destinationFolder, fileName);
                postedFile.SaveAs(path);
            }
        }         
        return View("submitfile");           
    }
Patrick Goode
  • 1,412
  • 5
  • 20
  • 35
  • Try to add the loader in HTLM and set it to display:none initially and show at the moment you need it with a class you add to change display property http://jsfiddle.net/esAGA/3/ – Bernhard Oct 17 '13 at 21:58
  • you definitely want to prevent default, otherwise you will double submit. Also note, your ajax upload isn't actually uploading the file, it's just sending the filename. – Kevin B Oct 17 '13 at 22:03
  • 3
    You cannot upload a file with ajax unless you html5 fileapi, you can fake it with iframes but if you're not willing to use a plugin you'll have to code that yourself. – Musa Oct 17 '13 at 22:03
  • I tried setting the loader image in document ready, then showing it on button click but it still didn't spin – Patrick Goode Oct 18 '13 at 12:54
  • 1
    Unbelievable, one line of code answered this http://stackoverflow.com/a/11299588 – Patrick Goode Oct 18 '13 at 15:29
  • Wishful thinking that you can upload files using AJAX :). Most of the AJAX fileupload controls are ugly iframe hacks. Your code will send the file name to the server, and that is all it should do. Unless I missed out on any AJAX improvements that has happened in the last two years. – vijayst Jan 10 '14 at 16:38
  • possible duplicate of [Animated GIF in IE stopping](http://stackoverflow.com/questions/780560/animated-gif-in-ie-stopping) – Liam Apr 14 '14 at 13:57

0 Answers0