'Google Cloud Storage seeing incorrect content type on my static files

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

UPDATE

The files are uploaded manually to the bucket.

htmlcssgoogle-cloud-storagemime-typescontent-type


Solution 1:[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:[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:[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: https://cloud.google.com/storage/docs/gsutil/addlhelp/WorkingWithObjectMetadata

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Doug Stevenson
Solution 2 dvnapro
Solution 3 Richard

Related Questions