jaydenseric / graphql-multipart-request-spec

A spec for GraphQL multipart form requests (file uploads).
993 stars 54 forks source link

Where I am wrong when I am using axios to upload file, Please help me. #57

Closed siamahnaf closed 2 years ago

siamahnaf commented 2 years ago

Hello, I am uploading file from next js application. I am getting error like this images- Screenshot 2021-10-14 124425

But I can't understand where I am wrong. Here is my code-

import Image from "assets/Hero-bg.jpg"
var formData = new FormData();
    formData.append('operations', '{ "query": "mutation($file: Upload!) {signUp(avatar: $file, input: {name: "Siam Ahnaf", email: "siamahnaf198@yahoo.com", password: "siam1980"}){message, token}}", "variables": { "file": null } }');
    formData.append('map', '{ "0": ["variables.file"] }');
    formData.append('0', Image);
    await axios({
        url: "http://localhost:3001/graphql",
        method: "post",
        data: formData,
        Headers: {
            'Accept': 'application/json'
        }
    })
        .then(response => console.log(response))
        .catch(error => console.log(error));

The query mutation is-

mutation signUp($avatar: Upload!) {
  signUp(
    avatar: $avatar
    input: { 
      name: "Siam Ahnaf"
      email: "siamahnaf198@yahoo.com"
      password: "12345678" }
  ) {
    message
    token
  }
}

Please help me.

jaydenseric commented 2 years ago

GitHub issues are a way users can contribute to an open source project by reporting specific bugs or making technical suggestions that would improve the software for everyone. GitHub issues are not for begging for free help with your work; please don't do that moving forward.

If you buy a new car and you get lost driving to visit your grandparents, you don't call the Toyota factory in Japan and beg them for directions to your grandma's house. Sure they are smart people at the factory and it's theoretically possible they could ask enough questions about what city you are in, what you see out the window, etc. to be able to locate you on a map, learn your Grandma's address, and plan a driving route for you, but it's incredibly unreasonable to expect them to.

Here are a few tips about your problem anyway. Firstly, use the network inspector to find out what the body of the response with the 400 status says. It might have a clear error message. Secondly, use the network inspector to check the outgoing request has the right content type and multipart form field structure. If it doesn't, figure out what in your client code is causing a bad request to be sent. If it does, then maybe your GraphQL server isn't setup properly to accept GraphQL multipart requests.

siamahnaf commented 2 years ago

I think you are very angry person. First of all I am sorry. Secondly, If I don't know your system, then How can I go ahead.

For the driving I have to go to a driver to learn it. If there is no driver in the earth, then obviously I have to go the manufacturer company who made the car. In the online earth, I haven't found any single person who can learn me or help me. Then what's I have to do. Of course I have to come to you :)

Please solve this problem. I am really getting uninspired. Thank you very much.