403 error on upload to S3 private bucket using pre-signed URL

Question

I have a React app using Amplify where each user has a private folder in an S3 bucket. Users can upload and download files to their private bucket only. I would like certain users to be able to upload files to the private folders of other users using S3 pre-signed URLs.

I made a Lambda function on the backend that generates the pre-signed URL:

// do some authorization checks...
let key = uuidv4() + '.pdf'
let params = {
   Bucket: config.bucket,
   Key: key,
   ContentType: 'application/pdf',
   Expires: config.signedUrlExpirySeconds,
}
const url = await s3.getSignedUrl('putObject', params)
return url

I now have the URL in my front-end, where

const [ file, setFile ] = useState(null)

const handleChange = async (e) => {
   const { target: { value, files }} = e
   setFile(files[0])
}

const getURL = async () => {
   // get the pre-signed URL...
}

const upload = async (url, type) => {
  try {
    const result = await axios.put(url, file, {
      headers: {
        'Content-Type': type
      }
    })
  }
  catch (err) {
    console.log(err)
  }
}

const handleUpload = async () => {
   const url = await getURL()
   await upload(url, 'application/pdf')
}

return (
   <div>
      <input type="file" accept=".pdf" onChange={handleChange} />
      <button onClick={handleUpload}>Upload</button>
   </div>
)

However, this returns a 403 error:

Error: Request failed with status code 403
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:62)

Is there anything I am missing ?

Perhaps with bucket policy or CORS or whether my use of useState to store the uploaded file (or do I need to convert it to something)?

If helpful, my bucket policy is:

{
    "Version": "2012-10-17",
    "Id": "Policy1624459513917",
    "Statement": [
        {
            "Sid": "Stmt1624459491997",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::##########/public/images/*"
        },
        {
            "Sid": "Stmt1624459491997b",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::##########/protected/*/images/*"
        }
    ]
}

Answer 1

According to OP's comment, adding s3:PutObject to the lambda role worked.