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?