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
– pistou, Commented Nov 3, 2015 at 16:24

Cᴏʀʏ · Accepted Answer · 2015-11-03 16:29:45Z

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 3, 2015 at 16:29

answered Nov 3, 2015 at 16:15

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

sasori Over a year ago

what if I have 5 or more file objects?

Cᴏʀʏ Over a year ago

Then you should instead have an array of objects. I'll edit in an example.

sasori Over a year ago

after i used the JSON.stringify(dataObj); ...the files aren't there when I console logged it in the browser

Cᴏʀʏ Over a year ago

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 minimal reproducible example, and reference this one if you wish.

sasori Over a year ago

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

|

Cyrille · Accepted Answer · 2015-11-03 16:15:53Z

1

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

dataObj.FILE = image1;

answered Nov 3, 2015 at 16:15

Cyrille

3781 gold badge4 silver badges12 bronze badges

1 Comment

sasori Over a year ago

what if I have 5+ file objects?

Collectives™ on Stack Overflow

how to add a file object into a javascript object?

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related