Get MIME type and extension from base64 string in Javascript

Question

I have a base64 string like this:

JVBERi0xLjUNJeLjz9MNCjEwNzYgMCBvYmoNPDwvTGluZWFyaXplZCAxL0wgMjE0MDcyL08gMTA3OC9FIDE4ODA0OS9OIDgvVCAyMTM2NTAvSCBbIDUwMiAyMzNdPj4NZW5kb2JqDSAgICAgICAgICAgDQoxMDkyIDAgb2JqDTw8L0RlY29kZVBhcm1zPDwvQ29sdW1ucyA1L1ByZWRpY3RvciAxMj4+L0ZpbHRlci9GbGF0ZURlY29kZS9JRFs8NjU2QTUwQkZGRjE4Q0I0QzgyNDQ1N0QwOTcxN0NGRUQ+PDJDMDgyNjNGMzczNDUxNENCMUZERjE1RkQ5RjgxMEM0Pl0vSW5kZXhb...etc...

Is it possible to decode it and get MIME type and extension from it? I know a way using magic numbers, mentioned in the top comment here: How to get MIME-TYPE from Base 64 String?

But in my app, user can upload any type of file he wants, so what should I do?

For example, this page decodes base64 string and returns both extension and MIME type, so I know it's possible:https: //base64.guru/converter/decode/file

Use https://developer.mozilla.org/en-US/docs/Web/API/atob to decode the string. Hopefully the data will contain the mime-type. — evolutionxbox, May 02 '22 at 10:23
@Yogi and your suggestion is to have all the signatures on the frontend and compare them to the file singature? There must be an easier way. — NoDiggityNoDoubt, May 02 '22 at 10:42
base64.guru will probably do more or less the same as in the linked SO question. The Base64 string contains just the binary content of a pdf file in encoded form. The principle is always the same, try to see if the data contains a file header and compare to known types. See also [here](https://stackoverflow.com/questions/62329321/how-can-i-check-a-base64-string-is-a-filewhat-type-or-not/62330081?r=SearchResults&s=20|7.9810#62330081). No magic. — jps, May 02 '22 at 10:45

score 2 · Answer 1 · answered May 02 '22 at 10:35

2

On the front end, capture the mime type of the file chosen to be uploaded by the user( it's a property of a file object) and include the mime type in the upload (fetch, axios, formdata, post, whatever) sent to the server.

answered May 02 '22 at 10:35

traktor

17,588
4
32
53

The thing is, I can only send the extension with the API, and not the MIME type bcz I am doing only frontend...and on the backend, the databases can't be messed with bcz too many packages and procedures would have to be messed with – NoDiggityNoDoubt May 02 '22 at 10:40

score 1 · Answer 2 · answered May 02 '22 at 11:30

To illustrate @traktor solution....

OP notes that it's not possible to upload additional metadata like mime type, yet that is not necessary because the mime type is already included in the base64 string that is generated.

Example output:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEA...
data:text/plain;base64,ZXlKamIyMXRaVzUwY3lJNlczc2l...
data:text/html;base64,PCFkb2N0eXBlIGh0bWw+DQo8aHRt...
data:application/pdf;base64,JVBERi0xLjcKCjQgMCBvYm...
data:application/vnd.openxmlformats-officedocument...

Run the code snippet to try:

upload.onchange = function(e) {
  for (var f of e.target.files) {
    const reader = new FileReader();
    reader.readAsDataURL(f);
    reader.onload = () => console.log(reader.result.substring(0, 50) + "...");
  }
}

Select multiple file types for upload:<br/>

<input type="file" multiple="true" id="upload">

when I enter a base64 string it gives me an error: `Uncaught (in promise) TypeError: FileReader.readAsDataURL: Argument 1 does not implement interface Blob.` . I don't have a file, I have a base64 string. Is it still possible? — NoDiggityNoDoubt, May 02 '22 at 11:56
How are you generating the base64 from the file(s) to upload? I assume that's done on the frontend and that it uses FileReader. So the mime type is being chopped off for some reason? And if the backend is unchangeable then how would this info be used for anyway? — Yogi, May 02 '22 at 14:49

Get MIME type and extension from base64 string in Javascript

2 Answers2