How to get MIME-TYPE from Base 64 String?

Question

I am getting base64 for string from backend and i am then decoding it in Javascript to show on browser.

This string can be any file .pdf, .img, .docx, .zip etc.

My base64 string does not include the mime-type for example 'data:application/pdf;base64' part. So i need to get mime type of base64.

Is there any way to solve this solution with Javascript or Jquery?

Answer 1

You can use magic numbers to detect a MIME type (check here the list of file signatures). However, file signatures are not 100% reliable and you can easily encounter false positives. Of course, there are tasks when a such solution is more than enough.

So if you have a Base64 string and want to identify its MIME type using file signatures you don't need to decode the Base64. A much faster way is to store the file signatures as Base64 and just check if input starts with one of them. A simple example:

var signatures = {
  JVBERi0: "application/pdf",
  R0lGODdh: "image/gif",
  R0lGODlh: "image/gif",
  iVBORw0KGgo: "image/png",
  "/9j/": "image/jpg"
};

function detectMimeType(b64) {
  for (var s in signatures) {
    if (b64.indexOf(s) === 0) {
      return signatures[s];
    }
  }
}

// Some tests
console.log(detectMimeType('R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs='));
console.log(detectMimeType('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4z8AAAAMBAQD3A0FDAAAAAElFTkSuQmCC'));
console.log(detectMimeType('JVBERi0xLjUKJYCBgoMKMSAwIG9iago8PC9GaWx0ZXIvRmxhdGVEZWNvZGUvRmlyc3QgMTQxL04gMjAvTGVuZ3'));
console.log(detectMimeType('/9j/4AAQSkZJRgABAQAAZABkAAD/2wCEABQQEBkSGScXFycyJh8mMi4mJiYmLj41NTU1NT5EQUFBQUFBRERERERERERE'));

Answer 2

There are certain file types that indicate what type they are in the base 64 string. For images the first character chages.

'/' means jpeg.

'i' means png.

'R' means gif.

'U' means webp.

'J' means PDF.

However, these aren't reliable, as other files can sometimes start with these characters. I tested the decoder on the website you mentioned, and it doesn't work for all filetypes. For some files, it just returns a general .bin. As far as detection goes, it might try decoding the string and testing to see if a certain file type fits. You could try to create your own solution that works in the same way, but it'd make way more sense to detect the file type based on the extension since you'll have access to it.