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

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);
  };
Was this page helpful?