File Upload failed

[AlexeySvidentsov]

I'm building headless WP, and front end part of it realized with help of Vue.js Quasar framework. All form sumssions are works fine, but i can't manage to develop file upload functionality.

Here is my realisation:
Template
<input v-else-if="field.type==='FILEUPLOAD'" type="file" :name="getInputName(field)" :id="getInputId(field)" v-on:change="val=>appendFileToFormData(val, field)">

When file is selected via input i'm storing it to the Entry object

appendFileToFormData: function( val, field ) {
  this.entry[this.getInputName( field )] = {
    "name": val.target.files[0].name,
    "type": val.target.files[0].type,
    "size": val.target.files[0].size,
  }
},

Then generate "fieldValues" input:

let fieldValues = [];
let fieldData = { id: field.id };
fieldData.fileUploadValues = [this.entry[this.getInputName( field )]];
fieldValues.push( fieldData );

And sent request via axios:

api( '/graphql', {
    method: 'post',
    data: {
      query: SUBMIT_FORM_ENTRY,

      variables: {
        input: {
          id: this.$props.formId,
          fieldValues: fieldValues,
          entryMeta: { userAgent: window.navigator.userAgent, dateCreatedGmt: date.toISOString() }
        }
      }
    }
  } ).then( resp => {
    console.log(resp);
  } );

My mutation look like this:

const SUBMIT_FORM_ENTRY=`
mutation submitEntry($input: SubmitGfFormInput!) {
  submitGfForm(
    input: $input
  ) {
    errors {
      id
      message
    }
    entry {
      formDatabaseId
      ... on GfSubmittedEntry {
        databaseId
      }
      form {
        confirmations {
          message
        }
      }
    }
  }
}
`

The issue is come up on the backend, when i'm reviewing entry. Uplaoded file is not accessible. There is an error:

[FAILED (Temporary file could not be copied.)]

In the Gravity Forms loggin i've this messages:

2022-08-17 17:50:27.844276 - DEBUG --> GF_Field_FileUpload::validate(): Validating field input_8 
2022-08-17 17:50:27.844417 - DEBUG --> GF_Field_FileUpload::validate(): Validating file upload for snickerdoodle.png 
2022-08-17 17:50:27.844456 - DEBUG --> GF_Field_FileUpload::validate(): Validation complete. 
2022-08-17 17:50:27.844518 - DEBUG --> GFFormDisplay::process_form(): After validation. Is submission valid? Yes. 
2022-08-17 17:50:27.844543 - DEBUG --> GFFormDisplay::process_form(): Uploading files... 
2022-08-17 17:50:27.844580 - DEBUG --> GFFormDisplay::upload_files(): Upload path /nas/content/live/SITE_NAME/wp-content/uploads/gravity_forms/2-a7f531cdae707324baf3b945f59d9960 
2022-08-17 17:50:27.844669 - DEBUG --> GFFormsModel::get_temp_filename(): Uploaded filename is snickerdoodle.png and temporary filename is 62fd2a63ce367_input_8.png 
2022-08-17 17:50:27.844698 - DEBUG --> GFFormDisplay::upload_files(): Temp file info: Array
(
    [uploaded_filename] => snickerdoodle.png
    [temp_filename] => 62fd2a63ce367_input_8.png
)
 
2022-08-17 17:50:27.844726 - ERROR --> GFFormDisplay::upload_files(): File could not be uploaded: tmp_name: /tmp/snickerdoodle.png - target location: /nas/content/live/SITE_NAME/wp-content/uploads/gravity_forms/2-a7f531cdae707324baf3b945f59d9960/tmp/62fd2a63ce367_input_8.png 

Please advise what i'm missing here?

[justlevine]

Hey @AlexeySvidentsov 👋

appendFileToFormData: function( val, field ) {
  this.entry[this.getInputName( field )] = {
    "name": val.target.files[0].name,
    "type": val.target.files[0].type,
    "size": val.target.files[0].size,
  }
},

That's your issue: you're manually building the expected Upload type, but you don't actually know the name of the file on the server (what you're passing is the file name on the client).

Instead, you should make sure your GraphQL client supports the multipart file upload spec (some clients include this by default, for Apollo, you can use apollo-upload-client), and then you pass the Blob or File object to the mutation input directly.

(You could also change your WP server config to create predictable file names for uploads, but that's easier said then done, especially if you're talking high-traffic sites, where duplicate client file names are a likelihood).

[AlexeySvidentsov]

Do you have any working example? i totally don't understand where to dig. All step according documentation was done.

[jordanlewis9]

Hello!

I'm having the exact same troubles @AlexeySvidentsov. I tried and received the same error as you received at the start of this discussion. After installing apollo-upload-client, wpgraphql-upload, and passing just the file, I also got the error with the two empty arrays as the fileUploadValues.

Were you ever able to solve this? I've tried everything I can find, set everything up exactly as the docs say to, and still can't get anything uploaded.

[justlevine]

@jordanlewis9 without a minimum replication I cant do much investigating, but I'm betting there's an issue with your Apollo client config.

This thread on stackoverflow has a bunch of suggestions (and links out to a few more), you should try if you havnt yet.

[jordanlewis9]

Thanks for the help @justlevine! I looked at the suggestions, but none of them helped as they were mostly fixed on misuse of Apollo Server which I'm not using. I'm going to start a new discussion with some specs just in case it isn't something with Apollo Upload.

[AlexeySvidentsov]

@jordanlewis9 Hello. Not sure what is your stack of technologies. I have Quasar app built based on Vue. So here what i have:
List of pacakges i have regarding form upload:
@quasar/quasar-app-extension-apollo
@vue/apollo-composable
apollo-upload-client

This is how i've setup apollo with app:

1. Within src/boot folder i've created apollo.js file with this code

import { ApolloClient } from '@apollo/client/core'
import { ApolloClients } from '@vue/apollo-composable'
import { boot } from 'quasar/wrappers'
import { getClientOptions } from 'src/apollo'
export default boot(
  /* async */ ({ app }) => {
    // Default client.
    const options = /* await */ getClientOptions()
    const apolloClient = new ApolloClient(options)
    const apolloClients = {
      default: apolloClient,
    }
    app.provide(ApolloClients, apolloClients)
  }
)

2. Then in src/apollo folider i have index.js with this code

import {InMemoryCache} from '@apollo/client/core'
import {createUploadLink} from "apollo-upload-client";
import {api} from "boot/axios";

export /* async */ function getClientOptions(/* {app, router, ...} */ options ) {
  return Object.assign(
    // General options.
    {
      link: createUploadLink( {
        uri: `SITE_URL/graphql`,
      } ),
      cache: new InMemoryCache(),
    },
  )
}

As far as i remember createUploadLink was the key puzzle item

This is field output

<q-file
    :ref="getInputId(field)"
    model-value=""
    :name="getInputName(field)"
    :for="getInputId(field)"
    v-model="entry[getInputId(field)]"
    @update:model-value="val => appendFileToFormData( val, field )"
    :label="field.label"
  />

Then in component methods i have this one

appendFileToFormData: function( val, field ) {
      this.entry[this.getInputName( field )] = val;
},

Here is like looks my form opening tag:
<q-form action="/" method="post" @submit.prevent="submitEntry" greedy ref="gForm" enctype="multipart/form-data">

On form submit i call custom method submitEntry:

submitEntry( e ) {
      let fieldValues = [];

      this.formFields.forEach( field => {
        let fieldData = { id: field.id };
        switch ( field.type ) {
          ...
          case "FILEUPLOAD":
            if ( this.entry[this.getInputName( field )] ) {
              fieldData.fileUploadValues = [this.entry[this.getInputName( field )]];
            }
            break;
          ...
        }

        fieldValues.push( fieldData );
      } );

      const date = new Date();

      this.submitForm( {
        input: {
          id: this.$props.formId,
          fieldValues: fieldValues,
          entryMeta: { userAgent: window.navigator.userAgent, dateCreatedGmt: date.toISOString() }
        }
      } );
    },

Here you can see this.submitForm method with passed data. This is come from @vue/apollo-composable package
First import useMutation
import {useMutation} from "@vue/apollo-composable";
Then on component setup method configure this submitForm method

setup( props ) {
    const { mutate: submitForm } = useMutation( SUBMIT_FORM_ENTRY );

    return {
      submitForm     
    }
  },

Within SUBMIT_FORM_ENTRY it's a simple mutation with variable input that comes from submitForm method

const SUBMIT_FORM_ENTRY = gql`
  mutation submitEntry($input: SubmitGfFormInput!) {
    submitGfForm(
      input: $input
    ) {
      entry {
        formDatabaseId
        ... on GfSubmittedEntry {
          databaseId
        }        
      }
    }
  }
`

Also don't forget to install WPGraphQL Upload plugin