How do I ensure that a form submitted File can be read properly as part of fetch?-CodePudding

I've been utilizing File Upload from GQLGen in a project. Back end is set up fine, but I keep getting a map[string]interface {} is not an Upload response from the server when fetch'ing from my front end.

I noticed when checking the sent payload that the value of file under variables is always set to an empty {} , which is obviously causing the problem. What I can't figure out is how to ensure that value isn't blank and actually contains a File.

files![0] consolelogs out fine with full details of the file (a basic png), so I know the file 'is there', but I'm obviously somehow invoking the fetch before the full details of the file have been assigned to the variable, hence the blank.

I'm sure I'm missing something completely obvious but I'm still a little new to front end and can't figure it out.

HTML (Svelte)

<form on:submit|preventDefault={submit}>
    <input type="file" id="myFile" name="filename">
    <input type="submit">
</form>

function submit(){
    fetch('http://localhost:8080/query', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({query: `mutation($file: Upload)
            {
                imageUpload(file: $file)
                {
                    serverResponseMessage
                }
            }
            `,
            variables: {
                file: (document.getElementById('myFile') as HTMLInputElement).files![0]
            }
        })
    });
};

Resultant Payload

I've stripped out the \n's and spaces for easier readability

{"query":"mutation($file: Upload!){imageUpload(file: $file){serverResponseMessage} }","variables":{"file":{}}}

CodePudding user response：

I figured it out, so posting for posterity.

After realizing that my Content-Type header was still set to JSON (despite the requirement clearly being multipart/form-data), I realized where I'd been going wrong.

Here's what the TS should have looked like:

function submit(){
    let operations:string = '{ "query": "mutation ($file: Upload!) { imageUpload(file: $file) { serverResponseMessage } }", "variables": { "file": null } }'
    let map:string = '{ "0": ["variables.file"] }'
    let file:File = (document.getElementById('myFile') as HTMLInputElement).files![0];

    var form:FormData = new FormData();

    form.append("operations", operations);
    form.append("map", map);
    form.append("0", file);

    fetch('http://localhost:8080/query', {
        method: 'POST',
        body: form
        }
    );
};