<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Uploader</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.799.0/aws-sdk.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
<button onclick="uploadFile()">Upload</button>
<div id="result"></div>
<script>
const bucketName = ‘pics’;
const region = 'auto';
const accessKeyId = 'e706e35f2bf8d2c9e34583c251325e3c';
const secretAccessKey = 'bcbf755dac461678898e0987f20d4e9df3ad6edd91bff029b129c845a93068d8';
const s3 = new AWS.S3({
endpoint: `https://${accessKeyId}.r2.cloudflarestorage.com`,
accessKeyId: accessKeyId,
secretAccessKey: secretAccessKey,
signatureVersion: 'v4',
region: region
});
function uploadFile() {
const file = document.getElementById('fileInput').files[0];
if (!file) {
alert('Please select a file to upload');
return;
}
const params = {
Bucket: bucketName,
Key: file.name,
Body: file,
ACL: 'public-read'
};
s3.upload(params, function(err, data) {
if (err) {
console.log('Error', err);
} if (data) {
console.log('Upload Success', data.Location);
document.getElementById('result').innerHTML = `Image uploaded. URL: ${data.Location}`;
}
});
}
</script>
</body>
</html>