file field is required error

[hafijAsadMVN]

Hi there,

I am getting the below error from my server using the below code:

{message: "The file field is required.", errors: {file: ["The file field is required."]}}
errors
: 
{file: ["The file field is required."]}
file
: 
["The file field is required."]
0
: 
"The file field is required."
message
: 
"The file field is required."

It means uploady somehow not sending file field, One solution I get from chatgpt that I have to pass file as params in Uploady but how can I get the file? Or any better solution?

Versions
"@rpldy/chunked-uploady": "^1.8.0",

Code

        <ChunkedUploady
            destination={{
                method: "POST",
                headers: {
                    'Accept' : 'application/json',
                },
                url: "https://.../v1/assets"
            }}
            chunkSize={2142880}
            // params={{ file }} Possibly this is the solution(I am not sure though), but how can I get file?
        >
            <UploadButton >Upload File</UploadButton>
        </ChunkedUploady>

[yoavniran]

Hello @hafijAsadMVN
Please check the network tab in the dev tools of your browser. I doubt that the file isnt being sent, after all, thats the whole point of Uploady :)

If it is being sent then you'd need to check/debug your server implementation. Notice that you use chunked uploads, so you need to ensure your server supports those.

I've played with chat-gpt a few times trying to see what it knows about Uploady, what I've seen isnt very ensuring. In other words, I wouldnt trust how it thinks Uploady should be used. It normally makes up stuff that doesnt exist in the API.

For example, you really dont need to specifiy the file as part of the params. The file is sent using FormData and that's done automatically by Uploady's internals.

[hafijAsadMVN]

Thanks for your quick response, my mistake, actually with the mentioned code of ChunkedUploady works fine, but I get error from this below code with TusUploady,

Error:
422: Unprocessable Content:
File field is required

If ChunkedUploady works fine with the same configuration then why TusUploady isn't working?

    ```
    <TusUploady
        destination={{
            method: "POST",
            headers: {
                'Accept' : 'application/json',
            },
            url: "https://.../v1/assets"
        }}
        chunkSize={2142880}
        // params={{ file }} Possibly this is the solution(I am not sure though), but how can I get file?
    >
        <UploadButton >Upload File</UploadButton>
    </TusUploady>
    ```

[hafijAsadMVN]

When I use ChunkedUploady it works fine and in network tab I can see payload option, but If I use TusUploady, it fails and I don't see any payload option in my network tab.

[hafijAsadMVN]

Sorry for the confusion, I talked with backend team. They told me our backend doesn't support Tus Protocol, it's based on laravel chunk upload. Going to use just ChunkedUploady this time but let me know if you have any plan to add resumable upload feature with laravel chunk upload from react. Thank you

[yoavniran]

thanks for the update @hafijAsadMVN
I'm not familiar with resumable support in Laravel, so no plans to add it to Uploady at the moment. Is it supported in an official way on the Laravel side?
Currently, only the Tus protocol is supported.

[hafijAsadMVN]

Hello @yoavniran , We've decided to use just chunked upload at this moment as there are no suitable package for resumable upload without Tus Protocol. I've successfully implemented ChunkUploady with Drop and Paste Upload. But I am having trouble implementing a different use case. My use case is similar to Your Crop and Upload but not same. That's why I can't use your crop and upload example.

My use case:
My image will come from a global state not on button click upload like your example. And I have to crop that image using react-image-crop and then trigger upload based on an "Confirm" button click event. Is there any way to insert the cropped File and trigger ChunkUploady without using Chunk Uploady button?

Here is a small part of my code where I want to insert form data to chunk uploady and trigger upload.

async function handleCropDone() {
        const image = imgRef.current
        const previewCanvas = previewCanvasRef.current
        if (!image || !previewCanvas || !completedCrop) {
            throw new Error('Crop canvas does not exist')
        }

 
        const scaleX = image.naturalWidth / image.width
        const scaleY = image.naturalHeight / image.height

        const offscreen = new OffscreenCanvas(
            completedCrop.width * scaleX,
            completedCrop.height * scaleY,
        )
        const ctx = offscreen.getContext('2d')
        if (!ctx) {
            throw new Error('No 2d context')
        }

        ctx.drawImage(
            previewCanvas,
            0,
            0,
            previewCanvas.width,
            previewCanvas.height,
            0,
            0,
            offscreen.width,
            offscreen.height,
        )
        // You might want { type: "image/jpeg", quality: <0 to 1> } to
        // reduce image size

        const blob = await offscreen.convertToBlob({
            type: 'image/jpeg',
            quality: 1,
        })

        if (blobUrlRef.current) {
            URL.revokeObjectURL(blobUrlRef.current)
        }
        blobUrlRef.current = URL.createObjectURL(blob)

        const file = new File([blob], 'cropped-image.jpeg', {type: 'image/jpeg'});

        try {
            setIsUploading(true);
            const formData = new FormData();
            formData.append("file", file);
            
            const data = await postFileUpload(formData); //Need to replace this with ChunkUploady
            
            const page = 1;
            const image_url = data.image_url;
            const queryString = qs.stringify({page, image_url})
            router.push({pathname: `/${regionLocale.join("_")}/product-list`, query: queryString}, undefined, {scroll: false})

            setImgUrlBlob(URL.createObjectURL(blob))
            setOpen(false)
        } catch (error) {
            console.log(URL.createObjectURL(blob))
        } finally {
            setIsUploading(false);
        }
    }
            ```
            
            If you can suggest any solution I will be grateful. Thank you

[yoavniran]

This is what the useUploady hook is for.

const { upload } = useUploady();

upload(myFile) //pass file object to Uploady for it to be uploaded

upload method type - https://react-uploady.org/docs/api/types/#uploadaddmethod

[yoavniran]

TusUploady requires your server to implement the Tus protocol. Does your server support it?

[hafijAsadMVN]

Hello yoavniran, Sorry, I was in Eid holiday, That's why late reply. Yes, my server supports tus protocol, my server is based on laravel(Our backend team handles), I am trying to implement resumable chunk upload, Is it possible to achieve with just ChunkedUploady component or I need to achieve this via TusUploady? I also need to implement dropzone, and upload in paste which is available in your package. But those components are separate, Not getting any proper example of applying all of those combinedly. Any suggestions for me?

[yoavniran]

check out this sandbox: https://codesandbox.io/p/sandbox/react-uploady-paste-to-upload-demo-usx9s
It combines drop-zone & paste-to-upload.

[yoavniran]

moving to discussions

[hafijAsadMVN]

Hello @yoavniran ,

Thanks for your previous response. Here are my few queries:

1. Do you have any guideline to use chunked uploady with react-hook-form ?

2. Please look at my screenshots, I set maxGroupSize to 3 and maxConcurrent to 3 but none of working(see ui screenshot 5 images are uploading concurrently), how can I fix this issue?

[yoavniran]

1. You'd need to be more specific. First, I don't think there's anything special for Chunked uploads in relation to form. As for combining Uploady and forms, what is it you're looking for? You can see this guide, its not using react-hook-form, but maybe can give some ideas

2. As stated in the docs:

chunked-uploady doesnt support grouped uploads. So you're actually using the normal upload instead of chunking. Grouping means one request can contain multiple files. multiple means being able to select more than file at time. concurrent relates to how many individual requests can be sent at a time

[hafijAsadMVN]

Okay, I get it. I don't want use grouped prop, but I would like the user to have a maximum of 3 files to upload and return an error message if he tries to add more than 3. Is there any built in method to achieve or any idea to achieve this using uploadys hook?