Image uploaded from firebase function to storage can't be previewed both on firebase console and browser

Question

I'm having a good problem and I can't figure out what exactly is wrong. I've tried to check SO for similar problem but couldn't find any. I tried uploading an image to firebase storage using function. For instance a client upload image from their local PC and it get processed by a firebase function. This works cause I can see the image uploaded on firebase storage.

The problem is whenever I tried opening the public url on a browser it doesn't open. I also tried opening the image from firebase storage console, not possible, even the image can't be preview. It keeps loading forever.

PS: Everything works well, when using firebase storage sdk but not in function so I don't think it is a region issue as stated by this SO this

Firebase Function code

    api.post('/v1/event/image/upload', async (req, res) => {
    const response = {};

    var form = new formidable.IncomingForm();
    form.maxFileSize = 200 * 1024 * 1024;
    form.multiples = true;

    return new Promise((resolve, reject) => {
        form.parse(req, (err, fields, files) => {
            //console.log(err, fields, files);
            var file = files.file;
            if (err) {
                response.status = 300;
                response.message = 'Error: ' + err.message;
                response.data = [];
                return res.status(300).json(response);
            }

            var filePath = file.path;//path.join(file.path, file.name);//file.path;
            console.log('File path: ' + filePath, file);

            let fileName = new Date().getTime();
            var bucket = admin.storage().bucket('{bucket-url}');

            return bucket.upload(filePath, {
                destination: 'media/eventz/' + fileName,
                metadata: {
                    contentType: file.type,
                    metadata: {
                        custom: 'metadata'
                    }
                }
            }).then((photo) => {
                var config = [];
                var configObj = {
                    key: fileName,
                    caption: fileName,
                    size: file.size,
                    url: photo[0].metadata.mediaLink //downloadUrl:  // the url to download the file
                };
                config.push(configObj);
                var preview = [];
                preview.push(photo[0].metadata.mediaLink);
                //response.status = 200;
                //response.message = currentTimestamp;
                response.initialPreview = preview;
                response.initialPreviewConfig = config;
                response.initialPreviewThumbTags = [];
                response.initialPreviewAsData = true;
                return res.status(200).json(response);
            }).catch((err) => {
                response.status = 500;
                response.message = 'Error: ' + err.message;
                response.data = [];
                return res.status(500).json(response);
            });
        });
    }).then(() => {
        response.status = 200;
        response.message = 'Image was not uploaded, please try again';
        response.data = [];
        return res.status(200).json(response);
    }).catch(err => {
        response.status = 500;
        response.message = 'Error: ' + err.message;
        response.data = [];
        return res.status(500).json(response);
    });

});