Where is image data in React?

Question

Im using the following function to upload an image to our application:

const result = await ImagePicker.launchCameraAsync({
                allowsEditing:true,
            });

This returns the following object:

Object {
  "cancelled": false,
  "height": 3200,
  "type": "image",
  "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540sepbaa%252Frepoflex/ImagePicker/ff4dc82d-f14b-4b23-a81a-30e87c34d7e0.jpg",
  "width": 2400,
}

Afterwards we need to upload the image to our backend, but we don't know where the image data is. If we do a fetch to the uri from the previous object, it returns the following:

Object {
  "_bodyBlob": Object {
    "_data": Object {
      "collector": Object {},
      "blobId": "c0e241fa-9b39-4aed-9860-793a393408dd",
      "lastModified": 0,
      "name": "ff4dc82d-f14b-4b23-a81a-30e87c34d7e0.jpg",
      "offset": 0,
      "size": 4864483,
      "type": "image/jpeg",
    },
  },
  "_bodyInit": Object {
    "_data": Object {
      "collector": Object {},
      "blobId": "c0e241fa-9b39-4aed-9860-793a393408dd",
      "lastModified": 0,
      "name": "ff4dc82d-f14b-4b23-a81a-30e87c34d7e0.jpg",
      "offset": 0,
      "size": 4864483,
      "type": "image/jpeg",
    },
  },
  "bodyUsed": true,
  "headers": Object {
    "map": Object {
      "content-type": "image/jpeg",
    },
  },
  "ok": false,
  "status": 0,
  "type": "default",
  "url": "",
}

We need to send to our backend the raw image bytes. Where is that data stored? How can we retrieve it?

score 0 · Answer 1 · answered Jun 06 '21 at 07:55

For uploading it to backend you need to do like this

const form = new FormData();

form.append({
  name: "SampleImage.jpg", // Name of file
  uri: "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540sepbaa%252Frepoflex/ImagePicker/ff4dc82d-f14b-4b23-a81a-30e87c34d7e0.jpg", // URI of the file
  type: "image/jpg", // MIME type of the file
})

Now you just simply have to perform a POST request with this form as body

Also in the backend you can access it like this

req.file // Depends on the backend you are using ...

Where is image data in React?

1 Answers1