I'm working with Strapi v4.1.7 and I'm trying to upload my images to Cloudinary in a specific folder (portfolio) but they just get added to the root folder of cloudinary.
Also I'm using "#strapi/provider-upload-cloudinary": "^4.1.9", package.
My plugins.js is as follows:
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: {
folder: env("CLOUDINARY_FOLDER", "portfolio"),
},
delete: {},
},
},
},
// ...
});
Also in my .env file, I have the folder set as follows:
....
CLOUDINARY_FOLDER=portfolio
Also, I was asking is it possible to create dynamic folders in Cloudinary like '/portfolio/Project1/all-project1-assets' from Strapi for all projects.
I need help to achieve this. Thanks !!!
Just change the Upload to uploadStream as highlighted below :
`actionOptions: {
uploadStream: {
folder: env("CLOUDINARY_FOLDER", "portfolio"),
},
delete: {},
},
`
You might have to create a upload preset in cloudinary, go to your Cloudinary Settings > Upload > Upload presets > Add upload preset, and then create a upload preset with a folder and in Signed Mode.
Related
I have a Strapi V4 dashboard deployed on heroku. Everything works fine, except for some images not being able to be deleted, with a Status code: 500 error.
plugins.js file below
screenshot of error on strapi
upload: {
config: {
provider: "cloudinary",
providerOptions: {
cloud_name: env("CLOUDINARY_NAME"),
api_key: env("CLOUDINARY_KEY"),
api_secret: env("CLOUDINARY_SECRET"),
},
actionOptions: {
upload: {},
delete: {},
},
},
},
The fix was to comment out config of cloudinary in plugins.js
That is not really SOLVING THE ISSUE:
Ok, after deactivating the cloudinary plugin the images in strapi “Media Library” can be deleted. But the same issue happens again when activating the cloudinary plugin.
After adding an image to my collection/single type the preview image Strapi shows is not displaying see here.
I inspected the img src and the src address is correct and the url correctly takes me to where the image is stored see here.
Does anyone know why / how to get the preview image working??
I am using the following:
strapi - v4.1.3
strapi-provider-upload-azure-storage - v2.0.0
node - v16.8.0
Azure storage and CDN
I fixed this issue by adding the following to my ./config/middlewares.js file:
module.exports = [
'strapi::errors',
'strapi::cors',
'strapi::poweredBy',
'strapi::logger',
'strapi::query',
'strapi::body',
'strapi::session',
'strapi::favicon',
'strapi::public',
{
name: 'strapi::security',
config: {
contentSecurityPolicy: {
directives: {
'connect-src': ["'self'", 'https:'],
'img-src': ["'self'", 'data:', 'blob:', `${AZURE_CDN_URL}`],
'media-src': ["'self'", 'data:', 'blob:', `${AZURE_CDN_URL}`],
upgradeInsecureRequests: null,
},
},
},
},
];
I have also encountered this issue when using other cloud provider, eg. Cloudinary. I found that this is a security middleware issues, anyone facing this issue on other providers can go to https://github.com/strapi/strapi/tree/master/packages/providers
Inside each provider guide, there's a section of:
Security Middleware Configuration
Due to the default settings in the Strapi Security Middleware you will need to modify the contentSecurityPolicy settings to properly see thumbnail previews in the Media Library. You should replace strapi::security string with the object bellow instead as explained in the middleware configuration documentation.
I fixing that error by using this settings:
module.exports = ({ env }) => [
"strapi::errors",
{
name: "strapi::security",
config: {
contentSecurityPolicy: {
directives: {
'connect-src': ['self', 'http:', env("SUPABASE_URL")],
'img-src': ['self', 'data:', 'blob:', , env("SUPABASE_URL"), 'https://dl.airtable.com'],
},
},
},
},
"strapi::cors",
"strapi::poweredBy",
"strapi::logger",
"strapi::query",
"strapi::body",
"strapi::session",
"strapi::favicon",
"strapi::public",
];
into middleware.js
After restarting thumbnail preview start working properly.
UPDATE: I installed Strapi version 3.6.3 and it works well
Strapi - Clouinary connection do not work for me. So I'm uploading pictures to Stapi, but they don't appear in Clouinary.
In config folder I created file plugins.js with following content:
module.exports = ({
env
}) => ({
// ...
upload: {
provider: 'cloudinary',
providerOptions: {
cloud_name: env('CLOUDINARY_NAME'),
api_key: env('CLOUDINARY_KEY'),
api_secret: env('CLOUDINARY_SECRET'),
},
},
// ...
});
I have installed npm i strapi-provider-upload-cloudinary
then changed file .env to
PORT=1337
CLOUDINARY_NAME="***"
CLOUDINARY_KEY="***"
CLOUDINARY_SECRET="***"```
Actually automatically following code added automatically:
```JWT_SECRET=*********
API_TOKEN_SALT=*********
JWT_SECRET=*********
What could be a problem?
should CLOUDINARY_SECRET be in "quotes"? or in 'quotes' or without quotes?
Terminal output after adding image is following:
http://localhost:1337
[2021-12-07 02:10:14.702] http: POST /upload (261 ms) 200
[2021-12-07 02:10:14.744] http: GET /upload/files?sort=updatedAt:DESC&page=1&pageSize=10 (24 ms) 200
[2021-12-07 02:10:14.758] http: GET /uploads/thumbnail_Screenshot_2021_11_26_130226_11a95e81ea.png?width=1504&height=1258 (4 ms) 200
All permissions seems to be set...
Also created extentions/upload/config/setting.json with the following content:
"provider": "cloudinary",
"providerOptions": { "cloud_name":"devert0mt",
"api_key": "***",
"api_secret":"***"
}
}{
"provider": "cloudinary",
"providerOptions": { "cloud_name":"devert0mt",
"api_key": "***",
"api_secret":"***"
}
}```
If you want to use the latest version of Strapi, v.4 and above, you need to change strapi provider package to this one:
npm install #strapi/provider-upload-cloudinary --save
Then, you need to update your plugins.js file in config/plugins.js to the following ( Be aware that it has a slightly different structure than the previous package - everything is placed in config object, instead of upload like it was on a previous version):
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: {},
delete: {},
},
},
},
// ...
});
Also, if you are having issues with properly rendering your images on your Strapi dashboard you can update middlewares.js in config/middlewares.js:
Instead of 'strapi::security' in module.exports, paste this:
// ...
{
name: 'strapi::security',
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
'connect-src': ["'self'", 'https:'],
'img-src': ["'self'", 'data:', 'blob:', 'res.cloudinary.com'],
'media-src': ["'self'", 'data:', 'blob:', 'res.cloudinary.com'],
upgradeInsecureRequests: null,
},
},
},
},
// ...
I am using the StoryShots addon for Storybook to test snapshots from my React project. I would like to save all snapshot files in one directory in relation to the project directory. The default is that the snapshots are saved in relation to the story's location. I tried various configurations (like working with __dirname) but couldn't come up with a solution yet. Maybe someone has an idea?
Here is my storyshots test file used by Jest (storyshots.test.ts):
import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter } from '#storybook/addon-storyshots'
initStoryshots({
test: multiSnapshotWithOptions(),
stories2snapsConverter: new Stories2SnapsConverter({
snapshotsDirName: './__snapshots__/',
storiesExtensions: ['.js', '.jsx', '.ts', '.tsx'],
})
})
You can do something like this:
const IMAGE_SNAPSHOT_DIR = path.resolve(path.join(__dirname, 'component-image-snapshots'));
initStoryshots({
test: imageSnapshot({
getMatchOptions: (option) => {
const filename = option.context.kind.replace(' ', '');
return {
customSnapshotsDir: path.join(IMAGE_SNAPSHOT_DIR, filename),
};
},
}),
});
I am currently trying to load a csv file into a Nuxt page. The folder structure is below and produces the error "Failed to load resource: the server responded with a status of 404 (Not Found)":
Project
|
+--pages
|
+--lesson
|
+--index.vue
+--file.csv
import * as d3 from 'd3';
export default{
data(){
return{
dataset1:[]
}
mounted(){
d3.csv('file.csv', (myData) => {
console.log('Mydta', myData);
this.dataset1 = myData;
})
}
}
I have added the following to the web pack config in the nuxt-folder:
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
config = {
module: {
rules: [
{
test: /\.csv$/,
loader: 'csv-loader',
options: {
dynamicTyping: true,
header: true,
skipEmptyLines: true
}
}
]
}
}
}
}
Thanks in advance
I recently had the same question and ended up using the #nuxt/content module – worked like a charm, didn't even need to include d3 (which is usually my go-to for parsing CSV files).
I believe the issue is you cannot access the csv file the way you are attempting to, the way to do that would be storing the file in the '/assets' directory which you can then access as shown in the docs I linked ~/assets/file.csv I think this is also a more correct location for storing such files to avoid having lingering files throughout the project
This worked for me:
async mounted() {
const d = await d3.csv("/data.csv");
console.log(d);
}
With data.csv placed in public folder.