Uploading files from the frontend

import Database from '@withkoji/database';

const getUploadURL = async (req, res) => {
  try {
    const { filename } = req.body;

    const db = new Database({
      projectId: res.locals.KOJI_PROJECT_ID,
      projectToken: res.locals.KOJI_PROJECT_TOKEN,
    });

    const data = await db.generateSignedUploadRequest(filename);

    res.status(200).json({ data });
  } catch (err) {
    console.log('err', err);
    res.status(500).json({ err: err.toString() });
  }
};

export default getUploadURL;

const { data: { data: { signedRequest, url } } = {} } = await axios({
  method: 'post',
  url: `${serviceMap.backend}/get-upload-url`,
  data: {
    filename: file.name,
  },
  headers: {
    'Content-Type': 'application/json',
  },
});

// Build form data to send to s3
const formData = new FormData();

// Attach each of the request fields to the form
Object.keys(signedRequest.fields).forEach((key) => {
  formData.append(key, signedRequest.fields[key]);
});

// Append file last
formData.append('file', file);

// Post to s3
const { status } = await axios({
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  method: 'POST',
  data: formData,
  url: signedRequest.url,
});

if (status === 204) {
  const image = new window.Image()
  image.onload = () => {
    document.body.append(image);
  }
  image.src = signedRequest.url;
}

{
  data: {
    signedRequest: {
      url: string; (1)
      fields: {
        Policy: string; (2)
        X-Amz-Algorithm: string; (3)
        X-Amz-Credential: string; (4)
        X-Amz-Date: string; (5)
        X-Amz-Signature: string; (6)
        bucket: string; (7)
        key: string; (8)
      }
    },
    url: string; (9)
  }
}