S3 gateway multipart upload with presigned urls javascript

Developer Discussions
10

Can you paste the output of the etag header?

console.log("etag", resp.headers.get("etag"));

I’m not having any trouble getting the etag, so I’m not sure what’s different on your end.

I do see the preflight CORS request, but it’s followed by the upload request (I don’t do anything special here, see code below).

Screen Shot 2023-01-06 at 9.53.21 AM
Screen Shot 2023-01-06 at 9.53.21 AM724×288 27.2 KB

From the upload request I can see the etag in the response in the console. You’ll also notice access-control-expore-headers includes Etag, so the s3 gateway seems to be configured correctly.

Screen Shot 2023-01-06 at 9.54.03 AM
Screen Shot 2023-01-06 at 9.54.03 AM725×413 52.1 KB

Not entirely a js readablestream example, but it’s uploading a file in javascript in the browser. It’s more or less the curl example above converted to javascript.

import "./App.css";
import { useState } from "react";

function App() {
  const [loading, setLoading] = useState(null);
  const onSubmit = async (event) => {
    event.preventDefault();

    setLoading(true);
    try {
      let file = event.target[0].files[0];
      let url = `http://localhost:3001/create-multipart`;
      let params = new URLSearchParams({
        filename: file.name,
        path: "test",
      });
      let resp = await fetch(url, {
        method: "POST",
        body: params,
      });
      let createMultipartResp = await resp.json();

      console.log("create-multipart resp", createMultipartResp);

      url = `http://localhost:3001/presign-multipart`;
      params = new URLSearchParams({
        filename: file.name,
        path: "test",
        uploadId: createMultipartResp.UploadId,
        partNumber: 1,
      });
      resp = await fetch(url, {
        method: "POST",
        body: params,
      });
      let presignResp = await resp.json();

      resp = await fetch(presignResp.url, {
        method: "PUT",
        headers: {
          "Content-Type": file.type,
        },
        body: file,
      });
      console.log("resp", resp);
      console.log("etag", resp.headers.get("etag"));
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };
  return (
    <div className="App">
      <header className="App-header">
        <form onSubmit={onSubmit}>
          <input type="file" />
          <br />
          <button disabled={loading}>Upload!</button>
        </form>
      </header>
    </div>
  );
}

export default App;

Console output

create-multipart resp {$metadata: {…}, Bucket: 'demo-bucket', Key: 'test/Screen Shot 2022-10-05 at 3.54.43 PM.png', UploadId: '3svduYfAsQBXCtczhd58JgEhu5XTsJBqHY6J617e2DyKoTwYk2…d18Tpit5pCHGmMVj5KdSzc8wVU4cb6puUUJK1uHDeuUFw7BAD'}

resp Response {type: 'cors', url: 'https://demo-bucket.gateway.storjshare.io/test/Scr…5KdSzc8wVU4cb6puUUJK1uHDeuUFw7BAD&x-id=UploadPart', redirected: false, status: 200, ok: true, …}

etag "b855383d825388a64c782b30c330a822"
3 Likes