CODEWITHSUNDEEP
reactjstypescriptfirebasegoogle-cloud-platformgoogle-cloud-storage
Andrew Nguyen
Andrew Nguyen

Reputation: 29

Download image from Google cloud and display on React website

I am trying to learn React and Firebase right now. I would like to

  1. Download an image from my Google cloud storage
  2. Display that image on my web page

I am following this guide here to download files: https://firebase.google.com/docs/storage/web/download-files

However it seems out of date. I followed the advice on this other stack overflow thread to change the package import. google-cloud TypeError: gcs.bucket is not a function.

So right now I am able to download the file, however I do not know how to access it. From what I understand it would be in memory, but how would I display it? The docs to download a file are here https://googleapis.dev/nodejs/storage/latest/File.html#download.

This is currently what I have

const { Storage } = require('@google-cloud/storage');

function MyPage(props: any) {

    const storage = new Storage({
        projectId: 'myProjectId',
    });

    const myImage = await storage
        .bucket('myBucket')
        .file('myImage.jpg')
        .download();
    });

    return (
        <div id="MyPageContainer">
            <h1>Hello!</h1>
        </div>
    );
}

Upvotes: 1

Views: 3832

Answers (1)

Rafael Lemos
Rafael Lemos

Reputation: 5829

Instead of doing the download of files from Cloud Storage to your web server you should provide a link in your HTML so that the users can download files directly from Cloud Storage, as mentioned by @JohnHanley in the comments.

This will take off your hands the processing of the file through your app's back-end to Cloud Storage itself, which is more efficient, but there are performance and cost factors for you to consider implementing it. If you are looking to deliver secure files directly from your web server, you can replace that for Signed URLs, you can check the documentation for it in here.

If you still choose to go with the processing through your we server, you can take a look at this example and once you download the file, you will then need to create an HTML tag + location so the browser downloads from your server.

Upvotes: 1

Related Questions