I am currently utilizing the @nuxtjs/cloudinary module based on the module guide and a course video. However, I am encountering an error in the response as follows:
Status 403, message: You don't have sufficient permissions to access this endpoint"My Cloudinary account is set up with Media Optimizer. The cloud name, API, and Secret keys are correctly configured. Upon further investigation, I discovered that the module is designed for Programmable Media product instead of Media Optimizer which has different API endpoints. Despite referring to the documentation, I was unable to resolve the issue. The course I am following is called Mastering Nuxt.
ImageUploader.vue
<template>
<div>
<input type="file" accept=".jpeg,.gpj,image/jpeg" @change="uploadFile" />
</div>
</template>
<script>
import { unWrap } from "~/utils/fetchUtils";
export default {
methods: {
async uploadFile(e) {
const file = e.target.files[0];
/* Validate file existence */
if (!file) return;
/* Configure cloudinary options object */
const filename = file.name.split(".").slice(0, -1).join(".") + Date.now();
const options = { timestamp: Date.now(), public_id: filename };
/* Create signature */
const response = await unWrap(
await fetch("/api/cloudinary/signature", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(options),
})
);
const signature = response.data.signature;
/* Read data */
const readData = (fileObj) =>
new Promise((resolve) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.readAsDataURL(fileObj);
});
const data = await readData(file);
/* Upload converted data */
console.log(signature); // testing
const asset = await this.$cloudinary.upload(data, {
...options,
apiKey: this.$config.cloudinary.apiKey,
signature,
});
},
},
};
</script>
nuxt.config
modules: [
"@nuxtjs/firebase",
"~/modules/cloudinary",
]
publicRuntimeConfig: {
cloudinary: {
apiKey: "399741578529427",
},
},
privateRuntimeConfig: {
cloudinary: {
apiSecret: "<My-Secret-API-Key>",
},
},
cloudinary: {
cloudName: "nuxtbnb-m98",
},
modules/cloudinray.js
import { createHash } from "crypto";
export default function () {
const config = this.options.privateRuntimeConfig.cloudinary;
this.nuxt.hook("render:setupMiddleware", (app) => {
app.use("/api/cloudinary/signature", setSignature);
});
function setSignature(req, res) {
try {
const sha1 = createHash("sha1");
const payload = [];
Object.keys(req.body).forEach((key) => {
payload.push(`${key}=${req.body[key]}`);
});
sha1.update(payload.sort().join("&") + config.apiSecret);
const signature = sha1.digest("hex");
res.end(
JSON.stringify({
signature,
})
);
} catch (error) {
console.log(error);
}
}
}