Is there any tutorial to post form data with image?

[arif2009]

According to my requirements, I need to submit form data that will contain images like this.
Form submission using JavaScript:

const formData = new FormData();
formData.append('longitude', pinCoordinate[0].toString());
formData.append('latitude', pinCoordinate[1].toString());
formData.append('pinColor', pinColor);

formData.append('comment.description', desc);
files.forEach((file) => formData.append('comment.imageFiles', file));

await fetch('/pins/uuid', {
    method: 'POST',
    body: formData,
}).catch((e) => {
    console.log(e);
});

How can I create Payload for this data and receive this data in GOA?

[raphael]

Take a look at https://github.com/goadesign/examples/blob/master/upload_download, this example illustrates how to do multipart uploads.

[arif2009]

It seems, it upload the file directly but I need to receive file bytes, longitude, latitude & pinColor

[arif2009]

@raphael Also I cant receive posted form data, can I get an example?

[raphael]

The code can be tweaked to add more parts to handle additional information provided the client is able to provide it. Also take a look at https://github.com/ajg/form - it's basically a drop-in replacement for the Goa decoder to handle forms, https://goa.design/implement/encoding/ describes how to use custom encoders and decoders.

[arif2009]

Thanks for your help. This StackOverflow answer https://stackoverflow.com/a/58359728/3835843 also helps me to solve this issue.