Next.js Discord

Discord Forum

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

Unanswered
Morelet’s Crocodile posted this in #help-forum
Open in Discord
Avatar
Morelet’s CrocodileOP
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.
Image
Image
Image

12 Replies

Avatar
Morelet’s CrocodileOP
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,
        });
    }
            }}
Avatar
Toyger
your form from browser now send filepath, but it should send binary octet-stream
https://stackoverflow.com/a/71153118/2590591
something like on screenshots
Image
Image
Avatar
Morelet’s CrocodileOP
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.
Avatar
Toyger
put it into separate state variable, not inside formik values, and then in your onSubmit instead values.mediaUrl use your new separate state variable
Avatar
Morelet’s CrocodileOP
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
Image
const validationSchema = Yup.object().shape({
    mediaUrl: Yup.mixed()
        .required('Media file is required'),
});
Image
Avatar
Toyger
but isn't it should be just string then? not mixed
Avatar
Toyger
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.
Avatar
Morelet’s CrocodileOP
the type of media url was different. It wasn't string anymore. It was a file object. i wrote validation accordingly and it worked!
Thanks for helping me out