CODEWITHSUNDEEP
node.jsjsonfile
mne_web_dev
mne_web_dev

Reputation: 251

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

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.

Upvotes: 1

Views: 461

Answers (1)

ktilcu
ktilcu

Reputation: 3128

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:

  1. Like you said, base64 encode and include in the JSON
  2. 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)

Upvotes: 1

Related Questions