In HTML5, I can get an open file dialog with the following code:
<input id="fileOpenDialog" type="file" accept=".proj" />
(note, .abc is my own project format)
When Google Chrome opens the dialog, it shows it like this:
Is there a way to provide an additional description for the file type? I would like it to show something like "ABC Project File (.proj)".
Although I like the suggestion, there is no attribute in the input type=file that supports this.
File extensions are kept on the client, and those values are shown in the dropdown.
You can find all supported attributes in the specification.
No this isn't possible.
That said, however, your upload form itself should clearly specify which type of file is being requested from the user; the user should know what file they are expected to load before selecting to chose a file.
Whilst on this subject, it's also worth noting that the HTML5 Candidate Recommendation specifies the following warning:
Warning: Extensions tend to be ambiguous (e.g. there are an untold number of formats that use the ".dat" extension, and users can typically quite easily rename their files to have a ".doc" extension even if they are not Microsoft Word documents), and MIME types tend to be unreliable (e.g. many formats have no formally registered types, and many formats are in practice labeled using a number of different MIME types). Authors are reminded that, as usual, data received from a client should be treated with caution, as it may not be in an expected format even if the user is not hostile and the user agent fully obeyed the accept attribute's requirements.
Even if you were somehow able to rename your desired file type to "ABC Project File (.proj)", the user would still be able to upload any other file with the .proj extension.
Related
I'm doing a computing assignment, and I read this passage and had no clue. I don't get the full picture behind what MIME-type are...
"Note that filelename extensions are not the same as file types. Some filesles may end in .html or .htm but
the header indicates that the MIME-type is text/plain. On the other hand, a file may have an extension
.txt - or no extension - but have a MIME-type of text/html. The MIME-type defines the true type
of the file."
What do you mean by the MIME-type defines the true type of file?
Thank you so much!
I can give a self-learning experience
in windows open Registry Editor
Start -> Run -> regedit
Expand HKEY_CLASSES_ROOT
choose any extension you want say (.pdf)
you can understand how is it related and how it is treated
Again expand .pdf, you can see through which application it is usually processed
this makes a perfect learning experience of various MIME types and its content type and which application it is as default processed
MIME type is not only determined by the ending of a file, it also refers to the content in the file i.e. a python script s.py has MIME type text/x-python, while an empty file named s.py has inode/x-empty on a linux system
In linux use file --mime-type FILE_NAME command
How can I find out a file's MIME type (Content-Type)?
MIME types are just a way to identify the type of a file. Typically, there are two ways to figure out what the type of a file is:
Look at the file extension. For example, a pdf is usually saved as file.pdf ending with the extension pdf. This is a hint that the type of the file is pdf file. However, you can change the name of the file and simply change its extension to something else. So, the name of a file does not necessarily have to indicate its type
Look at the contents of the file and try to guess based on how its arranged in binary.
Most binary files have very specific representation inside a file. For example, if you open a pdf file in a notepad (or any text editing program), you will find that it starts with %PDF-. Followed by some numbers and potentially weird characters. This tells you that this is a pdf type.
Why is this useful? Files are simply saved as blocks of binary data. However, certain files can only be opened by certain programs (for example, music files can't be "opened" by text editors, it can only be played with a music player). By figuring out the MIME type of a file, you can understand how to interpret the data in the file (for example, text, image, video, audio are common mime types). Then, you can use the correct software to use the file.
The accept object property filters files with a certain extension -- but is there a way to filter based on object name as well?
<input type="file" id="HelloWorld" accept=".txt"></input>
Let's say I wanted to filter for a file called "HelloWorld" with the extension of ".txt". How could this be done?
No you only can provide mime types according this page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept
accept
If the value of the type attribute is file, then this attribute will
indicate the types of files that the server accepts, otherwise it will
be ignored. The value must be a comma-separated list of unique content
type specifiers: A file extension starting with the STOP character
(U+002E). (e.g. .jpg, .png, .doc).
A valid MIME type with no extensions.
audio/* representing sound files.
video/* representing video
files. HTML5 image/* representing image files.
To explicit check the filename you need to do something with javascript or in your backend where you POST.
The "accept" argument only filters on file types and extensions (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)
You could write a JavaScript handler on before form post, or server-side handler, to capture and validate that the correct file name was chosen -- in fact, if you truly needed the file type to be correct, you would want to do this anyway -- as noted in the above reference documentation:
The accept attribute doesn't validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.
Because of this, you should make sure that the accept attribute is backed up by appropriate server-side validation.
I have a directory structure, containing a list of directories and files.
I want to give user an option of downloading a file. For downloading, I'm using HTML5 download attribute. It works perfectly.
But the directory structure i have can have dotfiles too, examples: .babelrc, .gitignore, .eslintrc, etc.
When I use the same technique to download such files, file is being downloaded with the same content but the file is no longer a dotfile. After downloading, let's say .gitignore, the file becomes gitignore.txt.
I'm using this for my project github-plus - Chrome extension to display size of each file, download link and an option of copying it's contents.
Any help would be highly appreciated.
I'm using this format:
Download
JSFIDDLE DEMO
Quoting HTML5 specification on downloading resources with the download attribute, about file type/extension :
If the claimed type is known, then alter filename to add an extension corresponding to claimed type.
Otherwise, if named type is known to be potentially dangerous (e.g. it will be treated by the platform conventions as a native executable, shell script, HTML application, or executable-macro-capable document) then optionally alter filename to add a known-safe extension (e.g. ".txt").
It seems that:
the part of the algorithm that finally choses the filename is platform-dependent
if the extension is not recognised, as in the case of dotfiles, the browser will try to determine it by using the file MIME type
dotfiles might be considered anyway as potentially harmful as they are hidden files on various platforms. This seems to be what happens in your case, with the initial dot being removed and the .txt extension appended.
How to restrict file type (e.g. .pem, .cer) using in HTML5. The accept tag does not serve the purpose fully, as I can type some other file type and the file gets uploaded. The field is of input type "file".
For example all audio types:
<input type=file accept="audio/*">
1 audio type:
<input type=file accept="audio/mp3">
HTML5 does not provide a way to exempt specific file types.
Q. How to restrict file type in HTML5?
This is not possible in a fool-proof way.
Q. Why?
The accept attribute on the input tag is only a helper attribute. It is not a validation tool (see the tip on this page that clarifies this). Therefore, expecting the accept attribute to validate the files is unrealistic.
Support for the accept attribute varies across web browsers (even their latest versions) so another reason not to depend on this attribute for validating files being uploaded.
There is no other mechanism in HTML5 to validate file uploads.
Even if the client (web browser) could enforce file extensions, users can always rename files to an acceptable format and upload them. For example, if HTML could restrict upload to PDF files, nothing stops the users from renaming EXE files to PDF and uploading them.
Q. So what's the solution?
Always validate data on the server-side. Uploads are no different than other types of data. Even if there are safeguards on the client to validate data, it must always be validated on the server side. Use the client-side options as helpers but don't overly rely on them.
How would you configure the file upload window to default *.csv files. I'm not particularly concerned about it preventing users from entering . or putting it back to all files, just as a convenience to users to autocratically filter out irrelevant files.
File input elements do have an accept attribute which according to the specification, should determine the MIME type of files to be allowed. However, most browsers do not support this.
Therefore the only method available to you is to check the file extension of the value on submission of the form against the filetypes you would like to allow.