How to send multiple files alongside with JSON data from NodeJs to React

Question

I am building application like Airbnb and when I want to view certain accommodation object I need to send some JSON data about that object from database alongside with multiple images ( Images are stored on server and their path is stored in database ). What is the proper way to accomplish this. This is what I fetch from DB:

"data": {
        "accObject": {
            "id": 21,
            "owner": 9,
            "name": "Vila Ponta",
            "address": "Josipa Broza Tita BB",
            "advance_payment": 1,
            "advance_amount": 50,
            "non_refundable_advance": 0,
            "is_approved": 0,
            "created_at": "2022-03-15T17:40:24.000Z"
        },
        "accObjectPhotos": [
            {
                "phot_id": 30,
                "photo_url": "C:\\Users\\Nikola\\Desktop\\petrovac-projekat\\backend/documents//acc_objects_photos/3_21.jpg"
            },
            {
                "phot_id": 31,
                "photo_url": "C:\\Users\\Nikola\\Desktop\\petrovac-projekat\\backend/documents//acc_objects_photos/5_25.jpg"
            },
            {
                "phot_id": 32,
                "photo_url": "C:\\Users\\Nikola\\Desktop\\petrovac-projekat\\backend/documents//acc_objects_photos/5_26.jpg"
            },
            {
                "phot_id": 33,
                "photo_url": "C:\\Users\\Nikola\\Desktop\\petrovac-projekat\\backend/documents//acc_objects_photos/91_1.jpg"
            }

Is it bad practice if I transform all images in JSON to base64 string and then send that inside JSON object.

base64 encoding will inflate the size of the image to 133% of its original size (in bytes), so that part is bad practice, yes. — Wyck
– Wyck, Commented Mar 16, 2022 at 15:58

ktilcu · Accepted Answer · 2022-03-16 15:38:19Z

1

I think sending the links is best practice unless the links aren't publicly available. If thats the case, I can think of a couple other options:

Like you said, base64 encode and include in the JSON
Create an API that makes those images available publicly and return the links to that endpoint. (you can even add onetime auth so they can't keep downloading)

answered Mar 16, 2022 at 15:38

ktilcu

3,1381 gold badge20 silver badges16 bronze badges

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

3 Comments

mne_web_dev Over a year ago

Thank you for your answer. What do you mean by sending the links ? Images are stored on server

Wyck Over a year ago

Typically a REST API will respond with JSON that contains links to additional resources that can be fetched from the server separately in a follow-up request. e.g.: { "name": "mne_web_dev", "photo": "https://example.com/api/photos/mne_web_dev.jpg" } In this case, the JSON is the response to the primary request, and the photo would be retrieved by the client making a GET request to the photo URL provided in the JSON of the response to the first request.

ktilcu Over a year ago

The link: "photo_url": "C:\\Users...... This link doesn't look like one a client can follow. So, instead, you could make a new endpoint that requests an image and your api delivers it from a locally available location like C:\\.....

Collectives™ on Stack Overflow

How to send multiple files alongside with JSON data from NodeJs to React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related