System Information:
Strapi Version: v4.10.4
Node Version: v18.12.1
NextJS Verison: 13.4.1
Hey!
I have a function in my nextJS Frontend where i have a form to create a new “Dateien” (CREATE_FILE) and also want to upload an image to this entry (UPLOAD_FILE). On Form Submit, the CREATE_FILE Mutation works fine as it should, but for the UPLOAD_FILE Mutation i get a 400 ERROR. I tried already to leave out the refId, ref and field variables and just upload the image to strapi, but here I also get a 400 ERROR.
Any Ideas how I can solve this?
The Function:
import { useState } from "react";
import { useMutation } from "@apollo/client";
import { CREATE_FILE, UPLOAD_FILE } from "../../../queries/queries";
const FileUploadForm = ({ refetch }) => {
const [formData, setFormData] = useState({
Titel: "",
einheiten: "",
});
const [file, setFile] = useState(null);
const [createFile] = useMutation(CREATE_FILE);
const [uploadFile] = useMutation(UPLOAD_FILE);
const [showSuccess, setShowSuccess] = useState(false);
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleFileChange = (e) => {
const selectedFile = e.target.files[0];
setFile(selectedFile);
console.log(selectedFile);
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
const { data } = await createFile({
variables: {
data: {
Titel: formData.Titel,
Datei: null,
einheiten: formData.einheiten,
},
} ,
});
if (file) {
const fileData = await uploadFile({
variables: {
refId: 14,
ref: "Dateien",
field: "Datei",
file: file,
},
});
console.log(fileData);
console.log(data.createFile.data.id)
}
await refetch();
await showSuccessElement();
} catch (error) {
console.log(error);
}
};
const showSuccessElement = () => {
setFormData({
Titel: "",
einheiten: "",
});
setFile(null);
};
return (
<div>
<div>
<h3>Neue Datei anlegen</h3>
<form onSubmit={handleSubmit}>
<label>
Einheiten:
<input
type="text"
name="einheiten"
value={formData.einheiten}
onChange={handleChange}
/>
</label>
<label>
Titel:
<input
type="text"
name="Titel"
value={formData.Titel}
onChange={handleChange}
/>
</label>
<label>
Datei:
<input
type="file"
name="Datei"
onChange={handleFileChange}
/>
</label>
<button className="send-user-register" type="submit">Datei anlegen</button>
</form>
</div>
</div>
);
};
export default FileUploadForm;
The CREATE_FILE Mutation:
const CREATE_FILE = gql `
mutation CreateDatei($data: DateienInput!) {
createDateien(data: $data) {
data {
id
attributes {
Titel
einheiten {
data {
id
}
}
Datei {
data {
id
}
}
}
}
}
}
`;
The UPLOAD_FILE Mutation:
const UPLOAD_FILE = gql `
mutation SinglePictureUpload($refId: ID, $ref: String, $field: String, $file: Upload!) {
upload(refId: $refId, ref: $ref, field: $field, file: $file) {
data {
attributes {
name
}
}
}
}
`;