Dropzone Apollo-upload-client using Upload! Type

Question

I am using apollo-upload-client (so graphQL) and am trying to use dropzone to upload files to my server.

I have done this successfully using <input required onChange={({ target: { validity, files: [file] } })=> this._uploadFiles(validity, file)} with the function

_uploadFiles = async (validity, file) => {
        if (validity.valid){
            await this.props.addImageFileMutation({
                variables: {file}
            })
        }
    }

For Dropzone, I have:

<Dropzone
                      onDrop={this._onDrop.bind(this)}
                      multiple={false}>
                    </Dropzone>

using the function:

_onDrop = async (acceptedFiles, rejectedFiles) => {
        const firstFile = acceptedFiles[0]
        await this.props.addImageFileMutation({
            variables: { firstFile }
        })
    }

Here are the files that are sent from each, they look the same to me! But it only works from <input />! The first value is using <Dropzone />, the second value is using <input />.

Do you know why I am getting this $file not matching Upload! issue? I have added some more code below for reference.

const ADD_IMAGE_FILE_MUTATION = gql`
mutation AddImageFileMutation ($file: Upload!) {
    addImageFile(file: $file){
        id
}}`

Answer 1

Inside _onDrop, you are passing a variable named firstFile to your mutation, but it's looking for a variable named file:

variables: { firstFile }

Try this instead:

variables: { file: firstFile }