I am uploading images from my react website to R2, everything is sucesfull but now i want to retrive
I am uploading images from my react website to R2, everything is sucesfull but now i want to retrive the url of the uploaded image, any advice is welcome
and in my react
import express from 'express';
import multer from 'multer';
import cors from 'cors';
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
import dotenv from 'dotenv';
const app = express();
const port = 4000;
app.use(cors());
dotenv.config();
const storage = multer.memoryStorage();
const upload = multer({
storage,
});
app.post('/upload', upload.single('file'), async (req, res) => {
const S3 = new S3Client({
region: 'auto',
endpoint: process.env.ENDPOINT,
credentials: {
accessKeyId: process.env.R2_ACCESS_KEY_ID,
secretAccessKey: process.env.R2_SECRET_ACCESS_KEY,
},
});
await S3.send(
new PutObjectCommand({
Body: req.file.buffer,
Bucket: 'travelme',
Key: req.file.originalname,
ContentType: req.file.mimetype,
})
);
res.send('File Uploaded' + ' ' + req.file.originalname);
});import express from 'express';
import multer from 'multer';
import cors from 'cors';
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
import dotenv from 'dotenv';
const app = express();
const port = 4000;
app.use(cors());
dotenv.config();
const storage = multer.memoryStorage();
const upload = multer({
storage,
});
app.post('/upload', upload.single('file'), async (req, res) => {
const S3 = new S3Client({
region: 'auto',
endpoint: process.env.ENDPOINT,
credentials: {
accessKeyId: process.env.R2_ACCESS_KEY_ID,
secretAccessKey: process.env.R2_SECRET_ACCESS_KEY,
},
});
await S3.send(
new PutObjectCommand({
Body: req.file.buffer,
Bucket: 'travelme',
Key: req.file.originalname,
ContentType: req.file.mimetype,
})
);
res.send('File Uploaded' + ' ' + req.file.originalname);
});and in my react
const [file, setFile] = useState('');
const handleChange = (e) => {
setFile(e.target.files[0]);
};
const handleSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('file', file);
const response = await fetch('http://localhost:4000/upload', {
method: 'POST',
body: formData,
});
const message = await response.text();
console.log(message);
}; const [file, setFile] = useState('');
const handleChange = (e) => {
setFile(e.target.files[0]);
};
const handleSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('file', file);
const response = await fetch('http://localhost:4000/upload', {
method: 'POST',
body: formData,
});
const message = await response.text();
console.log(message);
};




