how to add a file object into a javascript object?

Question

How to add an object to an existing javascript object ? here's a sample of an existing javascript object

   var dataObj = {
       TITLE : adtitle,
       DESC : addesc,
       PRICE : price,
       DISCOUNT : discount,
       CATID : maincatid,
       STATUS : adstatus,
       QUANTITY : quantity  
   };

now I have this file object and i want to add it to that object above.

File { name: "paper.jpg", lastModified: 1445433597723, lastModifiedDate: Date 2015-10-21T13:19:57.723Z, size: 54900, type: "image/jpeg" }

this file object is a value from a file upload input type

var image1 = $('#Image1').prop("files")[0];
var image2 = $('#Image2').prop("files")[0];

then i also need to fire a $.post

   $.post("<?php echo Yii::app()->createUrl('/post'); ?>", { jsonData: postdata}, function(response){
            console.log(response);
        });

all of those scripts above are triggered when I clicke a button

   $('#postit').click(function(e){
          //all the scripts from above
   });

`dataObj.FILES = [ file1, file2, file3 ]` having `file1`, `file2`, `file3` being `File` occurences — pistou, Nov 03 '15 at 16:24

Cᴏʀʏ · Accepted Answer · 2015-11-03T16:29:45.167

3

To add it to an existing object, you can simply define a new property on your dataObj:

var dataObj = {
    ...
};
// other work
dataObj.FILE = $('#Image1').prop("files")[0];

Or, if you can do it at the time the dataObj is defined, you should do that:

var dataObj = {
   TITLE : adtitle,
   DESC : addesc,
   PRICE : price,
   DISCOUNT : discount,
   CATID : maincatid,
   STATUS : adstatus,
   QUANTITY : quantity,
   FILE : $('#Image1').prop("files")[0]
};

If you have multiple File objects, then you should instead store them as an array in your dataObj:

dataObj.FILES = $('#Image1').prop("files");

Or maybe you're working with them one at a time, and need to push them one-by-one into an array on your dataObj:

var dataObj = {
   TITLE : adtitle,
   DESC : addesc,
   PRICE : price,
   DISCOUNT : discount,
   CATID : maincatid,
   STATUS : adstatus,
   QUANTITY : quantity,
   FILES : []
};

// Populate the array
$('#Image1').prop("files").forEach(function(file) {
    dataObj.FILES.push(file);
});

edited Nov 03 '15 at 16:29

answered Nov 03 '15 at 16:15

Cᴏʀʏ

105,112
20
162
194

what if I have 5 or more file objects? – sasori Nov 03 '15 at 16:20
Then you should instead have an array of objects. I'll edit in an example. – Cᴏʀʏ Nov 03 '15 at 16:22
after i used the JSON.stringify(dataObj); ...the files aren't there when I console logged it in the browser – sasori Nov 03 '15 at 16:31
You're going to have to provide more context. When are you running this JavaScript? Are you submitting a form in between? Are you trying to access the file contents somehow? Is there AJAX? You asked a very simple question that now has an answer, but you haven't provided a **complete** scenario. I suspect you're trying to do something out of the ordinary here. You may want to ask a new question that contains a [mcve], and reference this one if you wish. – Cᴏʀʏ Nov 03 '15 at 16:40
I edited my original post. maybe this time it's more understandable?...the images where gone after I used the JSON.stringify..am supposed to catch the json data in backend – sasori Nov 03 '15 at 16:48
@sasori: Are you familiar with AJAX-posting files from a file input type? It is actually quite a bit harder than it seems, and of it's own accord, way too broad of a task for [so], unfortunately. See http://stackoverflow.com/a/2320097/74757 for some more detail. – Cᴏʀʏ Nov 03 '15 at 19:20

score 1 · Answer 2 · answered Nov 03 '15 at 16:15

1

Not too sure if that answers your question, but the simplest answer is :

dataObj.FILE = image1;

answered Nov 03 '15 at 16:15

Cyrille

348
1
4
12

what if I have 5+ file objects? – sasori Nov 03 '15 at 16:20

how to add a file object into a javascript object?

2 Answers2