https://www.prisma.io/ logo
Join Slack
Powered by
Hi, I am trying to upload images and I have the fo...
# orm-help
a
Hi, I am trying to upload images and I have the following issue: 
“operationName”:“singleUpload”,“variables”:{“file”:null}
Copy code
<Mutation mutation={UPLOAD_FILE}>
            {singleUpload => (
              <input type="file" required onChange={({
                 target: {validity, files: [file]}
            }) => validity.valid && singleUpload({ variables: { file}})}/>
           )}
        </Mutation>
for some reason file is null
Copy code
const UPLOAD_FILE = gql`
  mutation singleUpload($file: Upload!) {
    singleUpload(file: $file) {
      filename
      mimetype
      encoding
    }
  }
`;
Any idea what I am doing wrong?
I see it sends as null and binary.
So that part is doing well, the problem is in the server.
Has someone an example of file-upload with Prisma in the server side?
I am using:
Copy code
{
  "name": "rooms",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "start": "node src/index.js",
    "prisma": "prisma"
  },
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "graphql-yoga": "^1.7.0",
    "jsonwebtoken": "^8.2.0",
    "prisma-client-lib": "^1.31.0"
  },
  "devDependencies": {
    "prisma": "^1.31.0"
  }
}
Should I upgrade to Prisma 2?
r
I would personally suggest performing the upload separately and then running the mutation after the file upload is done?
a
@RyanThe client is working fine - the issue is in the server side - I can’t find good examples about file upload with prisma and grapgql yoga in JavaScript - I found a kind of example in ts- I was trying many different implementations in the weekend
r
Where are you uploading the file to? On the same server or is it somewhere else like AWS or Cloudinary?
a
same server
but when I use it, the singleUpload mutation in the server is not called
I cant see anything if I do a console.log in that function
dont know if it is a problem with the scalar Upload
Copy code
import React, { Component } from 'react';
import { AUTH_TOKEN } from '../constants';
import { timeDifferenceForDate } from '../utils';
import { Mutation } from 'react-apollo';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

const UPLOAD_FILE = gql`
  mutation singleUpload($file: Upload!) {
    singleUpload(file: $file) {
      name
    }
  }
`;

const handleChange = async ( event, mutation ) => {
  const {
    target: {
      validity,
      files: [file],
    }
  } = event;

  if (validity.valid) {
      console.log(file);
    const { data: { singleUpload } } = await mutation({
      mutation: UPLOAD_FILE,
      variables: { file },
      fetchPolicy: 'no-cache',
    });
  }
};

class Upload extends Component {
  render() {
    const authToken = localStorage.getItem(AUTH_TOKEN);

    return (
        <Mutation mutation={UPLOAD_FILE}>
            {(mutation, { loading }) => (
              <input
                type="file"
                required
                onChange={event => handleChange(event, mutation)}
              />
           )}
        </Mutation>
    );
  }
}

export default Upload;
This is the Upload Component, and it detects when file changed, and I cant see in the console
and in the server
Copy code
function singleUpload(parent, { file }, context) {
    console.log("Receiving file");
    console.log(file);
}
Copy code
type Mutation {
  post(url: String!, description: String!, name: String!, location: String!, lat: String!, lon: String!): Home!
  signup(email: String!, password: String!, name: String!): AuthPayload
  login(email: String!, password: String!): AuthPayload
  singleUpload(file: Upload!): File!
}
Copy code
type File {
  id: ID!
  name: String!
  createdAt: DateTime!
}
@Ryan maybe I am doing something wrong in singleUpload function? Wrong parameters? I cant see any error or console.log
@gopidon singleUpload is not triggered using graphql-yoga and prisma 1.3
I can do the mutation after the upload but i will have to use a different service in node in the server
since I dont see an easy implementation inside graphql-yoga
big fail: I was not exporting the new function in mutations
Copy code
module.exports = {
  post,
  signup,
  login,
  singleUpload,
  uploadReview
};
that is why singleUpload was never called 😕
👍 1
2 Views
Open in Slack
PreviousNext
Powered by