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, Apr 20 '15 at 15:52
You stop using custom objects like that, and use a formData object to hold the images instead — adeneo, Apr 20 '15 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, Apr 20 '15 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***](https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects) object ! — adeneo, Apr 20 '15 at 16:04

score 1 · Answer 1 · edited May 23 '17 at 11:57

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 '17 at 11:57

Community

1
1

answered Apr 20 '15 at 16:00

R Phillip Castagna

896
5
12

What does a question about sending a request with the Chrome REST console have to do with sending images in javascript ? – adeneo Apr 20 '15 at 16:02
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. – R Phillip Castagna Apr 20 '15 at 16:05

score 0 · Answer 2 · answered Apr 20 '15 at 16:09

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 '15 at 16:09

adeneo

312,895
29
395
388

Thanks very much for this, it makes good sense; however, is it possible for me to append an array of objects to the form? – Matt Cashatt Apr 20 '15 at 16:22
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 ? – adeneo Apr 20 '15 at 16:24
Awesome, and fair enough, thanks. I will give it a whirl and report back. – Matt Cashatt Apr 20 '15 at 16:24
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. – adeneo Apr 20 '15 at 16:26
@MatthewPatrickCashatt A blob can be used to send objects as JSON. – a better oliver Apr 20 '15 at 21:18

score 0 · Answer 3 · answered Dec 26 '21 at 07:16

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]
        );
      }
    }

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

UPDATE

3 Answers3