apollo-upload-network-interface icon indicating copy to clipboard operation
apollo-upload-network-interface copied to clipboard

Allow single file uploads

Open jaydenseric opened this issue 8 years ago • 2 comments

Basically, allow for mutations instead of just like this:

updateAvatar(userId: String!, file: [UploadedFile!]!): Avatar

Also like this:

updateAvatar(userId: String!, file: UploadedFile!): Avatar
  • Clearer semantics.
  • Better validation for mutations requiring only one file in a variable.
  • It is sometimes easier to get a single File object to send as a mutation parameter:
handleSubmit = event => {
    event.preventDefault()
    const formData = new window.FormData(event.target)
    this.props.mutate({
      variables: {
        userId: this.props.userId,
        file: formData.get('avatar') // Instance of File (not FileList), from <input type='file' name='avatar' required />
      }
    }).then(({data}) => {
      console.log('Avatar updated', data)
    })
  }

To get this to work, handle File as well as FileList here and here.

jaydenseric avatar Jan 25 '17 04:01 jaydenseric

Not certain how all this works, but here in graphql-server-express-upload also looks relevant.

jaydenseric avatar Jan 25 '17 04:01 jaydenseric

For those who find this pressing, I ended up supporting single File objects, File arrays, and FileList objects anywhere within mutation or query variables with apollo-upload-client.

jaydenseric avatar Mar 19 '17 14:03 jaydenseric