2

I'm building an app, with React.js and Express.js, in which the user can create a quiz, and I want it to be able to use text and images to illustrate each question and each option. By now, the structure of the data beeing sent through front-end and back-end is something like this:

{
"title": "Quiz title",
"description": "This is my example of description",
"questions": [
    {
        "optionsText": ["A", "B","C"],
        "questionText": "chose one letter, please",
        "selectedRightOptionNumber": 0
    },
    {
        "optionsText": ["D", "E","F"],
        "questionText": "chose one letter, please",
        "selectedRightOptionNumber": 2
    }
    ]
}

How can I send the images alongside the data? Remember that I need to know in the back-end which image belongs to which question, option or if it is the main quiz image.

Improve this question
2
  • 4
    You can convert the files to base64 and then add it as a property on the json object you send to the backend. Commented Oct 20, 2020 at 22:18
  • @EVeras Nice! That should be a answer Commented May 24, 2024 at 8:20

1 Answer 1

Reset to default
1

Q: How to send image files alongside with JSON data through HTTP requests?

A: At the HTTP/Response level, that's easy.

I'd recommend sending the response as a MIME/MultiPart payload. Just as you would send an e-mail with attachments, for example.

Note: MIME/MultiPart image attachments are base64 encoded. EVeras suggests simply base64-encoding the images directly in your JSON (as opposed to wrapping both the JSON and the images). This approach would probably work, too :)

In any case, please look at this thread:

Creating a Nodejs server that send response with multipart form data

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

1 Comment

Using the suggestion from EVeras I can just attach the images in the JSON inside the question they belong, but if I use the MIME/MultiPart, is there a way to easily know where the image belongs?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.