Help with Sending a POST Request with Image Attachment to KoboToolbox

User Support API
, ,
1

Hello everyone,

I’m having a lot of trouble figuring out how to send a POST request with an image attachment.

I’m developing a React Native application where users can fill out forms directly from the app. While making the POST request, I can successfully save all fields except the image fields. From what I understand, the JSON body I need to send looks like this:

{
“id”: “a39XfjhfhUfLVJZtUDTbMe”,
“submission”: {
“start”: “2025-03-05T16:15:13.575Z”,
“end”: “2025-03-05T16:15:13.575Z”,
“…data”: “…”,
“version”: “v6fy5sQnMQBZ6Tbnxh5JoH”,
“version”: “vE7YnKqgB3LVEjm8qqr6sH”,
“_version__001”: “v4qFGRdWiaUmeuWzx2kA4L”,
“formhub”: {
“uuid”: formId
},
“meta”: {
“instanceID”: “uuid:randomId”
}
}
}

My problem is understanding how, where, and in what format to include the image attachments. If I add the image field (e.g., "sign_") inside submission and assign it the Base64-encoded image as a value, the POST request is sent successfully, but the image does not load in KoboToolbox. When I check DevTools, I see that my uploaded image is linked to:
https://kf.kobotoolbox.org/undefined (which returns a 404 error),
whereas a working image is linked to:
https://kf.kobotoolbox.org/api/v2/assets/<_uuid>/data/<_id>/attachments/<id>/ (which returns 200).

I have also tried sending the POST request using FormData, but I keep getting a JSON Parse Error, likely because I’m sending the request to kc.kobotoolbox.org/api/v1/submissions, which I assume only accepts JSON.

Additionally, the kobo-sdk library does not work in React Native due to missing dependencies that exist in Node.js but not in React Native, so I cannot rely on that either. Sending the POST request to kc.kobotoolbox.org/api/v1/submissions.json does not solve the issue either.

After multiple failed attempts and extensive research, I have not found any documentation on how to send a POST request with an image attachment in JSON format. Could anyone guide me on how to properly send an image attachment with a POST request in KoboToolbox?

Thank you in advance for your help!

2 Likes
2

In KoboToolbox, images should be uploaded as file attachments rather than being embedded in JSON as Base64. Since you’re using React Native, you need to send a multipart/form-data request instead of JSON. Here’s how you can structure your request:

  1. Use FormData to send the image as a file:
const formData = new FormData();
formData.append("id", "a39XfjhfhUfLVJZtUDTbMe");
formData.append("submission", JSON.stringify({
  start: "2025-03-05T16:15:13.575Z",
  end: "2025-03-05T16:15:13.575Z",
  version: "v6fy5sQnMQBZ6Tbnxh5JoH",
  meta: { instanceID: "uuid:randomId" }
}));
formData.append("sign_", {
  uri: imageUri, // Local file path
  name: "signature.jpg",
  type: "image/jpeg"
});

fetch("https://kc.kobotoolbox.org/api/v1/submissions", {
  method: "POST",
  headers: { "Content-Type": "multipart/form-data" },
  body: formData
})
.then(response => response.json())
.catch(error => console.error(error));

  1. Ensure the imageUri points to a valid local file path.

  2. The endpoint kc.kobotoolbox.org/api/v1/submissions should accept multipart form-data, so avoid sending JSON headers.

This approach should correctly attach the image to the KoboToolbox submission.

1 Like