I'm trying to include the name of the file that is uploaded to AWS S3 and given a random/unique name in a NextJS app.

I can set metadata from the backend, but I would like to update it from my put request (where the image is actually uploaded) to the signed URL. How would I do this?

To be clear: I would like to set metadata when I do a PUT request to the signed URL. I currently have it set to "none" on the backend to avoid forbidden errors (and this shows up as metadata in s3). Is this possible to update that metadata from my PUT request is there another approach I should take? Thanks!

// Backend code to get signed URL

async function handler(req, res) {
  if (req.method === 'GET') {
    const key = `content/${uuidv4()}.jpeg`;

    s3.getSignedUrl(
      'putObject',
      {
        Bucket: 'assets',
        ContentType: 'image/jpeg',
        Key: key,
        Expires: 5 * 60, 
        Metadata: {
          'file-name': "none",
        }
      },
      (err, url) => res.send({ key, url }) 
    );
  }

// Frontend code 

const [file, setFile] = useState(null);

const onFileUpload = async (e) => {
    e.preventDefault();

    const uploadConfig = await fetch('/api/upload');
    const uploadURL = await uploadConfig.json();

    await fetch(uploadURL.url, {
      body: file,
      method: 'PUT',
      headers: {
        'Content-Type': file.type,
        'x-amz-meta-file-name': 'updated test name',
      },
    });
  };