Solution 1 :

You will have to manually edit the content type in the console. The instructions are in the documentation:

  1. Open the Cloud Storage browser in the Google Cloud Console.

  2. In the list of buckets, click on the name of the bucket that contains the desired object, and navigate to the object.

  3. Certain pieces of object metadata, such as the object’s size and storage class, are displayed along with the object’s name.

  4. Click the more actions menu () associated with the object.

  5. Click Edit metadata. The overlay window that appears shows the current values for the object’s editable metadata.

Solution 2 :

if you want to bulk upload your local files to Cloud Storage without having issues with octet-stream you can use Cloud SDK to upload it using gsutil command:

gsutil -m cp -r dir_of_folder_to_upload gs://bucket_name/folder

Solution 3 :

You can also bulk update your response headers (Google cloud calls it meta data) like this:

Set header content types for CSS
gsutil -m setmeta -h "Content-Type:text/css" gs://your-bucket-name/any-folder/*.css

You can also bulk set multiple headers with one command as well:

Set multiple header content types for HTML example:

gsutil -m setmeta -h "Content-Type:text/html;charset=UTF-8" -h "Cache-Control:public, max-age=3600" gs://your-bucket-name/any-folder/*.html

You can see a list of all the headers you can set here:

Problem :

My google cloud storage browser is seeing the incorrect content-type on all of my static files (css, js, jpg, etc.) and this is causing a mime type error when serving these files which causes my website to not apply my css styles. Why is this happening and how can I fix this? I am linking my static files correctly and with specifying the correct content-type, but this error is still happening.

<link rel="stylesheet" type="text/css" media="screen,print" href="index_files/index.css" />
<script type="text/javascript" src="index_files/index.js"></script>

As you can see in the following images, google cloud storage is seeing these static files with content-type application/octet-stream when it should be seeing them as text/css and text/javascript.

enter image description here
enter image description here


The files are uploaded manually to the bucket.


Comment posted by Phix

How are these being added to the bucket?

Comment posted by Doug Stevenson

Please edit the question to be clear about how your objects are being added. Whatever the process is that adds the files needs to set the content type appropriately, or you will have to do something else to change the type.

Comment posted by Michael Miller

I just updated my question. I upload my files manually to the bucket by clicking on “Upload files” then selecting all the files I want to upload to the bucket, replacing whichever ones I’m updating.

Comment posted by Michael Miller

I don’t see where it says “Edit metadata”. I see “View metadata” along with some other options. Clicking on “View metadata” does not give me any option to edit it. Oh, perhaps I don’t have permissions.

Comment posted by Michael Miller

I made a discovery. If I upload the static files one at a time instead of doing all of them at once, google cloud storage see’s the correct content-type. So I just need to do them one at a time instead of all of them??