Google cloud storage return old images

Question

I have a public bucket, uploading the images through a React web app using a signed url:

export const uploadFile = (policy: PostPolicy, file: File): Promise<void> => {
  const formData = new FormData();

  for (const field in policy.fields) {
    const value = policy.fields[field];
    value && formData.append(field, value);
  }
  formData.append("file", file);

  return fetch(policy.url, {
    method: "POST",
    body: formData,
  }).then();
};

The PostPolicy is the result of the call to bucket.GenerateSignedPostPolicyV4. The upload and retrieving work, but once the image is updated, the browser seems to cache the old file, for a long time, and I am not able to edit this caching. I already tried´to user the gcloud-cors-settings adding maxAgeSeconds:

[
  {
    "maxAgeSeconds": 10,
    "method": ["POST", "GET"],
    "origin": ["http://localhost:50030"],
    "responseHeader": ["Content-Type", "Cache-Control"]
  }
]

Did not help. I tried to add the 'Cache-Control' header:

export const uploadFile = (policy: PostPolicy, file: File): Promise<void> => {
  const formData = new FormData();

  for (const field in policy.fields) {
    const value = policy.fields[field];
    value && formData.append(field, value);
  }
  formData.append("file", file);

  const headers = new Headers();
  headers.append("Cache-Control", "public, max-age=15");

  return fetch(policy.url, {
    method: "POST",
    headers: headers,
    body: formData,
  }).then();
};

I don't get any error, but the header is ignored.

How can I fix this problem?

Answer 1

As mentioned in this document

By default, publicly readable objects are served with a Cache-Control header allowing such objects to be cached for 3600 seconds. If you need to ensure that updates become visible immediately, you should set a Cache-Control header of "Cache-Control:private, max-age=0, no-transform" on such objects. For help doing this, see gsutil help setmeta.

Also as stated here

There's no way to set a default Cache-Control header on newly uploaded files. It either needs to be set explicitly (by setting the header) at the time the object is written, or after the upload by updating the object's metadata using something like the gsutil command.