CODEWITHSUNDEEP
firebasereact-nativegoogle-cloud-functions
Reuben
Reuben

Reputation: 141

Uploading multiple images to firebase in React Native

So I am very new to the whole coding scene and am trying to learn how to code using react native. Right now, I'm trying to figure out how to upload images using firebase (functions)and google cloud storage.

Below is the backend code that enables me to upload one image per submission to firebase.

I was wondering is it possible to modify this code so that it can upload multiple images per submission? If so, how would I go about doing it?

exports.storeImage = functions.https.onRequest((request, response) => {
  return cors(request, response, () => {
          const body = JSON.parse(request.body);
          fs.writeFileSync("/tmp/uploaded-image.jpg", body.image, "base64", err => {
            console.log(err);
            return response.status(500).json({ error: err });
          });
          const bucket = gcs.bucket("myapp.appspot.com");
          const uuid = UUID();

          return bucket.upload(
            "/tmp/uploaded-image.jpg",
            {
              uploadType: "media",
              destination: "/places/" + uuid + ".jpg",
              metadata: {
                  metadata: {
                      contentType: "image/jpeg",
                      firebaseStorageDownloadTokens: uuid
                  }
              }
            },
            (err, file) => {
              if (!err) {
                return response.status(201).json({
                  imageUrl:
                    "https://firebasestorage.googleapis.com/v0/b/" +
                    bucket.name +
                    "/o/" +
                    encodeURIComponent(file.name) +
                    "?alt=media&token=" +
                    uuid,
                  imagePath: "/places/" + uuid + ".jpg"
                });
              } else {
                console.log(err);
                return response.status(500).json({ error: err });
              }
            }
          );
      })
      .catch(error => {
        console.log("Token is invalid!");
        response.status(403).json({error: "Unauthorized"});
      });
  });
});

Upvotes: 0

Views: 2171

Answers (1)

Ricardo Smania
Ricardo Smania

Reputation: 3139

I don't have a React Native environment easily available, but I believe you can do it from the client with code like this:

await firebase.storage().ref('test/test.jpg').putFile('/path/to/test.jpg');
let downloadUrl = await firebase.storage().ref('test/test.jpg').getDownloadURL();
console.log('downloadUrl :', downloadUrl); // do whatever you need with it

To upload another image you just call the code twice, you can even do it in concurrently if you want.

When you use Firebase you should do most of the operations directly from the client, so you just need backend (including cloud functions) code if you need to do some heavy processing, use the admin SDK, integrate with third party apps, or stuff like that. For simple database or storage operations the client will suit you much better.

Also, you don't need to compose the download URL yourself, getDownloadUrl() does that for you. And if you access storage from the client it automatically integrates with Firebase Auth so you can protect your data.

Upvotes: 1

Related Questions