Uploading files via jQuery, object FormData is provided and no file name, GET request

Question

I am using a jQuery script to upload files to a new page. It somehow works too, but the issue is that it sends the form data as object FormData.

Here is the code:

$('#submit').click(function () {
   var formData = new FormData($(this).form);
   $.ajax({
       url: '/test/file_capture',
       //Ajax events
       beforeSend: function (e) { 
         alert('Are you sure you want to upload document.'); 
       },
       success: function (e) { 
         alert('Upload completed'); 
       },
       error: function (e) { 
         alert('error ' + e.message); 
       },
       // Form data
       data: formData,
       //Options to tell jQuery not to process data or worry about content-type.
       cache: false,
       contentType: false,
       processData: false
    });
    return false;
});

The HTML part is as:

<form enctype="multipart/form-data">
  <input type="file" id="image" name="image" accept="Image/*" />
  <input type="submit" id="submit" name="" value="Upload" />
</form>

But the link that is generated is as:

http://localhost:4965/test/file_capture?[object%20FormData]&_=1386501633340

Which has no image name or any other thing attached to it. What am I missing? Even though there is no error and the request is made and the Upload complete alert is shown.

possible duplicate of [How can I upload files asynchronously with jQuery?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) — Mike DeSimone, Dec 08 '13 at 12:19

marvwhere · Answer 1 · 2013-12-08T12:05:26.480

11

you should only submit the file - not the complete form

var fileInput = $('#image');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);

EDIT

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<form enctype="multipart/form-data">
  <input type="file" id="image" name="image" accept="Image/*" />
  <input type="submit" id="submit" name="" value="Upload" />
</form>

<script>
$('#submit').click(function (event) {
    event.preventDefault()
   var file = $('#image').get(0).files[0];
   var formData = new FormData();
   formData.append('file', file);
   $.ajax({
       url: '/test/file_capture',
       //Ajax events
       beforeSend: function (e) {
         alert('Are you sure you want to upload document.');
       },
       success: function (e) {
         alert('Upload completed');
       },
       error: function (e) {
         alert('error ' + e.message);
       },
       // Form data
       data: formData,
       type: 'POST',
       //Options to tell jQuery not to process data or worry about content-type.
       cache: false,
       contentType: false,
       processData: false
    });
    return false;
});
</script>

edited Dec 08 '13 at 12:05

answered Dec 08 '13 at 11:34

marvwhere

561
3
11

try the edited version - i added preventDefault() and the set the 'type' – marvwhere Dec 08 '13 at 12:05
Still the same issue, the same URL! – Afzaal Ahmad Zeeshan Dec 08 '13 at 12:08
How can I capture the file on the back end? I mean the next page? I am using ASP.NET.. – Afzaal Ahmad Zeeshan Dec 08 '13 at 12:09
@marvwhere i can do upload image with this way, if i have only the source of image, and not the image in an input file? – alexandre9865 Jan 29 '17 at 20:51
no it's javascript. you should use a backend php/ruby for downloading remote images – marvwhere Jan 31 '17 at 08:04

Fernando Basso · Answer 2 · 2013-12-08T11:45:08.807

You need to explicitly get the file.

var image = $('#image')[0].files[0];

And then append the file to formData:

formData.append( image );

Here's an example of how I do it:

    var image = $('#image')[0].files[0];

    if( window.FormData ) {
        formdata = new FormData();
        formdata.append( 'image', image );
        formdata.append( 'action', 'save-image' );

        $.ajax({
            url: 'controller/handler',
            type: 'POST',
            data: formdata,
            processData: false,
            contentType: false,
            success: function( res ) {
                // Handle it.
            }
        });
    }
}

score 1 · Answer 3 · edited May 23 '17 at 12:26

1

Files cannot be uploaded with the GET method. You need to use POST.

$.ajax({
   method: 'POST',
   url: '/test/file_capture',
   // ...

Also, you need HTML 5 to be able to upload files (though Firefox might allow it with earlier XHTML).

edited May 23 '17 at 12:26

Community

1
1

answered Dec 08 '13 at 12:20

Mike DeSimone

41,631
10
72
96

Ok, then how will I capture the file on the next page? What name will it be assigned to? – Afzaal Ahmad Zeeshan Dec 08 '13 at 12:29
I know how the forms are sent, but I wanted to know that my form elements as not captured there! I used this `Request["image"]` (asp.net razor) but the block where `if(image == null)` was triggered and other block, which would execute if image was captured was ignored. – Afzaal Ahmad Zeeshan Dec 08 '13 at 17:37
1

I don't know how ASP.NET handles file uploads, sorry. You *should* have a way to get to the files, however, many libraries handle uploaded files differently from other form elements. Looking at [the answer for a similar thread](http://forums.asp.net/t/1678157.aspx), I note that files seem to be in a `Request.Files` array. – Mike DeSimone Dec 08 '13 at 20:05

score 0 · Answer 4 · answered Sep 20 '19 at 14:34

First get the Object

First get the Object from HTML

 //HTML
 <input id = "file_name" type = "file" />

 //JS
 var formData = new FormData()
 var file_obj = document.getElementById("file_name")
 formData.append('file_name', file_obj.files[0]);
 $.ajax({
    url: url,
    type: 'POST',
    data: formData,
    success: function (data) {

    },
    cache: false,
    contentType: false,
    processData: false
})

Uploading files via jQuery, object FormData is provided and no file name, GET request

4 Answers4

Linked