Issue while trying to pass image and its attributes in an array along with form data

Question

About the issue

I am trying to pass image and its attributes in an array along with other form data.

As there are multiple images being posted so that is why posting array of Uploaded Images. Am I doing anything wrong in below question?

This below part is not working and below is the output in php.

var fileData = new FormData();

$.each(Product_Additional_Images, function(index, file) {
    var Product_Sort_No = "1";
    var fileObject = file.files[0];//this is file
    var data = {
        "Image" : fileObject,
        "Sort_No": Product_Sort_No
    }
    fileData.append("Product_Additional_Images[]", JSON.stringify(data));
});

fileData.append('Product_ID', "1");

$.ajax({
    method: "POST",
    url:    "sample url",
    cache:  false,
    async:  true,
    data:   fileData,
    processData: false,
    contentType: false,
    success: function(response) {
    },
    error: function(result) {
    }
});

This one is working perfectly. Below is the one expected output.

This part is working because only array of images along with form data is being posted. Unfortunately, Image attributes in array is not being passed.

var fileData = new FormData();

$.each(Product_Additional_Images, function(index, file) {
    fileData.append("Product_Additional_Images[]", file.files[0]);
});

fileData.append('Product_ID', "1");

$.ajax({
    method: "POST",
    url:    "sample url",
    cache:  false,
    async:  true,
    data:   fileData,
    processData: false,
    contentType: false,
    success: function(response) {
    },
    error: function(result) {
    }
});

I am expecting it to have two elements in an objects as in first example. 1. Uploaded Image 2. Text — Pankaj
– Pankaj, Commented Dec 19, 2018 at 7:47

Sally CJ · Accepted Answer · 2018-12-19 09:09:03Z

5

+25

You should send it like so:

$.each(Product_Additional_Images, function(index, file) {
  var Product_Sort_No = "1";
  fileData.append("Product_Additional_Images[" + index + "][Image]", file.files[0]);
  fileData.append("Product_Additional_Images[" + index + "][Sort_No]", Product_Sort_No);
});

I.e. Use Product_Additional_Images[{index}] instead of just Product_Additional_Images[].

UPDATE

If you want to send the Image item as an array of images/files:

$.each(Product_Additional_Images, function(index, file) {
  var Product_Sort_No = "1";
  //fileData.append("Product_Additional_Images[" + index + "][Image]", file.files[0]);
  $.each(file.files, function(){
    fileData.append("Product_Additional_Images[" + index + "][Image][]", this);
  });
  fileData.append("Product_Additional_Images[" + index + "][Sort_No]", Product_Sort_No);
});

Then in PHP, $_FILES['Product_Additional_Images']['tmp_name'][0]['Image'] for example, would be an array of files (or temporary files).

edited Dec 19, 2018 at 9:09

answered Dec 19, 2018 at 8:09

Sally CJ

15.7k2 gold badges19 silver badges36 bronze badges

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

4 Comments

Pankaj Over a year ago

can I make an object with 2 attributes. 1. Uploaded images and 2. Text ?

Sally CJ Over a year ago

Using the Product_Additional_Images[{index}] indeed does that. But in PHP, uploaded files are put inside the superglobal $_FILES. So $_FILES['Product_Additional_Images']['tmp_name'][0] for example, allows you to access the first image/file, if any. I can update the answer if you need sample PHP code?

Sally CJ Over a year ago

I mean, $_FILES['Product_Additional_Images']['tmp_name'][0]['Image']. And for the relevant text, use $_POST['Product_Additional_Images'][0]['Sort_No'].

Sally CJ Over a year ago

Sorry, I didn't really notice the "s" as in "1. Uploaded images". Please check the updated answer.

Collectives™ on Stack Overflow

Issue while trying to pass image and its attributes in an array along with form data

1 Answer 1

UPDATE

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related