Hello. I’ve been trying to upload an image from the frontend without vail. I was hoping to get some advice in where within my code I might be making a mistake.
For my frontend, I’m mainly setting the image through the use of FormData and sending it back to the backend as
const handleProductCreation = () => createProduct({ variables: buildForm() });
const handeSetImage = ({ target }) => {
const data = new FormData();
data.append('fileData', target.files[0].name);
setImage(target.files[0]);
};
const onSubmit = (e) => {
e.preventDefault();
handleProductCreation();
};
const buildForm = () => {
let storeID = 2;
return {
productName,
productDescription,
productPrice,
productType,
isReturnable,
storeID,
fileData
};
};
This all goes through a graphql mutation that I created. The request looks like:
export const CREATE_PRODUCT_MUTATION = gql`
mutation CreateProduct(
$storeID: Int!
$productName: String!
$productDescription: String!
$productPrice: Decimal!
$productType: Int!
$isReturnable: Boolean!
$fileData: Upload!
) {
createProduct(
product: {
productName: $productName
productDescription: $productDescription
productPrice: $productPrice
productType: $productType
isReturnable: $isReturnable
}
storeId: $storeID
fileData: $fileData
) {
id
productName
productDescription
productPrice
}
}
`;
I’m not sure why I’m not getting any information within my api request. It continues to say first that fileData => {} and an error in console as Uncaught (in promise) Error: GraphQL error: Argument "fileData" has invalid value $fileData. I’m not sure why this might be happening. Within the backend, the schema has the code as
@desc "List a new product"
field :create_product, :product do
arg(:product, :new_product)
arg(:store_id, :integer)
arg(:file_data, :upload)
resolve(&Resolvers.Stores.create_product/3)
end
All help in what I’m doing wrong or pointing in the right direction is appreciated. Thank you in advance for the help, and also for your time in the help.
