7

Valums file-uploader (now called Fine Uploader) doesn't work under Internet Explorer 9 but wors fine under Chrome.

So under IE it shows the name of the file and button CANCEL and no % of uploading.

Any clue?

enter image description here

UPDATES:

Solution is here as well MVC Valums Ajax Uploader - IE doesn't send the stream in request.InputStream

Community
  • 1
  • 1
NoWar
  • 36,338
  • 80
  • 323
  • 498
  • 1
    No clue at all. Works perfectly fine for me in IE9. So I guess there must something in the code you have written that prevents it from working. – Darin Dimitrov Mar 27 '12 at 06:18
  • 1
    Yeah... I use MVC3 project... Under Firefox I cannot see the red "UPLOAD" button. And under IE9 it starts to upload but never ends. What it could be ? – NoWar Mar 27 '12 at 13:00
  • Once again, without seeing your client and server side code we don't have much to discuss here. – Darin Dimitrov Mar 27 '12 at 13:08

4 Answers4

11

I know this question was filed under asp.net specifically, but it came up when I searched for "valums ajax upload IE9", so I'll post my fix here in case it helps anyone like myself regardless of language:

I was returning a JSON response from the AJAX upload request with a "application/json" content header. IE9 does not know what to do with "application/json" content (but Chrome/FF/etc do).

I fixed this by making sure to return a "text/html" MIME type http header on my json response from the server.

Now IE is no longer trying to download the response! Cheers

thaddeusmt
  • 15,410
  • 9
  • 67
  • 67
  • I can confirm this. I just had to get this working with IE 8 and this was the culprit. I had it as text/plain but switching it text/html works. – M.W. Felker Oct 31 '12 at 21:23
9

I am unable to reproduce the issue. Here's a full working example.

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Upload(HttpPostedFileBase qqfile)
    {
        var uploadPath = Server.MapPath("~/app_data");
        if (qqfile != null)
        {
            var filename = Path.Combine(uploadPath, Path.GetFileName(qqfile.FileName));
            qqfile.SaveAs(filename);
            return Json(new { success = true }, "text/html");
        }
        else 
        {
            var filename = Request["qqfile"];
            if (!string.IsNullOrEmpty(filename))
            {
                filename = Path.Combine(uploadPath, Path.GetFileName(filename));
                using (var output = System.IO.File.Create(filename))
                {
                    Request.InputStream.CopyTo(output);
                }
                return Json(new { success = true });
            }
        }
        return Json(new { success = false });
    }
}

Index.cshtml view:

<script src="@Url.Content("~/Scripts/valums/fileuploader.js")" type="text/javascript"></script>

<div id="file-uploader">       
    <noscript>          
        <p>Please enable JavaScript to use file uploader.</p>
    </noscript>         
</div>

<script type="text/javascript">
    var uploader = new qq.FileUploader({
        element: document.getElementById('file-uploader'),
        action: '@Url.Action("upload")'
    });
</script>

You could also include the CSS in your Layout:

<link href="@Url.Content("~/Scripts/valums/fileuploader.css")" rel="stylesheet" type="text/css" />
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • I just created an empty MVC3 project and put your code as well as VALUMS. Under Chrome HttpPostedFileBase qqfile = null but under IE it works fine. Any clue why is it? – NoWar Mar 27 '12 at 14:02
  • 1
    @Peretz, I did a mistake in my initial example as I didn't account for the fact that in the case of Chrome the plugin uses HTML5 File API to perform an AJAX upload. I have updated my answer to fix the issue. – Darin Dimitrov Mar 27 '12 at 14:11
  • Yeah I found the solution here http://stackoverflow.com/questions/4888632/mvc-valums-ajax-uploader-ie-doesnt-send-the-stream-in-request-inputstream – NoWar Mar 27 '12 at 14:17
0

It seems that is IE cache issue, if you are using Ajax & GET, add timestamp value in the get parameters for the Ajax parameters, that will do the trick like this :

$.ajax({
  url : "http:'//myexampleurl.php' + '?ts=' + new Date().getTime(),
  dataType: "json",
  contentType: "application/json; charset=utf-8", 
  .
  .
  //more stuff
mogu
  • 11
  • 1
0

If you are using java spring

@RequestMapping(value = "/upload", method = RequestMethod.POST, produces = "application/json")
public @ResponseBody YourObject excelUplaod(@RequestHeader("X-File-Name") String filename, InputStream is) {
    // chrome or firefox
}

@RequestMapping(value = "/upload", method = RequestMethod.POST,headers="content-type=multipart/*", produces = "text/html")
public @ResponseBody  ResponseEntity<YourObject> uploadByMultipart(@RequestParam(value = "qqfile") MultipartFile file) {
    // IE
    try {
        String fileName = file.getOriginalFilename();
        InputStream is = file.getInputStream();

        // more stuff

    } catch (Exception e) {
        logger.error("error reading excel file", e);
    }   
}
pahkey
  • 1
  • 1