Firebase Storage image upload ignores contentType metadata

[arminsal1]

Issue

I'm trying to upload gifs from my app, but the content type is uploaded as image/jpeg even though I explicitly set it to image/gif when uploading a custom metadata.

My Code:

var newChatKey = this.state.group.id

const metadata = {
    contentType:this.state.image.indexOf("GIF") != -1 ? 'image/gif' : 'image/jpeg'
 }
var extension = ".jpg"
if (this.state.image.indexOf("GIF") != -1 ) {
     extension = ".gif"
}
var newKey = firebase.database().ref("chat/" + newChatKey).push().key
firebase.storage().ref(("/chat/" + newChatKey + "/" + newKey + extension)).putFile(this.state.image,metadata)

this.state.image is the uri retrieved from React Native Camera Roll Picker. I checked the logic and the app is detecting that it's a gif. It sets the extension properly, but the contentType when I check on the firebase console is image/jpeg, which causes the gif to not be playable.

Environment

1. Application Target Platform: iOS

2. Development Operating System: macOS Sierra

3. Build Tools: Xcode 9.2

4. React Native version: 0.48.4

5. RNFirebase Version: 3.2.1

6. Firebase Module: Storage

[chrisbianca]

@arminsal1 Thanks for this - I believe the RNFirebase iOS library is detecting the underlying content type automatically and overriding your setting. We'll investigate.

[arminsal1]

@chrisbianca I discovered some info that may help with debugging this issue! I found that I can upload a gif from a "file://" uri and setting the metadata will treat it as such, so the problem appears to just be with uploading a gif from a "asset-library://" uri. I know gifs from asset-library on iOS never animate in React Native's <Image/> component, but it would upload via RNFirebase and animate just fine when using its downloadURL. So maybe now it's uploading whatever is linked to gifs being still when loaded from the device? I hope that helps!

[Salakar]

Thanks for reporting this issue. We're aware that Storage has fallen behind slightly on React Native Firebase and would like to bring it up to speed again. I will close this issue for now and track it as well as other issues collectively over on the Storage improvements proposal to be addressed in a future release. See #1260

[Salakar]

@arminsal1 @EvanBacon have fixed this in my local branch, mime types are automatically detected correctly now on both platforms and can also be overridden as above (though you won't need to do as above now as it'll be correct by default)

Will be part of 4.3.0 - thanks for reporting! Will do a pre-release soon, would be great if you could test it.

[Salakar]

Fix for this is now live in the v4.3.0 release.

---

Loving react-native-firebase and the support we provide? Please consider supporting us with any of the below:

• 👉 Back financially via Open Collective
• 👉 Follow React Native Firebase and Invertase on Twitter
• 👉 Star this repo on GitHub ⭐️

[arminsal1]

@Salakar Thanks for all the work and improvements you put into this library! It's easily the most well-maintained and stable library I've had the pleasure of using in my react native projects.

I migrated to v4.3.6 successfully and attempted uploading a few files to test the storage fix. The .jpeg and .mov files had accurate MIME types, but the .gif continues to have a 'image/jpeg' MIME type when uploaded and doesn't animate. 😕

Here's what my upload code looks like:

var extension = ".jpg";
if (currentImg.uri.indexOf("=GIFV") != -1) {
    extension = ".gifv";
} else if (currentImg.uri.indexOf("=GIF") != -1) {
    extension = ".gif";
} else if (currentImg.uri.indexOf("=MP4") != -1) {
    extension = ".mp4";
} else if (currentImg.uri.indexOf("=MOV") != -1) {
    extension = ".mov";
} else if (currentImg.uri.indexOf("=AVI") != -1) {
    extension = ".avi";
} else if (currentImg.uri.indexOf("=M4V") != -1) {
    extension = ".m4v";
}
firebase.storage().ref(("/covers/" + params.sourceId + "/" + "cover" + extension)).putFile(currentImg.uri)

I tested multiple gif files that animate when I view them in my camera roll and after uploading them on other non-react apps, but they all keep the image/jpeg MIME type for some reason.

Here's a screenshot of what I see in my storage console:

I tested this on the iOS Simulator running the latest stable build of Xcode and iOS 11, and my physical iPhone running the latest iOS 12 beta

If there's any more info I can give to help lemme know!

[Salakar]

@arminsal1 looks like it's this code in the else block that's causing the issue - it's meant to convert Hei/Heic files to jpeg.

Whats your thoughts on it automatically doing that - personally I don't think it should be converting any files as it's out-of-scope of Firebase Storage - just not sure if anyone needs that, would be a breaking change to remove it if so.

For the time being, I think I can tweak it to check for Hei/c specifically only and convert just those.

Give me an hour and I'll see if I can get some sort of patch pushed up - hard to test as tests don't go through camera roll (directly test file paths) of which that logic is for, unfortunately.

---

Loving react-native-firebase and the support we provide? Please consider supporting us with any of the below:

• 👉 Back financially via Open Collective
• 👉 Follow React Native Firebase and Invertase on Twitter
• 👉 Star this repo on GitHub ⭐️

[Salakar]

@arminsal1 right, fixed - 3rd times the charm they say 😄 v4.3.7 published with this in, please update and rebuild iOS and let me know how you get on.

Thanks

---

Loving react-native-firebase and the support we provide? Please consider supporting us with any of the below:

• 👉 Back financially via Open Collective
• 👉 Follow React Native Firebase and Invertase on Twitter
• 👉 Star this repo on GitHub ⭐️

[arminsal1]

@Salakar 3rd times the charm indeed, this fix did the job!

With regards to the library handling file conversion, I think the extent to which you currently have it is a good middle ground. I don't think there are many cases where further conversions would be necessary and the setup as is appears to cover any needs I personally would have. :)