Input does not take the file type

Asked

Viewed 73 times

2

In my application I have a simple input to grab a file XLS on most computers it works normally, but in some it is with problem. The browser ends up not being able to catch the type of the file and when sending the content-type of the file ends up going as Application/Octed-Stream giving server error. I created a simple form to test and continued with the same problem in computers giving problem.

const clickButton = () => {
    const file = document.getElementById('file');
    console.log(file.files[0]);
}
<input type="file" name="file" id="file">
<button onclick="clickButton()">Click aqui</button>

In this that I am the file inputado ends up like this:

{
  "name": "motoristaPequeno2.xlsx",
  "lastModified": 1553863165554,
  "lastModifiedDate": "2019-03-29T12:39:25.554Z",
  "webkitRelativePath": "",
  "size": 9101,
  "type": "", // <- Type vazio aqui
  "slice": function slice() { [native code] }
}

Someone’s been through it?

Note: Chrome Version 75.0.3770.80 (Official version) 64 bits
Windows Version 1803 Compilation (17134.829)

javascript html html5 input
  • 1

    Someone in my showed type.. Tested in Chrome

  • So that’s what’s weird. On my personal computer it also shows, but the company’s not showing.

  • 1

    which browser is used in the company?

  • Windows and Chrome version are the same yet

  • I am using Chrome

  • You can use the attributo Accept in the upload field to limit the range of selectable types and check the file type by its extension and make a more accurate validation in the backend. See the list of mimes for excel here

  • @Vinicius.Silva O accept is only a facilitator for the user, to list in the folder only the files of that type; as well as the file extension says nothing about the type of it, as I can generate a code in PHP and save as JPG, depending on how the file is used, will remain a PHP (a huge security breach on many websites out there).

  • The worst we’re using accept=".xlsx", it can make a first "validation" and the file is of the correct type, but for some reason the type is not being picked up by the input.

  • @Andersoncarloswoss I believe you didn’t see the part in my comment "(...)make a more accurate validation in the backend"

  • 1

    @Vinicius.Silva Yes, I saw it and I agree, but I commented because the focus of the question is to solve/understand why it is empty in some browsers and none of the actions you suggested would circumvent it. They are excellent tips and only improve the application, but it seemed that you suggested as a solution.

  • 3

    The problem here is to want to use the customer-provided Mime as a reference. While serving for some basic filtering, the final treatment should always be done on the server. - The most you can do with client mime is to refuse absurdly inappropriate things (with a JS warning inappropriate upload, for example), but accepting the common "generic" types is convenient. Consider that not everyone will have the Mime-linked extensions you expect.

Show 6 more comments

1 answer

4


In accordance with the W3C, the attribute is expected to type is empty when the browser is unable to determine the MIME of the file in question. That is, being empty is not a problem and should be addressed in its application.

The question becomes why some browsers can correctly determine MIME and others cannot, possibly even between the same versions of the browser. Turns out, according to this discussion at Soen, the identification of MIME by the browser will depend on actions in the Operating System (obviously) and particularly when it is Windows, will depend on user settings based on the system records.

If I understand correctly, in some computers you may not be recognizing MIME correctly because there is no relationship between file extension and MIME to be considered in these operating systems.

In a quick search I found that in Windows 10 the registry responsible for this association is the HKEY_CLASSES_ROOT\MIME\Database\Content Type, but someone more knowledgeable of Windows will be able to confirm the information and tell how to manage such record correctly.

  • It makes sense, I think that’s what’s happening. But the question I’m left with now is how it should be treated in the application. I would edit the content-type and send it to the back or deal with it there?

  • 2

    @Eduardoribeiro You can do it, but the basic rule is "Never trust your client’s data". That is, on the server, even if you receive the MIME correctly you should do the check.

Browser other questions tagged javascript html html5 input

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