Internal Server Error during File Upload (Not using any bucket)

[latent glacier]

When I submit a file using a form, I receive a 500 Internal Server Error. The server logs don't provide sufficient details, and I've checked my code.

-The server-side code seems to work fine when tested with Postman.
-The file field name in the FormData object matches the expected field name on the server.

[noble harbor]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[latent glacier]

i am using formik

onSubmit={async (values) => {
    const formData = new FormData();
    formData.append('file', values.mediaUrl);

    try {
        // Make the API call to post the image
        const response = await axios.post('/api/media', formData);

        // Check the API response and show appropriate messages
        if (response && response.status === 200) {
            toast.success('Media added successfully', {
                position: toast.POSITION.TOP_RIGHT,
            });
        } else {
            toast.error('Failed to add media', {
                position: toast.POSITION.TOP_RIGHT,
            });
        }
    } catch (error) {
        console.error('Error adding media:', error);
        toast.error('An error occurred while adding media', {
            position: toast.POSITION.TOP_RIGHT,
        });
    }
            }}

[spring notch]

your form from browser now send filepath, but it should send binary octet-stream
https://stackoverflow.com/a/71153118/2590591

something like on screenshots

[latent glacier]

it gives me this error because i've declarede initial value as string

InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

[spring notch]

put it into separate state variable, not inside formik values, and then in your onSubmit instead values.mediaUrl use your new separate state variable

[latent glacier]

file is uploaded successfully. But how do i resolve validation schema error. Even the field is populated but it is still showing validation error message

const validationSchema = Yup.object().shape({
    mediaUrl: Yup.mixed()
        .required('Media file is required'),
});

[spring notch]

but isn't it should be just string then? not mixed

oh wait, I didnt understood why mediaUrl now empty, I thought you'll just add new state variable for file, and logic to fill it, but will not remove previous logic that at least fill mediaUrl which enough for validation.

[latent glacier]

the type of media url was different. It wasn't string anymore. It was a file object. i wrote validation accordingly and it worked!