How to determine the file type of a file using javascript

Question

I need help regarding on how to determine a file type using JavaScript. For example in this html.

<div class="indi-download">
<div class="pull-left">
    <h6 class="file-format">%file_display_name%</h6>
</div>
<div class="pull-right">
    <a class="download-link" href="%file_url%">Download</a>
</div>

on this line of code,

<a class="download-link" href="%file_url%">Download</a>

the href="%file_url%" will return the file type with the following extensions:example: .docx or .pdf.

something like this.

<a class="download-link" href="http://mysite.com/download/myfiles/sample.pdf">Download</a>

my problem is, I need to detect what type of file is that using javascript. And if it is a .pdf, the class class="file-format" will change into class="pdf-file-format" and class="doc-file-format" for .doc. It depends on the file extension. Any idea on how to do this? what must be the best trick to do this?

This is my sample output, I just want to change the icon of a file that's why I need to change the class name.

enter image description here

EDIT I did something like this but it doesn't work if there are multiple items on the list. Its only working on the first item. please help me.

<body onload="myFunction()">
<div class="indi-download">
<div class="pull-left">
    <h6 class="pdf-file" id="file-display-id">%file_display_name%</h6>
</div>
<div class="pull-right">
    <a class="download-link" id="download_link" href="%file_url%">Download</a>
</div>
</div>
</body>

JavaScript

<head>
<script type="text/javascript">
function myFunction()
 {
  var url = document.getElementById("download_link").href;
 var ext = url.split('.').pop();
 if(ext=='pdf'){
 var newfileclass = document.getElementById("file-display-id");
 newfileclass.className="pdf-file";
 }
 else if((ext=='docx')){
 var newfileclass = document.getElementById("file-display-id");
 newfileclass.className="pdf-file doc-file";
}
else if(ext=='zip'){
var newfileclass = document.getElementById("file-display-id");
newfileclass.className="pdf-file zip-file";
}
else{
var newfileclass = document.getElementById("file-display-id");
newfileclass.className="other-file";
}
}
</script> 
</head>

Kindly refer.. [1]: http://stackoverflow.com/questions/4164894/how-to-get-a-extension-of-a-file-using-jquery-or-javascript — Lakshmi Prasanna, Oct 31 '13 at 07:23
This should help you: [extend-regexp-to-get-the-file-extension][1] [1]: http://stackoverflow.com/questions/14750913/extend-regexp-to-get-the-file-extension — schnawel007, Oct 31 '13 at 07:25
If you have any influence over the HTML being generated send the file type (extension) down as separate data and add a data attribute to the element, similar to `data-file-type="pdf"` Maybe this would look similar to: `Download` This is what we are doing when ever we need the kind of data. HTML renders data, your server should provide the relevant data to render. Your CSS can also style based on querying data attributes..`a[data-file-type="pdf"].download-link{...pdf styles...}`. Lots of options. — Nope, Nov 04 '13 at 22:24

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

If all your files have an extension just split the file name with extension = filename.split('.'); and the determine the file type by the extension.

How about this:

function changeClass(fileUrl){
    var extension = fileUrl.split('.').pop();
    if(extension.toLowerCase() == 'pdf')
    {
        return "pdf-file-format";
    }

}

$(document).ready(function(){
    $(a).live().addClass(changeClass( $(a).attr('href') ) );
});

It's sort of a pseudo code and I haven't tested it, but I think you get the point of what I have in mind ;)

Also as Lakshmi stated: How to get a extension of a file using jquery or javascript?

edited May 23 '17 at 12:28

Community

1
1

answered Oct 31 '13 at 07:31

Dropout

13,653
10
56
109

Yup. I think splitting the file would be a great one. I also edited my question above. I think It's working but only on the first Item, do I need to loop the items? – Jarich Oct 31 '13 at 09:18
`$(a).live()` checks all links on the page afaik – Dropout Oct 31 '13 at 09:25

score 0 · Answer 2 · answered Oct 31 '13 at 07:38

0

Does the class have to be "pdf-file-format"? I detect .pdf file links on my own site straight through CSS, like

a[href$="pdf"] { /* css styles for pdf links */ }

Eh?

answered Oct 31 '13 at 07:38

Dan Goodspeed

3,484
4
26
35

score 0 · Answer 3 · answered Oct 31 '13 at 07:40

Give an id to a tag

<a class="download-link" id="download_link" href="http://mysite.com/download/myfiles/sample.pdf">Download</a>

And use this javascript function to change the class

var change_class_a = function(url) {
    var m = url.match(/(.*)[\/\\]([^\/\\]+)\.(\w+)$/);
    if(m[3] == 'pdf')
       document.getElementById("download_link").className = "YOUR_CLASS";

};

var url = document.getElementById("download_link").href;
change_class_a(url);

How to determine the file type of a file using javascript

3 Answers3