How I can create formData for this json ?

characteristics: { one: { "character1": "value1", "character2": "value2", "colors": [ { "1": { "name": "red", "files":[{},{}] //Multiple Images } }, { "2": { "name": "blue", "files": [{},{}] //Multiple Images } } ] }, two: { "1": 1000, "2": 3000 }, three: { "description": "sdsds", "additional": [ { "additional1": "value1", "additional2": "value2" } ] } }

submitForm() {
  let formData = new FormData();
  for (const formDataKey in this.characteristics["one"]["colors"]) {
    console.log(formDataKey)
    formData.append(formDataKey, this.file);

////????????????? }

  this.axios.post('http://localhost:8000/api/product',
      formData,
      {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
  ).then(function (data) {
    console.log(data.data);
  })
      .catch(function () {
        console.log('FAILURE!!');
      });
},

onChangeFileUpload() {
  this.file = this.$refs.file.files[0];
}

rodrigo.pedra

4 years ago

Level 56

This might help:

https://medium.com/@JackPu/json-data-to-formdata-7341def7fc3c

rodrigo.pedra

4 years ago

Level 56

function buildFormData(formData, value, key) {
    if (value && value instanceof Date) {
        formData.append(key, value.toISOString());

        return formData;
    }

    if (value && value instanceof File) {
        formData.append(key, value);

        return formData;
    }

    if (value && typeof value === 'object') {
        Object.keys(value).forEach(function (currentKey) {
            var parentKey = key ? `${key}[${currentKey}]` : currentKey;

            buildFormData(formData, value[currentKey], parentKey);
        });

        return formData;
    }

    formData.append(key, value || null);

    return formData;
}

var input = {
    one: {
        character1: 'value1',
        character2: 'value2',
        colors: [
            {
                '1': {
                    name: 'red',
                    files: [
                        new File([], 'foo'),
                        new File([], 'bar')
                    ]
                }
            },
            {
                '2': {
                    name: 'blue',
                    files: [
                        new File([], 'baz'),
                        new File([], 'qux')
                    ]
                }
            }
        ]
    },
    two: {
        '1': 1000,
        '2': 3000
    },
    three: {
        description: 'sdsds',
        additional: [
            {
                additional1: 'value1',
                additional2: 'value2'
            }
        ]
    }
};

var formData = buildFormData(new FormData, input);

console.log(Object.fromEntries(formData.entries()));

{
  "one[character1]": "value1",
  "one[character2]": "value2",
  "one[colors][0][1][files][0]": File { name: "foo", … },
  "one[colors][0][1][files][1]": File { name: "bar",  … },
  "one[colors][0][1][name]": "red",
  "one[colors][1][2][files][0]": File { name: "baz", … },
  "one[colors][1][2][files][1]": File { name: "qux",  … },
  "one[colors][1][2][name]": "blue",
  "three[additional][0][additional1]": "value1",
  "three[additional][0][additional2]": "value2",
  "three[description]": "sdsds",
  "two[1]": "1000",
  "two[2]": "3000"
}

Please or to participate in this conversation.