Upload Image with nextjs

[ThierryLux]

Hello, I'm looking to upload an image of a nextjs frontend page, I can't find the graphql query or an example graphql query in the documentation.
I looked through the examples, couldn't find any either.
My version looks like this:

const CREATE_IMAGE_MUTATION=gqlmutation CREATE_IMAGE_MUTATION($image: Upload, $altText: String) { createImage(data: { image: $image, altText: $altText }) { id image { id filesize width height extension url } altText } };
I of course replaced 'upload' with 'ImageFieldInput', with no more success.
Could someone tell me the right solution please

[ThierryLux]

Can anyone help me please ?

[marekryb]

Hi there @vincelux,

Your mutation seems fine. The query would be similar.

I think the problem is that you did not configure your client to handle uploads. Most of the graphql client libraries require some additional steps to enable that. See eg. https://gqlgen.com/reference/file-upload/ . You have curl example that let you try it through the console and also apollo example (need additional link).

If you still struggle with that, make some simple public repo or codesandbox with your client code and share it so that we can have a look.

[luuhung93]

import Upload from 'graphql-upload/Upload.js';

const prepareFile = async (filename: string) => {
const filePath = _fieldPath(filename);
const upload = new Upload();
upload.resolve({
createReadStream: () => createReadStream(filePath),
filename: path.basename(filePath),
// @ts-ignore
mimetype: mime.getType(filePath),
encoding: 'utf-8',
});
return { upload };
};

[marekryb]

This seems different problem. You are uploading on server side through custom mutation. See #8633 and #7986

[luuhung93]

const UPLOAD_FILE = gqlmutation ($name: String!, $alt: String!, $file: Upload!) { createMedia(data: { name: $name, alt: $alt, image: { upload: $file } }) { id label } };

const [createMedia] = useMutation(UPLOAD_FILE);

await createMedia({
variables: {
name: 'Test 2',
alt: 'Salmon Recipe',
file: event.target.files[0],
}
});

[marekryb]

Since you use useMutation, I assume you are using apollo-client.

Did you follow apollo guide to setup upload link?

[luuhung93]

new ApolloClient({
cache: new InMemoryCache(),
link: createUploadLink({
headers: { 'Apollo-Require-Preflight': 'true' },
}),
}),

you add Apollo-Require-Preflight