0

I'm trying to send to the server an object containing both data and files using fetch.

My object looks like this:

var myData = {
    id: 1,
    title: 'First project',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    img: '/media/images/article-image-3.jpg',

    ProjectImages: [
        {
            id: 1,
            img: '/media/images/article-image-1.jpg',
            createdAt: '2018-07-21T18:30:46.000Z',
            updatedAt: '2018-07-21T18:30:46.000Z',
            ProjectId: 1,
            imgFile_0: {
                lastModified: 1527323312000,
                name: 'article-image-1.jpg',
                size: 133149,
                type: 'image/jpeg',
                webkitRelativePath: '',
                __proto__: File,
            },
        },
        {
            id: 2,
            img: '/media/images/article-image-2.jpg',
            createdAt: '2018-07-21T18:30:46.000Z',
            updatedAt: '2018-07-21T18:30:46.000Z',
            ProjectId: 1,
            imgFile_1: {
                lastModified: 1527323312000,
                name: 'article-image-2.jpg',
                size: 133149,
                type: 'image/jpeg',
                webkitRelativePath: '',
                __proto__: File,
            },
        },
    ],
    rating: 2,
    ArticleId: 1,
    timestamp: '2016-03-13T00:12:09.000Z',
    createdAt: '2018-07-21T18:30:46.000Z',
    updatedAt: '2018-07-21T18:30:46.000Z',
    Tags: [],
    imgFile: {
        lastModified: 1527323312000,
        name: 'article-image-1.jpg',
        size: 133149,
        type: 'image/jpeg',
        webkitRelativePath: '',
        __proto__: File,
    },
};

As you can see there are some keys with names like imgFiles, which contains the files. It is not possible to stringify this imgFiles objects.

I want to send all this data to the server via fetch. I tried transforming it into a FormData with json-form-data: the files are added to req.files by https://www.npmjs.com/package/express-fileupload, and req.files is iterable; but the data, added to req.body is shaped in this way, and I can't iterate it:

{
    'id': '1',
    'title': 'First project',
    'description':
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',
    'img': '/media/images/article-image-1.jpg',
    'ProjectImages[0][id]': '1',
    'ProjectImages[0][img]': '/media/images/article-image-1.jpg',
    'ProjectImages[0][createdAt]': '2018-07-21T18:40:52.000Z',
    'ProjectImages[0][updatedAt]': '2018-07-21T18:40:52.000Z',
    'ProjectImages[0][ProjectId]': '1',
    'ProjectImages[1][id]': '2',
    'ProjectImages[1][img]': '/media/images/article-image-2.jpg',
    'ProjectImages[1][createdAt]': '2018-07-21T18:40:52.000Z',
    'ProjectImages[1][updatedAt]': '2018-07-21T18:40:52.000Z',
    'ProjectImages[1][ProjectId]': '1',
    'rating': '2',
    'ArticleId': '1',
    'timestamp': '2016-03-13T00:12:09.000Z',
    'createdAt': '2018-07-21T18:40:52.000Z',
    'updatedAt': '2018-07-21T18:40:52.000Z',
};

So, my questions are:

A. What is the best way to send data along files via fetch?

B. Is possible to transform this structure in a normal object?

EDIT:

It looks like FormData can't handle nested structures. Is a simple and one level depth key: value data structure. So either I use FormData only to send the files and send the data stringified, or I look for another option.

Any idea will be welcomed!

  • How did you get that `data` to start with? Simplest way to generate FormData is pass a form element into it... `var data = new FormData(document.querySelector('#myForm'))` – charlietfl Jul 21 '18 at 19:03
  • I'm working with React, this is the state of a component. FormData is not a requirement. –  Jul 21 '18 at 19:05
  • No form involved? You can't serialize files so have to use FormData to send via fetch – charlietfl Jul 21 '18 at 19:06
  • I have a form, but I don't use it for post/put data. –  Jul 21 '18 at 19:08
  • But you can use it to populate FormData. Just pass a reference to form element into new FormData – charlietfl Jul 21 '18 at 19:08
  • I'm using React; I'm not sure if the `form` tag from jsx has the same behaviour as in normal HTML, but it seems that this doesn't work. I am looking for a way to upload the object, not the form. Thanks anyway! –  Jul 21 '18 at 19:28
  • you need a `ref` for the actual form element (see react docs). You wouldn't be uploading the form using regular form submit....just getting the data into FormData using the form element and letting browser populate it for you – charlietfl Jul 21 '18 at 19:31
  • Yes, but the problem of the nested data will be there anyway, right? I was checking https://stackoverflow.com/questions/28774746/sending-nested-formdata-on-ajax, and it looks like FormData is useful only for files, but not for complex data structures. –  Jul 21 '18 at 19:35
  • Can stringify nested structures that don't contain files. Then parse them back server side – charlietfl Jul 21 '18 at 19:39
  • What's on the backend? You can set up nested structure in FormData, but that kind of a nightmare to walk through after. (To do so for php, for all your values you'd set them in `"root[level1][level2]"` etc. You can also add multiple values in the same key (that's what `append` does), but once again it depends on the backedn how it should be sent (for php you must have `[]` at the end of the key for the server to treat it as an Array and to access the multiple values. – Kaiido Jul 22 '18 at 03:43

0 Answers0