How to control Javascript file type without capturing extension?

Asked

Viewed 706 times

4

Example:

<input type="file" name="meu arquivo">

I know there is a method to capture the name of the described extension, but my goal is to prevent the client to change the file extension, for example, PDF for TXT and try to submit the file. I want it to upload files . Ret, . data, . txt and others.Does anyone know if such madness is possible?

  • This would be possible by checking the MIME type file, but as far as I know Javascript can not get the MIME type, you would have to check with a language server-side.

  • @Kazzkiq, I know php does this, but the problem is that I would not like to upload to the server.

2 answers

5

You can recover MIME Type as follows:

var mimeType = document.getElementById('fileUploader').files[0].type;
if (mimeType == "text/plain") { ... }

Example: http://jsfiddle.net/vrcca/Ld8kc/

If you want to know if MIME Type is a txt, zip, etc, you can use the Filetypes.JS.

var mimeType = document.getElementById('fileUploader').files[0].type
if (Stretchr.Filetypes.extensionFor(mimeType) == "txt") { ... }
  • In case to know the MIME then I have to use Filetype.JS there is no other way?

  • No, Filetype.JS is only pro case you want to handle "js" instead of "application/javascript". I’ll add examples in the reply.

  • I added the examples. For now Filetype.JS does not have the extensionFor(text) function, but I have created a Fork from their repository and added this function: https://github.com/vrcca/filetypes.js. I am waiting for the Filetypes staff to accept my changes: https://github.com/stretchr/filetypes.js/pull/2.

  • 2

    According to the other answer "Most current MIME Type detection solutions are based on the file extension - Filetype.JS, for example, does just that." then @Rogerscorrêa ends up having the same problem that is trying to avoid

  • Actually, I just tested and checked that the . type is defined by the file extension.. :(

  • I did a test with a . sql file and the return was nothing

  • Here returned application/sql

Show 2 more comments

5

TL;DR: There’s no way at the moment.

Long answer: Yes, it is possible, but not with the current tools.

Most detection solutions for MIME Type are based on the file extension - Filetype.JS, for example, does just that.

To determine the content-type correct, you need to open the file and investigate by headers of known formats, also known as Magic Bytes (or Magic Numbers).

Some examples (source):

Executáveis                 Mnemônico       Assinatura (bytes)
DOS Executable              "MZ"            0x4D 0x5A
PE32 Executable             "MZ"...."PE.."  0x4D 0x5A ... 0x50 0x45 0x00 0x00
Mach-O Executable (32 bit)  "FEEDFACE"      0xFE 0xED 0xFA 0xCE
Mach-O Executable (64 bit)  "FEEDFACF"      0xFE 0xED 0xFA 0xCF
ELF Executable              ".ELF"          0x7F 0x45 0x4C 0x46

Protocolos de compressão    Mnemônico       Assinatura (bytes)
Zip Archives                "PK.."          0x50 0x4B 0x03 0x04
Rar Archives                "Rar!...."      0x52 0x61 0x72 0x21 0x1A 0x07 0x01 0x00
Ogg Container               "OggS"          0x4F 0x67 0x67 0x53
Matroska/EBML Container     N/A             0x45 0x1A 0xA3 0xDF

Image File Formats          Mnemônico       Assinatura (bytes)
PNG Image                   ".PNG...."      0x89 0x50 0x4E 0x47 0x0D 0x0A 0x1A 0x0A
BMP Image                   "BM"            0x42 0x4D
GIF Image                   "GIF87a"        0x47 0x49 0x46 0x38 0x37 0x61
GIF Image                   "GIF89a"        0x47 0x49 0x46 0x38 0x39 0x61

(More information via Wikipedia.)

One of the new possibilities offered by the HTML5 specification is the File API, it is possible to open files and perform look-ups by such bytes. Still you will encounter some problems:

  • Some formats do not have Magic bytes, it being impossible to distinguish their content without some kind of Parsing: for example, Javascript versus HTML versus plain text files.

  • Some formats have repeatable bytes Magic.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.