How do I upload a file into google cloud storage using HTML forms?

I want to upload a file directly to a google cloud storage bucket from client side using HTML forms.

I tried the steps given at https://cloud.google.com/storage/docs/xml-api/post-object-forms

I created a policy document in the same template given in https://cloud.google.com/storage/docs/authentication/signatures#policy-document

{"expira开发者_如何学运维tion": "2020-06-16T11:11:11Z",
 "conditions": [
  ["starts-with", "$key", ""],
  {"bucket": "travel-maps"},
  {"success_action_redirect": "http://www.example.com/success_notification.html"},
  ["eq", "$Content-Type", "image/jpeg"],
  ["content-length-range", 0, 1000000],
  {"x-goog-algorithm": "GOOG4-RSA-SHA256"},
  {"x-goog-credential": "example_account@example_project.iam.gserviceaccount.com/20191102/us-central1/storage/goog4_request"},
  {"x-goog-date": "20191102T043530Z"}
  ]
}

I'm using the HMAC-SHA256 signing algorithm to achieve my goal.

I've used the crypto-js library and followed the above psuedo-code to create my signing key.

I get this error message when I try to upload ->

<Error>
<Code>SignatureDoesNotMatch</Code>
<Message>The request signature we calculated does not match the signature you provided. Check your Google secret key and signing method.</Message>
<StringToSign>eyJleHBpcmF0a...</StringToSign>
</Error>

I don't think there is anything wrong with my implementation of the below psuedo-code. I verified the signing_key with another HMAC encryption-decrytion services online.

key_date = HMAC-SHA256("PREFIX" + HMAC_KEY_SECRET, "DATE")
key_region = HMAC-SHA256(key_date, "LOCATION")
key_service = HMAC-SHA256(key_region, "SERVICE")
signing_key = HMAC-SHA256(key_service, "REQUEST_TYPE")

below is my implementation

    let key_date = crypto.HmacSHA256("20221207","GOOG4" + key);
    let key_region = crypto.HmacSHA256("asia-south2",key_date);
    let key_service = crypto.HmacSHA256("storage",key_region);
    let signing_key = crypto.HmacSHA256("goog4_request",key_service);

  
    let encoded_policy = btoa((JSON.stringify(this.PolicyDocument)));

    let MessageDigest = crypto.HmacSHA256(encoded_policy,signing_key);

    this.signature=MessageDigest.toString();

Remove Content-type as mentioned in this github thread or change Content-type to text/csv or text/plain

Also check HTTP method also matching as mentioned here.

For more information check this thread1 & thread2