useMutation for file uploading (mutation progress)

[nucleartux]

It's possible to make multi part request using useMutation and somehow get upload progress?
Any ideas?

[SimonKlausLudwig]

18 Thumbs Up and no answer ?

[cemcakirlar]

50 thumbs up now, I think I got the answer, see below :)

[TkDodo]

axios supports it, have you tried that?

https://gist.github.com/virolea/e1af9359fe071f24de3da3500ff0f429

Generally, this is likely out of scope for react-query, because it is agnostic towards the actual querying / mutating.

[brockklein]

Nice patterns everyone! fwiw here's our implementation. Short and sweet.

import axios, { AxiosError } from 'axios'
import { useState } from 'react'
import { useMutation } from 'react-query'

interface IArgs {
    presignedUploadUrl: string
    file: File
}

export const useFileUploadMutation = () => {
    const [ progress, setProgress ] = useState(0)

    const mutation = useMutation<void, AxiosError, IArgs>(
        args => axios.put(
            args.presignedUploadUrl,
            args.file,
            { onUploadProgress: ev => setProgress(Math.round((ev.loaded * 100) / ev.total)) }
        )
    )

    return { ...mutation, progress }
}

[nikhil0o7]

is there a reason to use put instead of post?

[brockklein]

@nikhil0o7 I actually don't recall if there was a clear need for the PUT instead of POST. May be due to how we configured the presigned upload URL.

[LucasAndrad]

@nikhil0o7 if it's uploaded to S3 it's probably because S3 method is called putObject, but on the axios side it doesn't matter, POST, PUT and probably PATCH should work just fine.

[brockklein]

@LucasAndrad I bet you're right. I probably made it a PUT without thinking, just matching that naming from S3.

[cemcakirlar]

Old question but I want to share my way of solving the problem.

Because mutation function variables are agnostic enough (default type is any). I pass a callback function to track ProgressEvent in onUploadProgress

I do post to express with uses multer. This example can handle single file per request.

const post_path = '/api/upload';

export interface UseMutationUploadFileVariables {
    ParentLink_Category: string,
    ParentLink_RecID: string,
    RecId: string
    progressCallBack?: (progressEvent: ProgressEvent) => void
    file: File
}

const mutationFn_UploadFile = async (variables: UseMutationUploadFileVariables) => {

    const { ParentLink_Category, ParentLink_RecID, file, progressCallBack, RecId } = variables

    let fd = new FormData();

    //* order of appends matter, add file as last one, api endpoint is express with multer.
    fd.append("ParentLink_Category", ParentLink_Category)
    fd.append("ParentLink_RecID", ParentLink_RecID)
    fd.append("RecId", RecId)
    fd.append("uploaded_file", file)
    
    const axiosResponse = await axios.post<any, AxiosResponse<any>, FormData>(post_path, fd,
        {
            headers: {
                "Content-Type": "multipart/form-data",
                "Accept": "*/*"
            },
            onUploadProgress: (progressEvent: ProgressEvent) => {
                progressCallBack && progressCallBack(progressEvent)
            }
        });
    return axiosResponse
}

[thewasif]

If you are using graphql-request for posting GraphQL requests, then you do not need any extra code to upload file. You can upload with react-query useMutation hook without using form data or axios. Here, see an example

const UPDATE_IMAGE = gql`
    mutation updateImage($projectId: String!, $logoImage: Upload, $previewImage: Upload) {
        updateImage(projectId: $projectId, logoImage: $logoImage, previewImage: $previewImage) {
            previewImageUrl
            logoImageUrl
        }
    }
`;

const {mutate} = useMutation(async (params: any) => await request(GRAPHQL_BASE_URL, UPDATE_IMAGE, {...params}))

mutate({
   projectId: '1',
   projectImage: data.basics.projectImage, // JavaScript File
   logoImage: data.basics.logoImage // JavaScript File
})
 

You can refer to graphql-request docs to see more example

[PixeledCode]

graphql-request has removed file upload feature

[thewasif]

Yes, unfortunately graphql-request has removed file upload feature. So you need to try something else or role back to older version which supports upload