0

I have been working on a project using next.js and sanity but I can't seem to find a way to upload images to Sanity. I have been following the Sanity tutorial on how to upload assets and it works only if I set the filepath manually or if the assets are in the same project folder.

Below is the sanity method I have been using the upload the files.

const filePath = '/Users/mike/images/bicycle.jpg'

client.assets
  .upload('image', createReadStream(filePath), {
    filename: basename(filePath)
  })
  .then(imageAsset => {
    return client
      .patch('some-document-id')
      .set({
        theImageField: {
          _type: 'image',
          asset: {
            _type: "reference",
            _ref: imageAsset._id
          }
        }
      })
      .commit()
  })
  .then(() => {
    console.log("Done!");
  })

The main issue for me is the onchange handler returns a fake path which I understand is due to browser security and for images to successfully upload there should be an actual filepath like C:/Users/user/downloads/image.jpg instead of C:/fakepath/image.jpg

I have also attempted to change the onChange handler to get the filename only but I still can't upload the images because of the filepath issue.

const [image, setImage] = React.useState(null)

function handleImage(e){
  const selectedFile = e.target.files[0]
  if(selectedFile){
    return setImage(selectedFile.name) 
  }      
}

I have tried to use formidable but I didn't succeed as well. Please assist with a method on how to upload images.

Ameiz
  • 646
  • 3
  • 9
  • I am in the same shoe, have you found any solution? – Dhruv patel Aug 15 '22 at 22:02
  • Not yet. I ended up switching back to Django but here's something that I have found just now https://www.section.io/engineering-education/uploading-deleting-and-downloading-images-uploaded-to-sanity-io/. I will try this method later and post an update here. – Ameiz Aug 16 '22 at 10:52

0 Answers0