1

I'm having a hard time figuring out how to link the files I upload to Google Cloud. I found that the link to the images I'm uploading are formatted like this:

storage.googleapis.com/bucket/image.jpeg

But the name of the image keeps getting randomized upon upload. The authorization link in the bucket on GCS looks like this: https://storage.cloud.google.com/bucket/45jwaxo0ekkmj9sk7ojqyshrtl9l With the Object name being: 45jwaxo0ekkmj9sk7ojqyshrtl9l instead of "image.jpeg"

My front end is written in React and the form responsible for uploading it looks like this:

function Home(){
function handleSubmit(event) {
    event.preventDefault()
    const formData = new FormData();
    formData.append('image', moviepic);
    formData.append('title', moviepic.name);
    fetch('/movies', {
          method: 'POST',
          body: formData
        })

        console.log(formData)
      }

return(
<div id='uploadform'>

      <form onSubmit={handleSubmit}>
<input type="file" name="image"accept="image/png, image/jpeg" onChange={(e) => setMoviepic(e.target.files[0])}/>
                    <input type='submit'/>
            </form> 


<img src = "I'm trying to figure this out" />

</div>
)
}

I want to be able to upload my image files to GCS with their original names in place so I can link them in my image tags in the front end. Any suggestions would be greatly appreciated.

message on server console when I upload the file to gcs

Vikalp Malhotra
  • 11
  • 2
  • Can you elaborate on what you mean by the image name getting randomized on upload? What does the browser debug show as the final REST request being sent to GCS? – Kolban May 12 '22 at 03:30
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community May 12 '22 at 11:16

0 Answers0