Apollo v4 File Upload

[wramzo]

Hello, I am using Apollo 4 and I get an error when I want to upload a video/photo. How can I solve this problem?

example:

<template>
  <form  @submit.prevent="createPost">
    <input ref="imgFile" id="imgFile" name="imgFile" type="file" class="w-full hidden bg-blue my-4" @change="coverUp">
    <input id="videoEl" name="videoEl" ref="videoEl" type="file" class="bg-blue my-4" @change="videoUp">
    <textarea v-model="postDesc" name="body" class='rounded w-96 min-h-36 max-h-50 bg-[#2b2b2b] border-b-1 border-light border-opacity-20 p-1.5 text-light' id="" cols="30" rows="10"></textarea>
    <button type="submit">send</button>
  </form >
</template>

<script setup lang="ts">
const postVideo = ref('')
const postCover = ref('')
const videoEl = ref(null) 
const imgFile = ref(null)
const postDesc = ref(null)

const { mutate, onError } = useMutation(gql`mutation CreatePost($body: String!, $file: Upload!, $video: Upload!, $categoryIds: [ID!]!, $hashtags: [String!]!) {
  createPost(body: $body, file: $file, video: $video, categoryIds: $categoryIds, hashtags: $hashtags) {
    body
    id
    user
    video_url
    createdAt
    video_public_id
    cover_public_id
    categories
    hashtags
    cover_url
  }
}`);

const error = ref('');
onError((err) => {
  error.value = err.message;
});

async function createPost() {
      try {
        const data = await mutate({
            body: postDesc.value,
            file: postCover.value,
            video: postVideo.value,
            categoryIds: ['64ef14384c195d80559665fe'],
            hashtags: ['UI', 'UX', 'Poster']
        })
      } catch (error) { console.log(error);}
      console.log('Post created success!');
    }

const videoUp = (event: any) => {
    postVideo.value = event.target.files[0]
}

const coverUp = (event: any) => {
    postCover.value = event.target.files[0]
}

</script>

[pschaub]

@ramzzo What exact error did you get?