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
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.

12 Replies

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,
        });
    }
            }}
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
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.
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
const validationSchema = Yup.object().shape({
    mediaUrl: Yup.mixed()
        .required('Media file is required'),
});
Toyger
but isn't it should be just string then? not mixed
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.
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