Upload via FirbaseStorage - Issue: Firebase/Storage in the console

[AnthonyNahas]

Environment

• Operating System version: MacOS High Sierra 10.13.2
• Firebase SDK version: 5.5.1
• Library version: 5.5.51
• Firebase Product: storage

Description:

I am using firebase-admin module on the server side with NodeJS in order to manage the authentication process, the storage and more.

I am facing only problem with the firebase storage product!
I am able to upload the target file to the cloud, however the firebase console is acting like i dont know what... very strange.

The destination of the file is like estimated in the cloud, but i cant preview the image!!!
In the console, the image is replaced by mat-progress-spinner and never ends to load(see below)!!

the path of the image is available on the console, but the url and the "other meta data" are always empty.

A nice idea was to generate a new url! But unfortunately i became the following error -->

"Error/Failed while generating a new url"!

And even more i cant download the checked image with the raised button "download"!
But very scary, the raised button "delete" works!

If i open the chrome dev tools --> console --> i can see few more informations - errors (maybe that could helps)

• Uncaught TypeError: ng.probe is not a function at Object.exports.isDebugMode
• Uncaught TypeError: a.indexOf is not a function at FBC_Ea

In chrome dev tools --> network i got a 401 error while loading the image (see below)

I thinks there are few bugs to fix... and i would be very thankful for a feedback from the core team!

Code

...
@injectable()
export class FirebaseStorage {

    // Get the Storage service for the default app
    private _defaultStorage: admin.storage.Storage = admin.storage();
    private _bucket = this.defaultStorage.bucket();
    private _metadata = {
        cacheControl: "public,max-age=36000",
        customMetadata: {
            "method": Methods[Methods.Upload]
        }
    };


    constructor(@inject("FirebaseAdmin") firebaseAdmin: FirebaseAdmin) {
    }

    /**
     * Uplaod image to the storage
     *
     * @param {string} imageSrc - the path od the temp image to upload
     * @param imageDist
     * @returns {Promise<any>} - the media link of the uploaded image
     */
    public async uploadFileToStorage(imageSrc: string, imageDist: string): Promise<any> {
        const upload = await this.bucket.upload(imageSrc,
            {
                destination: imageDist,
                public: true,
                metadata: this._metadata
            });
        // console.log("upload done --> ", upload);
        return upload[0].metadata.mediaLink;
    }

    get defaultStorage(): admin.storage.Storage {
        return this._defaultStorage;
    }

    set defaultStorage(value: admin.storage.Storage) {
        this._defaultStorage = value;
    }

    get bucket(): any {
        return this._bucket;
    }

    set bucket(value: any) {
        this._bucket = value;
    }
}

Note:

I am using the firebase module on the client side with Angular, and the upload process works really good and everything act like expected! Using the firebase-admin module in combination with the storage, the upload process is a little bit critical, since the firebase console does not works as expected.

Final note: in the response of the upload request, with firebase-admin (NodeJS) the url of the image is like https://www.googleapis.com/download/storage/v1/b/mybucket/blablabla/image.png but the url received in the response with firebase module (Angular) it's like https://firebasestorage.googleapis.com/v0/b/mybucket/blablabla/image.png

[google-oss-bot]

Hmmm this issue does not seem to follow the issue template. Make sure you provide all the required information.

[hiranya911]

You might have to set a few additional properties for the console to work as expected in this case. @katfang do you have any idea what's going on here?

[AnthonyNahas]

I would be really thanksful if you could provide min. an example and more info regarding this bug

[diegonzs]

The image doesn't show because it uses the download URL and if you see the details of the image it doesn't have one.

I found the solution to the problem in stackoverflow. https://stackoverflow.com/a/43764656/7332915

[hiranya911]

I assume this is fixed now. Or at least the workarounds mentioned in the previous comment helps alleviate it. If the problem still occurs, please file a support issue as this is something that needs be be investigated and fixed at a higher level as opposed to the code in this repo.

[eddyoc]

This issue persists

[sohebcakewalk]

Hi,
I was have same error, review google cloud console if very simple, no display in console because firebase console need firebaseStorageDownloadTokens, check example:

first install : npm install uuid

bucket.upload(filename, {
  destination,
  metadata: {
      metadata :{
        firebaseStorageDownloadTokens: uuidv4(),
     }
  },
})

@eddyoc

[Vloz]

The issue still occurs despite adding picture in publicRead Acl.

I can access the uploaded pic using the https://storage.googleapis.com/BUCKET_NAME/OBJECT_NAME format (which is already a strange format to begin with), yet both the "open" button and preview from firebase console arent working.

That's not a critical feature, and yeah we can avoid the probleme using keys that have probably other purposes but it also mislead people that something went wrong during the upload.

[pedroBruno7]

In 2021, this still doesn't work,
It appear there's still no easy and straightforward way to upload a file in node.js to firebase

Using:

upload bucket.upload(file.path, {
destination: ...
});

It will upload on google cloud and not on the firebase dashboard, hence the loading

I've tried it and was able to get the public link from google cloud