System Information
- Strapi Version: 4.11.1
- Operating System: Windows 10
- Database: SQLite
- Node Version: 18.16.0
- NPM Version: 9.5.1
- Yarn Version:
On uploading a image from next.js frontend, image is uploaded on cloudinary but not on strapi backend, which shows 500 internal server error, on fetching the image. I’m using fetch() method like this:
const formData = new FormData();
formData.append("files", image);
formData.append("ref", "events");
formData.append("refId", evtId);
formData.append("field", "image");
console.log("formData: ", formData.get("files"));
const res = await fetch(`${API_URL}/upload`, {
method: "POST",
body: formData,
});
this method uploads the image on cloudinary, but I don’t see the image on the strapi media library.
before implementing this image upload feature everything was working fine, but after this I’m getting this type of response in browser console from the server, which is not exactly an error:
https://pasteboard.co/x9fZsdV9o9zX.jpg
Response {
"data": null,
"error": {
"status": 500,
"name": "InternalServerError",
"message": "Internal Server Error"
}
}
this is the error I get in my server console, which says: “error: Cannot read properties of undefined (reading
‘attributes’)”:
https://pasteboard.co/tKsshPzbzdTL.jpg
at async Object.upload (F:\myProjects\next.js-events-manager-trav\events-manager-backend\node_modules\@strapi\plugin-upload\server\services\upload.js:172:23)
[2023-06-23 10:18:50.876] error: Cannot read properties of undefined (reading
'attributes')
TypeError: Cannot read properties of undefined (reading 'attributes')
my plugins.js file in strapi backend is like this:
module.exports = ({ env }) => ({
// ...
upload: {
config: {
provider: 'cloudinary',
providerOptions: {
cloud_name: env('CLOUDINARY_NAME'),
api_key: env('CLOUDINARY_KEY'),
api_secret: env('CLOUDINARY_SECRET'),
},
actionOptions: {
upload: {},
uploadStream: {},
delete: {},
},
},
},
// ...
// ...
slugify: {
enabled: true,
config: {
contentTypes: {
event: {
field: 'slug',
references: 'name',
},
},
},
},
// ...
//...
});
and middleware.js is like this:
module.exports = [
'strapi::errors',
// 'strapi::security',
// 'strapi::cors',
'strapi::poweredBy',
'strapi::logger',
'strapi::query',
'strapi::body',
'strapi::session',
'strapi::favicon',
'strapi::public',
{
name: 'strapi::security',
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
'connect-src': ["'self'", 'https:'],
'img-src': ["'self'", 'data:', 'blob:', 'market-assets.strapi.io', 'res.cloudinary.com'],
'media-src': [
"'self'",
'data:',
'blob:',
'market-assets.strapi.io',
'res.cloudinary.com',
],
upgradeInsecureRequests: null,
},
},
},
},
{
name: 'strapi::cors',
config: {
origin: ['http://localhost:3000', 'http://localhost:1337', 'https://subdomain.example.com', 'https://someotherwebsite.org'],
methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
headers: ['Content-Type', 'Authorization', 'Origin', 'Accept'],
keepHeaderOnError: true,
},
},
];
Please help me in resolving this error. Thanks.