How do i get the content from a formData?

Question

I have created a file into the formData like this:

    var fd = new FormData();
    fd.append('file', file);    

how do i get the content out of the formData? like the filename and the file? something like this?: fd.filename(), fd.getData(). or fd.get('file') to retrieve the file back?

Answer 1

There is no way to retrieve the files after you've appended them in to a formData-object I believe.

You'll have to send the formData-object somewhere and then get the files from a req-object or something like that.

In my case (angularJS + nodeJS) I tested this from an answer on SO (link below):

Angular:

var fd = new FormData();
fd.append('file', file);
$http({
  method:"POST",
  url:"uploadFile",
  data: fd,
  withCredentials: true,
  headers: {'Content-Type': undefined },
  transformRequest: angular.identity
});

Node (expressJS):

app.post('/uploadFile', function(req,res){
  fs.readFile(req.files.file.path, function(err, data){
    // Do something with the data (which holds the file information)
  });
});

To see what you can do with the file, read this: http://nodejs.org/api/fs.html

The code is taken from : AngularJS: how to implement a simple file upload with multipart form?

Answer 2

Try:

 var fd = new FormData();
 fd.append('file', file); 

Then use this:

   var newfile = fd.get('file');
      console.log(newfile.name);       //filename
      console.log(newfile.size);       //filesize

Or this for arrays:

 for (var newfile of fd.getAll('file')){
     console.log(newfile.name);
     console.log(newfile.size);
}  

Then you can append file to another FormData:

var newFormData = new FormData();
    newFormData.append('file', newfile);

If you want get all data from FormData, not only file, use FormData.entries() :

for (var pair of fd.entries())
    {
     console.log(pair[0]+ ', '+ pair[1]);   //property and value pairs
    }

Answer 3

You cannot get the filedata like that. If you want to send the file to a servlet. try this

Get your file

var files=document.getElementById('fileID').files[0];

Now append your file to formdata and send it by ajax ;

fd.append('file',files);

Note: form enctype should be multipart/formdata

Answer 4

You cannot get the content like that. The only method availble is append

https://developer.mozilla.org/en-US/docs/Web/API/FormData

Answer 5

After looking at these Mozilla articles, it looks like there is no way to get data out of a FormData object. You can only use them for building FormData to send via an AJAX request.

One way around this would be to build up a regular dictionary and then convert it to FormData:

var myFormData = {
    key1: 300,
    key2: 'hello world'
};

var fd = new FormData();
for (var key in myFormData) {
    console.log(key, myFormData[key]);
    fd.append(key, myFormData[key]);
}

If you want to debug a plain FormData object, you could also send it in order to examine it in the network request console of your developer tools:

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);

Here's some proof of concept code to Drag and Drop files into FormData and upload via POST to a server. I also made a JS Bin where you can experiment and see what data is inside of a FormData object if it helps.

Answer 6

Now you can get the list of the data that content from the FormData API using the getter function.

Example:

formData.getAll('medias') // returns a list of all the files tied to the key 'medias'

Result: [File, File, File, File, File]

Reference: https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll

There are other methods available with the API!