0

I am using react.js for front-end,I am trying to uplode the Image directly to aws,via geting url from the my server.

const handleSubmit = async (e) => {
e.preventDefault()
// In this get we url from to uplode profile image to s3 bucket ,first get url from server and then use that url to uplode directly to aws
const res = await fetch("/api/website/aws/get-s3-upload-url")   ---url from server to uplode to aws
const data_2 = await res.json()
const profile_url = await data_2.uploadUrl

console.log(`This is profile url ${profile_url}`)

// Now use this url to uplode the image to aws
let form_data = new FormData()
form_data.append("profile_image", profile)

const resp = await fetch(profile_url, {
  method: "PUT",
  headers: {
    "Content-type": "multipart/form-data",
  },
  body: profile,
})
const data_3 = await resp

The response I am getting from aws after uplode is: enter image description here

What I want is key of the object that i can save to my serve,and when require I can fetch the Image. How can I achive this

Rich MindSet Rohit
  • 1
  • There is a field named url in the request .. you can save this field into the server & when require you can view image by fetching the url . check out by taking a url & paste it into the browser's search box. It will take you to the image where the url is specified. – Sharif Himu Nov 03 '21 at 05:22
  • @SharifHimu No brother I have tried that ,but to paste url has not solve the issue. – Rich MindSet Rohit Nov 03 '21 at 05:32
  • It should be .. check these questions answer.. https://stackoverflow.com/questions/32702431/display-images-fetched-from-s3.. Also, check that is your s3 bucket is public or private ... make it public for alltime. – Sharif Himu Nov 03 '21 at 10:03

0 Answers0