Is there a way to include the uploaded file name in AWS S3 with a random or unique identifier within a NextJS application?
I am able to set metadata from the backend, but I want to know how to update it during the PUT request when the image is being uploaded to the signed URL. Can this be achieved?
To clarify: I want to modify metadata while making a PUT request to the signed URL. Currently, I have set it to "none" on the backend to prevent forbidden errors (which appears as metadata in S3). Is it possible to change this metadata during the PUT request, or should I consider another approach? Thank you!
// Backend code for obtaining 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',
},
});
};