0

I am trying to send form data to a graphql server using fetch-api

<div>
        <!-- HTML5 Input Form Elements -->
        <h4>GraphQL API Upload Test</h4>
        <input id="fileUpload" type="file" name="fileUpload" />
        <input id="fileDetail" type="text" name="fileDetail" />
        <button id="upload-button" onclick="uploadFile()"> Upload </button>

        <!-- Ajax JavaScript File Upload Logic -->
        <script>           
            var queryTest = `mutation Header($input: Upload!) {
                          testUploadMutation( file: $input) {   
                            response    
                          }
                        }`;
           
            async function uploadFile() {
                let img = {};
                img.file = fileUpload.files[0];

                let formData = new FormData();
                formData.append("operations",JSON.stringify( { query: queryTest}));
                formData.append('map', { "0": ["variables.input"] });
                formData.append('0', img.file);
               
                await fetch("/graphql/", {                   
                    method: "POST",
                    body: formData
                }).then(response => response.json()).then(data => console.log(data));
               
            }
            
        </script>
        
    </div>

but I keep getting "Invalid JSON in the map multipart field; Expected type of Dictionary<string, string[]> from the server even though the mutation works fine on Banana Cake Pop. I have been using fetch-api to run all other queries and mutation successfully. This is only code using formData with fetch-api for file upload and its not working . Anybody know what's going on?

Mutaion on Banana Cake Pop

mutation Header($input: Upload!) {
  testUploadMutation( file: $input) {   
    response    
  }
}
#variables sent using the Banana Cake Pop Variables feature
{ 
"input": "somefile.jpg"  
}

I have also tried sending formData.append('0', img) instead of formData.append('0', img.file) but the same error

BrocadE
  • 11
  • 5

0 Answers0