Strapi v4 Data Provider Example

wet-aqua · 2023-08-19T08:06:13.995Z

Hello, I got problem with file uploading. I downloaded your example and made collection in strapi admin panel. My problem is that the refine - client, can get image files when I make new record in database using strapi CMS but when i want to post some files through refine I got an error.

K

kapa.ai•8/19/23, 8:06 AM

Hi @sensib0i. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•8/19/23, 8:07 AM

----------------------
I'm sorry to hear that you're having trouble with file uploading in refine. Based on the information provided, it's hard to pinpoint the exact issue without more details. However, I can provide some general guidance on how to handle file uploads with refine and Strapi.

Firstly, ensure that you're using the correct endpoint for file uploads. In the examples provided, the endpoint used is

${API_URL}/api/upload

${API_URL}/api/upload

${API_URL}/api/upload

${API_URL}/api/upload. Replace

API_URL

API_URL

API_URL

API_URL with your Strapi server's URL.

Secondly, make sure you're sending the correct headers with your request. In the examples, an Authorization header is included with a Bearer token. This token should be the JWT token you get when you authenticate with your Strapi server.

Here's an example of how to handle file uploads with refine and Strapi:

K

kapa.ai•8/19/23, 8:07 AM

import { useState } from "react";  
import axios from "axios";  
import { Edit, useForm } from "@refinedev/mantine";  
import { Text } from "@mantine/core";  
import { Dropzone, IMAGE_MIME_TYPE, FileWithPath } from "@mantine/dropzone";  
  
const API_URL = "<http://localhost:1337";>  
const TOKEN_KEY = "strapi-jwt-token";  
  
export const PostEdit: React.FC = () => {  
 const [isUploadLoading, setIsUploadLoading] = useState(false);  
  
 const { saveButtonProps, setFieldValue } = useForm<any>({  
 initialValues: {  
 title: "",  
 cover: "",  
 },  
 });  
  
 const handleOnDrop = async (files: FileWithPath[]) => {  
 try {  
 setIsUploadLoading(true);  
  
 const formData = new FormData();  
  
 const file = files[0];  
  
 formData.append("files", file);  
  
 const res = await axios.post(`${API_URL}/api/upload`, formData, {  
 headers: {  
 Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,  
 },  
 });  
  
 setFieldValue("cover", res.data[0].id);  
  
 setIsUploadLoading(false);  
 } catch (error) {  
 setIsUploadLoading(false);  
 }  
 };  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <form>  
 <Text mt={8} weight={500} size="sm" color="#212529">  
 Cover  
 </Text>  
 <Dropzone  
 accept={IMAGE_MIME_TYPE}  
 onDrop={handleOnDrop}  
 loading={isUploadLoading}  
 >  
 <Text align="center">Drop images here</Text>  
 </Dropzone>  
 </form>  
 </Edit>  
 );  
};

import { useState } from "react";  
import axios from "axios";  
import { Edit, useForm } from "@refinedev/mantine";  
import { Text } from "@mantine/core";  
import { Dropzone, IMAGE_MIME_TYPE, FileWithPath } from "@mantine/dropzone";  
  
const API_URL = "<http://localhost:1337";>  
const TOKEN_KEY = "strapi-jwt-token";  
  
export const PostEdit: React.FC = () => {  
 const [isUploadLoading, setIsUploadLoading] = useState(false);  
  
 const { saveButtonProps, setFieldValue } = useForm<any>({  
 initialValues: {  
 title: "",  
 cover: "",  
 },  
 });  
  
 const handleOnDrop = async (files: FileWithPath[]) => {  
 try {  
 setIsUploadLoading(true);  
  
 const formData = new FormData();  
  
 const file = files[0];  
  
 formData.append("files", file);  
  
 const res = await axios.post(`${API_URL}/api/upload`, formData, {  
 headers: {  
 Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,  
 },  
 });  
  
 setFieldValue("cover", res.data[0].id);  
  
 setIsUploadLoading(false);  
 } catch (error) {  
 setIsUploadLoading(false);  
 }  
 };  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <form>  
 <Text mt={8} weight={500} size="sm" color="#212529">  
 Cover  
 </Text>  
 <Dropzone  
 accept={IMAGE_MIME_TYPE}  
 onDrop={handleOnDrop}  
 loading={isUploadLoading}  
 >  
 <Text align="center">Drop images here</Text>  
 </Dropzone>  
 </form>  
 </Edit>  
 );  
};

import { useState } from "react";  
import axios from "axios";  
import { Edit, useForm } from "@refinedev/mantine";  
import { Text } from "@mantine/core";  
import { Dropzone, IMAGE_MIME_TYPE, FileWithPath } from "@mantine/dropzone";  
  
const API_URL = "<http://localhost:1337";>  
const TOKEN_KEY = "strapi-jwt-token";  
  
export const PostEdit: React.FC = () => {  
 const [isUploadLoading, setIsUploadLoading] = useState(false);  
  
 const { saveButtonProps, setFieldValue } = useForm<any>({  
 initialValues: {  
 title: "",  
 cover: "",  
 },  
 });  
  
 const handleOnDrop = async (files: FileWithPath[]) => {  
 try {  
 setIsUploadLoading(true);  
  
 const formData = new FormData();  
  
 const file = files[0];  
  
 formData.append("files", file);  
  
 const res = await axios.post(`${API_URL}/api/upload`, formData, {  
 headers: {  
 Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,  
 },  
 });  
  
 setFieldValue("cover", res.data[0].id);  
  
 setIsUploadLoading(false);  
 } catch (error) {  
 setIsUploadLoading(false);  
 }  
 };  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <form>  
 <Text mt={8} weight={500} size="sm" color="#212529">  
 Cover  
 </Text>  
 <Dropzone  
 accept={IMAGE_MIME_TYPE}  
 onDrop={handleOnDrop}  
 loading={isUploadLoading}  
 >  
 <Text align="center">Drop images here</Text>  
 </Dropzone>  
 </form>  
 </Edit>  
 );  
};

import { useState } from "react";  
import axios from "axios";  
import { Edit, useForm } from "@refinedev/mantine";  
import { Text } from "@mantine/core";  
import { Dropzone, IMAGE_MIME_TYPE, FileWithPath } from "@mantine/dropzone";  
  
const API_URL = "<http://localhost:1337";>  
const TOKEN_KEY = "strapi-jwt-token";  
  
export const PostEdit: React.FC = () => {  
 const [isUploadLoading, setIsUploadLoading] = useState(false);  
  
 const { saveButtonProps, setFieldValue } = useForm<any>({  
 initialValues: {  
 title: "",  
 cover: "",  
 },  
 });  
  
 const handleOnDrop = async (files: FileWithPath[]) => {  
 try {  
 setIsUploadLoading(true);  
  
 const formData = new FormData();  
  
 const file = files[0];  
  
 formData.append("files", file);  
  
 const res = await axios.post(`${API_URL}/api/upload`, formData, {  
 headers: {  
 Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,  
 },  
 });  
  
 setFieldValue("cover", res.data[0].id);  
  
 setIsUploadLoading(false);  
 } catch (error) {  
 setIsUploadLoading(false);  
 }  
 };  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <form>  
 <Text mt={8} weight={500} size="sm" color="#212529">  
 Cover  
 </Text>  
 <Dropzone  
 accept={IMAGE_MIME_TYPE}  
 onDrop={handleOnDrop}  
 loading={isUploadLoading}  
 >  
 <Text align="center">Drop images here</Text>  
 </Dropzone>  
 </form>  
 </Edit>  
 );  
};

(Source: refine.dev/docs (https://refine.dev/docs/packages/documentation/data-providers/strapi-v4))

If you're still having trouble, it would be helpful to know the exact error message you're receiving.
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•8/19/23, 8:07 AM

@667849704293269515 kapa.ai is still learning and improving, please let us know how it did by reacting below

W

wet-aquaOP•8/19/23, 8:11 AM

@kapa.ai
I doesn't give me nothing. I just got your example repo cloned on my local machine, so we base on the same resource. (also I choosen Ant Design instead of Mantine in your example).

Thats the error I got notification in client side:
1 relation(s) of type plugin::upload.file associated with this entity do not exist
There was an error creating company (status code: 400)

Also when I check Network tab in Developer browser Tools I have there an error of type xhr that has following response in header (raw format)

HTTP/1.1 400 Bad Request
Content-Security-Policy: connect-src 'self' https:;img-src 'self' data: blob: https://market-assets.strapi.io;media-src 'self' data: blob:;default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline'
Referrer-Policy: no-referrer
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
X-DNS-Prefetch-Control: off
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
Vary: Origin
Access-Control-Allow-Origin: http://localhost:5173
Access-Control-Allow-Credentials: true
Content-Type: application/json; charset=utf-8
Content-Length: 311
Date: Sat, 19 Aug 2023 08:08:30 GMT
Connection: keep-alive
Keep-Alive: timeout=5

K

kapa.ai•8/19/23, 8:11 AM

Let me check the knowledge base for you. One moment!

K

kapa.ai•8/19/23, 8:12 AM

----------------------
I'm sorry to hear that you're still having trouble. The error message you're seeing suggests that there might be an issue with the relationship between the entity you're trying to create and the file you're trying to upload.

In Strapi, when you create a relation with the

upload

upload

upload

upload plugin, it creates a relation in the database. The error message suggests that this relation does not exist. This could be due to a misconfiguration in your Strapi setup.

Here are a few things you could check:

Check your Strapi model configuration: Ensure that the model you're trying to create has a relation with the
```
upload
```
upload
```
upload
```
upload
plugin. This is usually defined in the model's settings JSON file in Strapi.
Check the data you're sending in your request: When you're creating a new entity and want to associate a file with it, you need to send the ID of the uploaded file. In the example code, this is done with
```
setFieldValue("cover", res.data[0].id);
```
setFieldValue("cover", res.data[0].id);
```
setFieldValue("cover", res.data[0].id);
```
setFieldValue("cover", res.data[0].id);
. Make sure that the file is being uploaded correctly and that you're sending the correct file ID.
Check your Strapi server logs: There might be more information about the error in your Strapi server logs. This could give you more insight into what's going wrong.

If you're still having trouble, I would recommend reaching out to the Strapi community or checking the Strapi documentation (https://docs.strapi.io/developer-docs/latest/getting-started/introduction.html) for more information.
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•8/19/23, 8:12 AM

@667849704293269515 kapa.ai is still learning and improving, please let us know how it did by reacting below

W

wet-aquaOP•8/19/23, 9:57 AM

Ok, it was a strapi cors configuration problem.

Theres a solution if someone have same problem.
https://stackoverflow.com/questions/71382302/setting-cors-in-strapi-4

Stack Overflow

Setting cors in strapi 4

I'm using strapi 4 as localhost and got a problem with cors settings when I add new assets via url
Image upload takes CORS error Access to XMLHttpRequest at 'https://www.countrysideveterinaryclinic...

C

colossal-harlequin•8/19/23, 11:17 AM

Hey @simbafs,

You can also check these examples https://refine.dev/docs/examples/?tags=upload,antd