I'm trying to upload images to the firebase storage. When I upload them to the storage, I see them with a type: application/octet-stream instead of image/jpeg or image/png.

This is the code I use:

<input
  type="file"
  id="img"
  name="filename"
  accept="image/*"
  onChange={(e) => {
    handleChange(e);
  }}
/>

const handleChange = async (e) => {
  const imgRef = await firebase.storage().ref('images/' + image.name);
  await imgRef.put(img);
 };

The file gets uploaded to the storage, but with the wrong file type. The documentation of firebase storage tells us that when you upload a file without a file extension it automatically gets the application/octet-stream type. If no contentType metadata is specified and the file doesn't have a file extension, Cloud Storage defaults to the type application/octet-stream. This is really strange because they are uploaded to the firebase storage with the right file extension.

I'm trying to upload images to the firebase storage. When I upload them to the storage, I see them with a type: application/octet-stream instead of image/jpeg or image/png.

This is the code I use:

<input
  type="file"
  id="img"
  name="filename"
  accept="image/*"
  onChange={(e) => {
    handleChange(e);
  }}
/>

const handleChange = async (e) => {
  const imgRef = await firebase.storage().ref('images/' + image.name);
  await imgRef.put(img);
 };

The file gets uploaded to the storage, but with the wrong file type. The documentation of firebase storage tells us that when you upload a file without a file extension it automatically gets the application/octet-stream type. If no contentType metadata is specified and the file doesn't have a file extension, Cloud Storage defaults to the type application/octet-stream. This is really strange because they are uploaded to the firebase storage with the right file extension.

• javascript
• reactjs
• firebase
• firebase-storage
• file-type

• You need to pass a name with an extension or pass contentType via metadata. See this answer here: stackoverflow./a/54303172/2144912 – cheshireoctopus Commented Jan 9, 2022 at 18:26

2 Answers 2

I think this solution will apply to your case:

https://stackoverflow./a/54303172

You need to either specify the file extension using .child() or add content type metadata to your upload file.

Can add meta data like that:

storageRef.put(file, {
    contentType: 'image/png',
})