Why do some files get uploaded while others say "Could not decode base54"?

Lawrence

I have worked with Cloudinary's API for a few years so I'm basically doing the same thing I've always done, but I'm encountering this new issue.

I uploaded avif, jpegs, etc and everything worked fine. Then I tried to upload a png which was created from a screenshot on my Macbook. It kept saying Bad Request 400 Could not decode base64".

I ended up converting the images to webp before uploading them and that solved that problem for the time being. Now I'm trying to upload a video and I am receiving that same error. Other media uploads fine.

The video size is 3.2mb. I'm using Nextjs 14 and Axios 1.6.0.

I'm currently using the data uri because when I used the file itself, it would timeout and send back a 502 Error.

Cloudinary Team

Hi Lawrence,

Thank you for reaching out.

Are you able to provide us with a few examples of base64 that you have tried, as well as let us know how you're generating these base64 encoded strings? If at all possible, please provide us with both working and non-working examples.

You need to URL escape your whole Base64 input string. So for example, if your Base64 string starts with: data:image/jpeg;base64, it should be: data%3Aimage%2Fjpeg%3Bbase64%2C.

You can find some code examples in several languages(including Node.js) for uploading via a base64 data URI:
https://cloudinary.com/documentation/upload_images#upload_via_a_base_64_data_uri

Here is another article regarding that as well:
https://support.cloudinary.com/hc/en-us/articles/203125741-Uploading-assets-using-a-base64-DATA-URI

Please note that Upload API for base64 encoded is limited to (62,910,000 chars) and it is a Data URI (not actual image data).

Looking forward to your input.

Regards,
Wissam

Developer Support Engineer
Cloudinary

---

Helpful Links For You
💬 Share questions, connect with other users in our Cloudinary Community forums and Discord server!
🧑‍🎓 Join our Cloudinary Academy for free courses, workshops and other educational resources.
📄 Read our documentation for in-depth details on Cloudinary product features and capabilities
📰 Check out the Cloudinary blog for the latest company news and insights

Lawrence

Hello Wissam,

I tried replacing data:video/mp4;base64 with data%3Avideo%2Fmp4%3Bbase64%2C and it returned Unsupported source URL

Here's a copy of my code...

import { NextResponse } from "next/server";
import axios from "axios";

export async function POST(request: Request) {
  const data = await request.formData();
  const media = data.get("file");
  const authentication = authenticateMedia();
  const formData = new FormData();
  const url = `${process.env.CLOUDINARY_API}/auto/upload`;

  const options = {
    headers: {
       "Content-Type": "multipart/form-data",
    },
    onUploadProgress: function (progressEvent: {
      loaded: number;
      total: number;
    }) {
      var progress = Math.round(
        (progressEvent.loaded * 100.0) / progressEvent.total,
      );
      console.log(progress + "%");
    },
  };

  formData.append("file", media);
  formData.append("api_key", process.env.MEDIA_API_KEY);
  formData.append("timestamp", authentication.timestamp);
  formData.append("signature", authentication.signature);
  formData.append("folder", authentication.folder);

  return await axios
    .post(url, formData, options)
    .then((res) => {
      return NextResponse.json({ data: res.data }, { status: 200 });
    })
    .catch((res) => {
      return NextResponse.json(
        { message: res.response.data },
        { status: res.response.status },
      );
    });
}

Here is the authentication code:

const cloudinary = require("cloudinary").v2;
import { getCompanyName } from "@/lib/getCompanyName";

export const authenticateMedia = () => {
  const timestamp = Math.round(new Date().getTime() / 1000);
  const folder = getCompanyName();
  const signature = cloudinary.utils.api_sign_request(
    {
      timestamp: timestamp,
      folder: folder,
    },
    process.env.MEDIA_API_SECRET,
  );

  return { timestamp, folder, signature };
};

I'm not sure how to attach the base64 examples because it is a long string (1048576 characters). Do you mean I should attach the video I'm attempting to upload?

The the uri is generated using react-images-uploading npm library. Again, it works for other files, just not some files, but they are all using this same setup. I can upload 3 images and all of them will save except this one.

Things I've tried with no success:

1. Several different headers for axios (Multipart form, x-www-form-urlencoded, etc).
2. Uploading as a file instead of uri.
3. converting to webm before uploading.

I use this example as a basis for mine:

https://glitch.com/~cld-signed-upload-examples

Which I found here:

https://cloudinary.com/documentation/upload_images#uploading_with_a_direct_call_to_the_rest_api

atdatu

Hi @Lawrence,

Can you please share the file's URL if it's publicly available? We would like to run an upload test.

Thank you.

Anthony

Lawrence

Hello @atdatu ,

Here's a link to the video:

https://res.cloudinary.com/lookbooklab/video/upload/v1692549416/test_video_miiukd.mp4

What's interesting is this a Cloudinary link to where I did manage to upload it several months back without a problem using the same code I'm using now.

The only difference is that now I'm using Nextjs 14.0.0 when back then, it was an earlier version.

Wissam

Hi @Lawrence,

I have tried to upload this video to my account using the attached base64 encoding of this video and it works fine:

https://res.cloudinary.com/wissamkhalilicloudinary/video/upload/v1701181437/3ca912ab8ebc0b90e4a848cd35615411.mp4

Could you try with the attached base64 and let me know if this helps?

Regards,

Wissam

base64_2.txt

Lawrence

@Wissam

Surprisingly it worked when I used that text file as well. So it must just be something with how it's being generated on my end. I'll keep looking and considered this answered.

Thanks for your help.

Lawrence

@Wissam

I figured out what the problem was. I noticed that your text file was much larger than what I saw on my console when I would log the post request.

I'm not sure why but sending it as form data was losing "something" along the way. So now I sent it as json and the file sizes matched up and it saved correctly.

Your tip clued me in to where to look. Thanks again.

Wissam

Hi @Lawrence ,

Thank you for the update. I'm glad I could help.

Regards,

Wissam