jquery - Get content type of 'File' object using javascript -


i have 2 files same extensions follows:

1) test_audio_file.mp4 (consist of audio content)

2) test_video_file.mp4 (consist of audio , video content)

after uploading file, creating file object of uploaded file.

i want check content type of file object. i.e. audio/mp4 first file , video/mp4 second file.

when print file type using file_object.type method, getting video/mp4 in both cases.

my assumption audio/mp4 first file , video/mp4 second file.

i putting line of code here:

loadfile: function(file) {    console.log(file.type); };

is there method or way content type audio first file , video second file.

any ideas great. thanks!

the browser assume mime-type file extension in both cases here mp4.

to sure, can check binary content of file.

example

assuming have loaded file in arraybuffer first create flexible view (uint32array cannot used length of buffer must 4-bytes aligned not case file, , dataview big-endian little-endian swapping you):

var view = new dataview(buffer);              // buffer = arraybuffer

(update: removed "unneeded" first check/used box size recommend use in case. more details added.)

then, check atom (the mp4 file-format operates "atoms" , "boxes" instead of "chunks" in many other similar formats) "ftyp" (0x66747970) in bytes 4-8 (big-endian):

if (view.getuint32(4) === 0x66747970) {       // = "ftyp"     // ok, far good.. }

now check what type of mp4 is:

if (view.getuint32(8) === 0x64617368) {       // = "dash"     // audio } else if (view.getuint32(8) === 0x6d703432) {  // = "mp42"     // audio + video }

we can create object-url proper mime-type set, audio:

var blob = new blob([buffer], {type: "audio/mp4"}); var url = url.createobjecturl(blob);  // src video/audio element

note there many other types need consider (use hex editor inspect actual values of files expect) , want use arrays indexof() check multiple possible values:

var videotypes = [0x6d703432, 0x69736f6d, ...];   // mp42, isom, ... ... var type = view.getuint32(8); if (videotypes.indexof(type) > -1) { /* ok! */ }

as fallback can assume video/mp4 unknown headers , types, create blob video/mp4 mime-type , let browser deal file there.

also see link above details on offsets , box lengths.

working demo

the following demo limited check types of given example files. of course need extend other mp4 types (type field) check in real-world application using example 1 array audio types, 1 video etc.

load 1 of files have analyzed.

var inp = document.queryselector("input");  inp.onchange = function(e) {    var reader = new filereader();    reader.onload = analyze;    reader.readasarraybuffer(e.target.files[0]);  };    function analyze(e) {    var buffer = e.target.result, view = new dataview(buffer), blob, url;        // check file type    if (view.getuint32(4) !== 0x66747970) {                    // = "ftyp"      alert("not mp4 file!"); return    }      // check if audio or audio+video    if (view.getuint32(8) === 0x64617368) {                    // = "dash"      alert("audio\n(see console example url)");      blob = new blob([buffer], {type: "audio/mp4"});    }    else if (view.getuint32(8) === 0x6d703432 ||               // = "mp42"             view.getuint32(8) === 0x69736f6d) {               // = "isom"      alert("video+audio\n(see console example url)");      blob = new blob([buffer], {type: "video/mp4"});    }    else {                                                    // assume video/mp4      alert("unsupported:\n0x" + (view.getuint32(8)).tostring(16));      blob = new blob([buffer], {type: "video/mp4"});    }        // convert blob url can used video/audio element    url = (url || webkiturl).createobjecturl(blob);    console.log("copy , paste tab, wo/quotes:", url);  }
pick mp4 file: <input type="file">


-

Comments

Post a Comment

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

we have developed soap based webservice post data third party webservice. accepts 4 params. in 1 of parameters accepts xml string no size limit restriction put in place. the webservice works fine in local environment running on php 5.2 , apache2. works content length long 10 mb. in staging server running nginx , php fpm.we have updated max post size , max upload filesize in php.ini , client_max_body param in nginx.conf allow upto 50 mb. but webservice client keeps on loading in staging environment. gives 502 timeout , gives soap error. can me understand issue here?
Read more

asynchronous - Python asyncio task got bad yield -

i confused how play around asyncio module in python 3.4. have searching api search engine, , want each search request run either parallel, or asynchronously, don't have wait 1 search finish start another. here high-level searching api build objects raw search results. search engine using kind of asyncio mechanism, won't bother that. # no asyncio module used here class search(object): ... self.s = some_search_engine() ... def searching(self, *args, **kwargs): ret = {} # raw searching according args , kwargs , build wrapped results ... return ret to try async requests, wrote following test case test how can interact stuff asyncio module. # here testing script @asyncio.coroutine def handle(f, *args, **kwargs): r = yield f(*args, **kwargs) return r s = search() loop = asyncio.get_event_loop() loop.run_until_complete(handle(s.searching, arg1, arg2, ...)) loop.close() by running pytest, return runtimeerror: task got bad yield : {results s...
Read more

javascript - Complete OpenIDConnect auth when requesting via Ajax -

the normal openidconnect server works like: you go a.com/secure-resource you 302 server your browser handles , sends identity server you login there it sends a.com via post you logged in on a.com , a.com/secure-resource on browser. however have scenario i'm trying solve need help. the user logged in on idserver the user logged in on a.com the user not logged in on b.com we need send ajax call web server b.com (from domain a.com ) b.com configured use openidconnect. but because request b.com via ajax, user cannot redirected idserver. (all in response 302 ) we can go ahead , handle 302 via ajax (i'm still not sure whether work, security-wise). but is there scenario in identityserver/openidconnect designed these situations? with identityserver in scenario setup server b.com use bearer token authentication, need use access token provided a.com in headers of ajax call $.ajax({ url: 'http://b.com', headers: { ...
Read more