cloudinary icon indicating copy to clipboard operation
cloudinary copied to clipboard

How to send signed server-side uploads

Open haykkh opened this issue 3 years ago • 0 comments

I've been trying to get signed server-side uploads to work without any luck. I have apiKey and apiSecret set in my nuxt.config.js, but can't seem to figure out how to call $cloudinary.upload from the server. Any help would be much appreciated!

nuxt.config.js:

export default {
  ...

  env: {
    cloudinaryUploadFolder: process.env.CLOUDINARY_UPLOAD_FOLDER,
    ...
  },

  modules: [
    "@nuxtjs/cloudinary",
    ...
  ],

  cloudinary: {
    cloudName: process.env.CLOUDINARY_CLOUDNAME,
    apiKey: process.env.CLOUDINARY_API_KEY,
    apiSecret: process.env.CLOUDINARY_API_SECRET,
  },

  ...
}

My code calling $cloudinary.upload:

  async addFile(event) {
    const droppedFiles = event.dataTransfer.files

    if (!droppedFiles) {
      return
    }

    await [...droppedFiles].forEach(async (file) => {
      const readData = (f) =>
        new Promise((resolve) => {
          const reader = new FileReader()
          reader.onloadend = () => resolve(reader.result)
          reader.readAsDataURL(f)
        })

      const data = await readData(file)

      await this.$cloudinary.upload(data, {
        folder: process.env.cloudinaryUploadFolder,
      })
    })
  }

And the request sent: Screen Shot 2021-12-29 at 18 33 34

haykkh avatar Dec 29 '21 14:12 haykkh