Firebase Console returns broken image

Hi!

First, thanks for your tutorial on Youtube! It was great. Though, I can't seem to fix one problem when using `createReadStream` and the bucket storage.

When uploading the image to firebase, the image is broken and I'm not able to preview it in the Firebase Console. All I can see is an error saying *Error loading preview*. But the filesize, mimetype and accessToken are being uploaded, so i'm doing something right.

Here's the part of my Resolver function where i'm uploading an image:

*PS. The bucket comes from an Apollo datasource, that's why I can access it using `this`.*

```
const { createReadStream, filename, mimetype } = image;

try {
await new Promise((res, rej) =>
createReadStream()
.pipe(
this.bucket.file(filename).createWriteStream({
resumable: false,
gzip: true,
metadata: {
contentType: mimetype,
metadata: {
firebaseStorageDownloadTokens: uuidv4(),
},
},
})
)
.on("finish", res)
.on("error", rej)
);
return filename;
} catch (err) {
return new Error(err)
}
```

Do you have any suggestions?

I would really appreciate your help. I've been googling for 2 days now :(

Start with the resolver's createReadStream-to-Firebase Storage createWriteStream path and reproduce the upload using the image and metadata shown. Check the resulting Firebase Storage object and Console preview behavior; done means identifying the upload setting responsible and confirming that uploaded images preview correctly.

Written by the indexing model from the issue text.