How can I post and array of JSON objects with each object "containing" an uploaded image?

Question

I think my question is most easily explained by simply showing the JSON object I would like to post to the server. Please note, I do NOT want to convert the file to a bytearray.

var myObject = {
   Name: "Foo",
   YourImages: [
      {Title: "Bar", Image: (some image uploaded/attached via html file input)},
      {Title: "Fizz", Image: (some image uploaded/attached via html file input)},
      {Title: "Buzz", Image: (some image uploaded/attached via html file input)}
   ]
}

UPDATE

I haven't yet written the code to upload to the server, but this excellent "fileread" directive allows me to assign the image to a property in my model which is exactly what I am after.

You upload the image separately and then in your object you put the path to the image. — Styphon
– Styphon, Commented Apr 20, 2015 at 15:52
You stop using custom objects like that, and use a formData object to hold the images instead — adeneo
– adeneo, Commented Apr 20, 2015 at 15:53
@Styphon--Thanks, I have considered that and may have to do it that way, but was hoping to avoid multiple ajax calls. — Matt Cashatt
– Matt Cashatt, Commented Apr 20, 2015 at 15:56
You can send images and text and anything else in one ajax request, as long as it's sent as a formData object ! — adeneo
– adeneo, Commented Apr 20, 2015 at 16:04

Community · Accepted Answer · 2017-05-23 11:57:03Z

1

Short answer: You want to post the data as a multi-part request. See this question and its accepted answer for more information.

Since you said you don't want to do a byte array, I presume that you wouldn't want to do a Base64 encode of the binary files in general (which would be costly in bandwidth and processing time). The easiest solution in that case is to send a multi-part request that your backend can then piece back together.

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Apr 20, 2015 at 16:00

R Phillip Castagna

8965 silver badges12 bronze badges

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

2 Comments

adeneo Over a year ago

What does a question about sending a request with the Chrome REST console have to do with sending images in javascript ?

R Phillip Castagna Over a year ago

The answer discusses the basics of HTTP multi-part requests and includes a link to the HTTP spec; I thought it did a good job of giving the general idea behind what needed to be done. I'm sure there are libraries that can handle it automagically but personally I like to know what needs to be done behind the scenes before I look for those.

adeneo · Accepted Answer · 2015-04-20 16:09:08Z

0

The proper way to send images, text and other things in one ajax request is using formData

var myObject = new FormData();

formData.append("Name", "Foo");
formData.append("Titles", "Bar, Fizz, Buzz");
formData.append("Image1", fileInputElement.files[0]);
formData.append("Image2", fileInputElement.files[1]);

var request = new XMLHttpRequest();
request.open("POST", "http://url.com/script_to_handle.php");

request.send(formData);

answered Apr 20, 2015 at 16:09

adeneo

319k29 gold badges410 silver badges392 bronze badges

5 Comments

Matt Cashatt Over a year ago

Thanks very much for this, it makes good sense; however, is it possible for me to append an array of objects to the form?

adeneo Over a year ago

I'm not sure, you'd have to try it. It does accept binary images and blobs as the value in append, but not sure what else it would support ?

Matt Cashatt Over a year ago

Awesome, and fair enough, thanks. I will give it a whirl and report back.

adeneo Over a year ago

Note that this is really the only proper way to submit uploaded images with ajax, in older browser that doesn't support formData one has to fallback to iframes and other crap submitting forms in the background etc.

a better oliver Over a year ago

@MatthewPatrickCashatt A blob can be used to send objects as JSON.

Akbar Mirzaei · Accepted Answer · 2021-12-26 07:16:21Z

We did it with ReactJS(front) and ASP.Net core(back) So the best way to do it is using FormData, We use an object like below that contains an array of objects, each object includes an array of images too,

{
    CommodityID:xxxxx,
    TotalWeight:xxxx,
    CostOfCommodity:xxxx,
    Prerequisites:[{
        ProductId: xxxx,
        DeliveryWeight: xxxxx,
        ReleasedImagesUrl: [
            multiple images file
        ]
    },{
        ProductId: xxxx,
        DeliveryWeight: xxxxx,
        ReleasedImagesUrl: [
            multiple images file
        ]
    }]
}

Actually, we send each item of the array separately like Prerequisites[0].DeliveryWeight and this is the point. please pay attention to the letters that in our case first characters of items were capital (this is important too)

const formData = new FormData();
    formData.append("CommodityID", this.state.commodityId);
    formData.append("TotalWeight", this.state.totalWeight);
    formData.append("CostOfCommodity",this.state.costOfCommodity);
    for (let i = 0; i < this.state.prerequisitesListTemp.length; i++) {
      formData.append(
        `Prerequisites[${i}].ProductId`,
        this.state.prerequisitesListTemp[i].productId
      );
      formData.append(
        `Prerequisites[${i}].DeliveryWeight`,
        this.state.prerequisitesListTemp[i].deliveryWeight
      );

      for (
        let j = 0;j < this.state.prerequisitesListTemp[i].releasedImagesUrl.length;j++
      ) {
        formData.append(
          `Prerequisites[${i}].ReleasedImagesUrl`,
          this.state.prerequisitesListTemp[i].releasedImagesUrl[j]
        );
      }
    }

Collectives™ on Stack Overflow

How can I post and array of JSON objects with each object "containing" an uploaded image?

UPDATE

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related