How do I set/update AWS s3 object metadata during image upload PUT request to signed url?

Question

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',
      },
    });
  };

Answer 1

It isn't possible to do that with presigned urls. When you create the presigned url, all properties are pre-filled. You can't change them, when uploading the file. The only thing you can control is the object's data. The bucket, the key and the metadata (and all other parameters of put_object) are predefined. This is also the case for generate_presigned_post. All fields are prefilled.

This makes sense, as the back-end grants the permissions and needs to decide on these. Also the implementation will be much more complicated, as presigned urls support all client methods, which have different parameters.

The only way you could do it, is to generate urls on-demand. First generate the pre-signed url, based on the name selected by the client and then do the upload. You will need two round-trips for every file. One to your server, for generating the url and one to S3 for the uploading.