Browser uploads

// Ask your own API for a signed URL, then PUT the file straight to PopCloud.
// The Content-Type here must match the one your server signed, or the
// signature will not verify.
async function uploadFile(file) {
  const response = await fetch("/api/uploads", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ filename: file.name, contentType: file.type }),
  });
  const { url, key } = await response.json();

  const put = await fetch(url, {
    method: "PUT",
    headers: { "Content-Type": file.type },
    body: file,
  });
  if (!put.ok) throw new Error(`upload failed: ${put.status}`);

  return key;
}

// Your API endpoint. Authenticate the user, decide the key yourself, and pin
// the content type into the signature so the browser cannot upload something
// else under it.
async function createUploadUrl({ key, contentType }) {
  return getSignedUrl(
    s3,
    new PutObjectCommand({
      Bucket: process.env.POPCLOUD_BUCKET,
      Key: key,
      ContentType: contentType,
    }),
    { expiresIn: 300 }, // short — the browser uses it immediately
  );
}

// fetch() cannot report upload progress. XMLHttpRequest still can, and it is
// the only reason to reach for it here.
function uploadWithProgress(url, file, onProgress) {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open("PUT", url);
    request.setRequestHeader("Content-Type", file.type);
    request.upload.addEventListener("progress", (event) => {
      if (event.lengthComputable) onProgress(event.loaded / event.total);
    });
    request.addEventListener("load", () =>
      request.status < 300 ? resolve() : reject(new Error(`upload failed: ${request.status}`)),
    );
    request.addEventListener("error", () => reject(new Error("upload failed")));
    request.send(file);
  });
}

// Reading back a private object works the same way: sign a GET and hand the
// URL to an <img>, <video> or download link.
async function createDownloadUrl({ key }) {
  return getSignedUrl(
    s3,
    new GetObjectCommand({ Bucket: process.env.POPCLOUD_BUCKET, Key: key }),
    { expiresIn: 3600 },
  );
}

# The control plane authenticates people, not machines: there is no API key.
# Get an access token, and use it for the rest of the session.
TOKEN=$(curl -fsS -X POST "$API/v1/auth/login" \
  -H 'Content-Type: application/json' \
  -d '{"email":"you@example.com","password":"…"}' \
  | python3 -c 'import json,sys; print(json.load(sys.stdin)["access_token"])')

# Replaces the bucket's rules wholesale — send every origin you need, not just
# the new one. Read the current set first with GET if you are unsure.
#
# An origin is a scheme and host with no trailing slash, or "*". The dashboard's
# own rule is re-added for you if you leave it out, so the file browser keeps
# working from the screen you are editing.
curl -fsS -X PUT "$API/v1/buckets/$BUCKET/cors" \
  -H "Authorization: Bearer $TOKEN" \
  -H 'Content-Type: application/json' \
  -d '{
        "rules": [
          {
            "name": "myApp",
            "origins": ["https://app.example.com", "http://localhost:3000"],
            "methods": ["GET", "PUT", "HEAD"],
            "headers": ["*"],
            "expose_headers": ["etag"],
            "max_age_seconds": 3600
          }
        ]
      }'

curl -fsS "$API/v1/buckets/$BUCKET/cors" -H "Authorization: Bearer $TOKEN"