KPC
Kevin Powell - Community•2mo ago
ahmd shajmeer

Image to base64 throwing an 500 error

Hi, am working on project where there is wholesaler create form that needs to post image and other few datas. The api takes application/json as reqHeaders so, I am trying to convert the image as a base64string but on submitting it throws this error 
django.db.utils.DataError: (1406, "Data too long for column 'image' at row 1") 
django.db.utils.DataError: (1406, "Data too long for column 'image' at row 1")
9 Replies
Jochem
Jochem•2mo ago
"Data too long for column 'image' at row 1" means just what it says. You're sending too much data for it to fit in that column
ahmd shajmeer
ahmd shajmeerOP•2mo ago
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>, setFieldValue: (field: string, value: any) => void) => {
    const file = event.currentTarget.files?.[0];
    if (file) {
      // Convert to base64 string for preview and storage
      const reader = new FileReader();
      reader.onloadend = () => {
        const base64String = reader.result as string;
        setDisplayImage(base64String);
        setFieldValue('image', base64String);
      };
      reader.readAsDataURL(file);
    }
  };

  const onSubmit = async (values: FormValues, { setSubmitting }: FormikHelpers<FormValues>) => {
    console.log('Form values:', values);
    try {
      const response = await createWholesaler(values)
      if (response.status === 201) {
        toast.success('Wholesaler created successfully');
        navigate('/administration/wholesalers')
      } else {
        console.log("API Error Response:", response?.data?.message);
        toast.error(response?.data?.message || "An error occurred while creating wholesaler.");
      }
    } catch (error: any) {
      console.error("Creating wholesaler failed:", error);
      toast.error(error?.response?.data?.message || "An error occurred while creating wholesaler.");
    } finally {
      setSubmitting(false)
    }
  };
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>, setFieldValue: (field: string, value: any) => void) => {
    const file = event.currentTarget.files?.[0];
    if (file) {
      // Convert to base64 string for preview and storage
      const reader = new FileReader();
      reader.onloadend = () => {
        const base64String = reader.result as string;
        setDisplayImage(base64String);
        setFieldValue('image', base64String);
      };
      reader.readAsDataURL(file);
    }
  };

  const onSubmit = async (values: FormValues, { setSubmitting }: FormikHelpers<FormValues>) => {
    console.log('Form values:', values);
    try {
      const response = await createWholesaler(values)
      if (response.status === 201) {
        toast.success('Wholesaler created successfully');
        navigate('/administration/wholesalers')
      } else {
        console.log("API Error Response:", response?.data?.message);
        toast.error(response?.data?.message || "An error occurred while creating wholesaler.");
      }
    } catch (error: any) {
      console.error("Creating wholesaler failed:", error);
      toast.error(error?.response?.data?.message || "An error occurred while creating wholesaler.");
    } finally {
      setSubmitting(false)
    }
  };
I have shared the code where the base64 conversion take place , if possible could you point what is going wrong?
Jochem
Jochem•2mo ago
the input file is too big it's not in the code, most likely is this a backend you wrote?
ahmd shajmeer
ahmd shajmeerOP•2mo ago
no
Jochem
Jochem•2mo ago
do you have documentation for it? Or is it from a different team in your company? somewhere in the schema for the database, there's a maximum size defined for the image column. The image you're uploading is exceeding that maximum size. You can either use a smaller image, write code to convert / resize / compress the image before converting to base64, or contact whoever wrote the database and ask them to increase the size limit
ahmd shajmeer
ahmd shajmeerOP•2mo ago
Ok, I will try to compress the image before conversion I tried the compression but still ended with same error, so is there any other ways to upload files to a content-type of application/json instead of base64 conversion
Jochem
Jochem•2mo ago
Again, the file is likely still too big. Are you even supposed to upload a file in base64 to that field? Or should it be a url? Have you checked the documentation for the api?
ahmd shajmeer
ahmd shajmeerOP•2mo ago
I have checked the api docs and deliverd my issue with backend team, and they changed the content-type to mulipart/formdata so that file size wont be a problem anymore. I appreciate your effort on helping me to resolve the issue, Thank You.
ἔρως
ἔρως•2mo ago
if i were you, i would still look into handling errors, as the server should have a file limit that it rejects for example, if some user tries to upload a 6gb iso file as an image (renamed to have .jpg) your server may reject the upload or even reject the request once it received too much data

Did you find this page helpful?