Develop Reference

File reader API gives no out put on AUDIO files

As a part of a before upload control, I check if added files actually match the filetype that their extension describes.
I do a filecheck using a hidden element. and if it fails, it gets removed after formdata append.
I check the files at the backend too, but I also want to check via File Reader process. All functions like createItems or readItems and so on, are working in all other cases, meaning that they return output of either null, true or false. While I get output from image and video files, audio files not at all. It should work.
The question is: Does the file reader read audio files differently compared to video and image files?
The following is only a tiny block of the actual code.
Now the question is: Why it doesn't return output on audio files?.
quest0 & quest1 are UI elements. Which is the element that I pull the files from.
reader is "new FileReader".
what.filecount is added while page init as readonly property.
readItems gives output on all kind off files,
However the UI html doesn't get updated if it is the file type is audio/?
for (var oD = 0; oD < what.files.length; oD++)
{
var pL = false;
if (typeof window.dofile === 'undefined' || !window.dofile) { return; }
if (file_s.exec(file) && !what.multiple) { pL = true; }
else
{
if (what.files.length > what.filecount)
{
alert('too many files added. only ' + what.filecount + ' are allowed.');
what.value = '';
if (quest0 != null)
{ quest0.innerHTML = ('too many files added. only ' + what.filecount + ' are allowed.'); }
return;
}
pL = true;
if ( !lastform.includes(what.form.id) ) { pL = false; }
}
if (what.files && what.files[oD] && pL == true)
{
if (file_prev != null)
{
if (file_prev.getAttribute('data-src') == '')
{file_prev.setAttribute('data-src', file_prev.src); }
file_prev.src = file_backsrc;
}
reader.onload = function(e)
{
init();
if (typeof file_prev === 'undefined')
{
if (quest1 != null) { quest1.innerHTML = 'Error occoured'; }
return;
}
if (file_p == 'img' || file_p == 'video' || file_p == 'audio')
{ file_prev.src = e.target.result; }
if (file_p == 'canvas') { /*not yet*/ }
kill.classList.remove('invisible');
if (quest1 != null) { quest1.innerHTML = 'file done'; }
}
reader.onerror = function(e)
{
e.preventDefault();
alert('There was an error with one of your file(s). Filename ' + what.files[oD].name + '');
what.value = '';
}
function waitfor(arr)
{
if (arr == null || arr.length == 0) { return; }
var aL = arr.length,
aL0 = arr.shift();
file_prev = _(aL0.file_prev);
lastfile = aL0.lastfile;
file_p = aL0.file_p;
reader.readAsDataURL(aL0.file);
aL0.kill.classList.add('invisible');
setTimeout(() => {
init();
waitfor(arr)
}, 1250);
if (quest1 != null)
{ quest1.innerHTML = 'processing ' + file_p; }
}
if (what.multiple)
{
var oA = 0;
lastfile = what.files[oD].name;
for (oA; oA < dK.children.length; oA++)
{
var oB = what.files[oD], oB0, oB1;
if (oB.type.includes('im')) { file_p = 'img'; }
if (oB.type.includes('au')) { file_p = 'audio'; }
if (oB.type.includes('vi')) { file_p = 'video'; }
if (lastfile != what.files[oD].name || lastfilearr.length <= what.filecount)
{
oB0 = dK.children[oA];
if (oB0.nodeName.toLowerCase() == file_p && what.form.querySelectorAll(file_p)[oD] != null)
{
if ( /*oB0.getAttribute('data-src')==''&&*/ !lastfilearr.includes(what.files[oD].name))
{
oB0 = what.form.querySelectorAll(file_p)[oD];
file_prev = oB0;
lastfilearr.push(what.files[oD].name);
oB0.setAttribute('data-src', lastfile);
oB1 = new Object({
'file_prev': file_prev.id,
'file_p': file_p,
'file': what.files[oD],
'kill': kill
});
stoargearr.push(oB1);
createtoast(['Filechecker', 'the ' + what.files[oD].name + ' is getting checked.', 3e3, true, true, ['bg-info', 'text-dark', 'rounded', 'px-2', 'mx-1']]);
createItems('upload', 's', what.files[oD].name, 'name:' + what.files[oD].name + ';nr:' + oD + ';filesize:' + what.files[oD].size + ';filesizehuman:' + Math.abs(what.files[oD].size / 1024 / 1024).toFixed(2) + ';lastmodified:' + new Date(what.files[oD].lastModified).toUTCString() + ';type:' + what.files[oD].type + ';');
}
}
}
}
if (stoargearr.length == what.files.length) { waitfor(stoargearr); }
else { reader.readAsDataURL(what.files[oD]); }
}
}
}
Does the "File reader API" react different on audio files as it does on video or image files?
Thanks for any help.

here it goes.
for (var oD = 0; oD < what.files.length; oD++) {
var pL = false;
if (typeof window.dofile === 'undefined' || !window.dofile) {
return;
};
if (file_s.exec(file) && !what.multiple) {
pL = true;
} else {
if (what.files.length > what.filecount) {
alert('too many files added. only ' + what.filecount + ' are allowed.');
what.value = '';
if (quest0 != null) {
quest0.innerHTML = 'too many files added. only ' + what.filecount + ' are allowed.';
};
return;
};
pL = true;
if (!lastform.includes(what.form.id)) {
pL = false;
};
};
if (what.files && what.files[oD] && pL == true) {
if (file_prev != null) {
if (file_prev.getAttribute('data-src') == '') {
file_prev.setAttribute('data-src', file_prev.src);
};
file_prev.src = file_backsrc;
};
reader.onload = function(e) {
init();
if (typeof file_prev === 'undefined') {
if (quest1 != null) {
quest1.innerHTML = 'Error occoured';
};
return;
};
if (file_p == 'img' || file_p == 'video' || file_p == 'audio') {
file_prev.src = e.target.result;
};
if (file_p == 'canvas') { /*not yet*/ };
kill.classList.remove('invisible');
if (quest1 != null) {
quest1.innerHTML = 'file done';
};
};
reader.onerror = function(e) {
e.preventDefault();
alert('There was an error with one of your file(s). Filename ' + what.files[oD].name + '');
what.value = '';
};
function waitfor(arr) {
if (arr == null || arr.length == 0) {
return;
};
var aL = arr.length,
aL0 = arr.shift();
file_prev = _(aL0.file_prev);
lastfile = aL0.lastfile;
file_p = aL0.file_p;
reader.readAsDataURL(aL0.file);
aL0.kill.classList.add('invisible');
setTimeout(() => {
init();
waitfor(arr)
}, 1250);
if (quest1 != null) {
quest1.innerHTML = 'processing ' + file_p;
};
};
if (what.multiple) {
var oA = 0;
lastfile = what.files[oD].name;
for (oA; oA < dK.children.length; oA++) {
var oB = what.files[oD],
oB0, oB1;
if (oB.type.includes('im')) {
file_p = 'img';
};
if (oB.type.includes('au')) {
file_p = 'audio';
};
if (oB.type.includes('vi')) {
file_p = 'video';
};
if (lastfile != what.files[oD].name || lastfilearr.length <= what.filecount) {
oB0 = dK.children[oA];
if (oB0.nodeName.toLowerCase() == file_p && what.form.querySelectorAll(file_p)[oD] != null) {
if ( /*oB0.getAttribute('data-src')==''&&*/ !lastfilearr.includes(what.files[oD].name)) {
oB0 = what.form.querySelectorAll(file_p)[oD];
file_prev = oB0;
lastfilearr.push(what.files[oD].name);
oB0.setAttribute('data-src', lastfile);
oB1 = new Object({
'file_prev': file_prev.id,
'file_p': file_p,
'file': what.files[oD],
'kill': kill
});
stoargearr.push(oB1);
createtoast(['Filechecker', 'the ' + what.files[oD].name + ' is getting checked.', 3e3, true, true, ['bg-info', 'text-dark', 'rounded', 'px-2', 'mx-1']]);
createItems('upload', 's', what.files[oD].name, 'name:' + what.files[oD].name + ';nr:' + oD + ';filesize:' + what.files[oD].size + ';filesizehuman:' + Math.abs(what.files[oD].size / 1024 / 1024).toFixed(2) + ';lastmodified:' + new Date(what.files[oD].lastModified).toUTCString() + ';type:' + what.files[oD].type + ';');
};
};
};
};
if (stoargearr.length == what.files.length) {
waitfor(stoargearr);
};
} else {
reader.readAsDataURL(what.files[oD]);
};
};
};```

if (quest1 != null) {
quest1.innerHTML = 'processing ' + file_p;
};
This block gives no output on audio files.

Javascript condition not working as expected

I have a JS code which works fine when
checkQueryString != "M"
but When the value becomes checkQueryString == "M" it doesn't goes inside the loop
Here is my code.
function GridExpInfo_ClientAdd(record) {
var checkQueryString = '<%= Request.QueryString["Mode"] %>';
if (checkQueryString != "M") {
if ($('input:checked').length > 0) {
document.getElementById("GridExpInfo_tplRowEdit3_ctl00_txtExpRefNo").disabled = true;
document.getElementById("GridExpInfo_tplRowEdit3_ctl00_txtExpRefDt").disabled = true;
document.getElementById('GridExpInfo_tplRowEdit3_ctl00_ddlStageType').value = "";
var last_value = 0;
var last_text;
var checkboxlist = document.getElementById('ddlStatus');
var checkOptions = checkboxlist.getElementsByTagName('input');
var listSelected = checkboxlist.getElementsByTagName('label');
for (i = 0; i < checkOptions.length; i++) {
if (checkOptions[i].checked == true) {
last_text = listSelected[i].innerText;
last_value = checkOptions[i].value;
document.getElementById('GridExpInfo_tplRowEdit3_ctl00_ddlStageType').innerHTML = "";
var ObjPriOptionExp = document.createElement("OPTION");
ObjPriOptionExp.text = last_text;
ObjPriOptionExp.value = last_value;
document.getElementById('GridExpInfo_tplRowEdit3_ctl00_ddlStageType').add(ObjPriOptionExp);
}
}
}
if(checkQueryString == "M")
{
alert('Value is M now');
}
else {
alert('Kindly select the stage');
}
}
}
So my question is, why it doesn't goes inside if when it matches to M

Because
if (checkQueryString == "M") {
alert('Value is M now');
} else {
alert('Kindly select the stage');
}
Has inside if (checkQueryString == "M")
So try this
function GridExpInfo_ClientAdd(record) {
var checkQueryString = '<%= Request.QueryString["Mode"] %>';
if (checkQueryString != "M") {
if ($('input:checked').length > 0) {
document.getElementById("GridExpInfo_tplRowEdit3_ctl00_txtExpRefNo").disabled = true;
document.getElementById("GridExpInfo_tplRowEdit3_ctl00_txtExpRefDt").disabled = true;
document.getElementById('GridExpInfo_tplRowEdit3_ctl00_ddlStageType').value = "";
var last_value = 0;
var last_text;
var checkboxlist = document.getElementById('ddlStatus');
var checkOptions = checkboxlist.getElementsByTagName('input');
var listSelected = checkboxlist.getElementsByTagName('label');
for (i = 0; i < checkOptions.length; i++) {
if (checkOptions[i].checked == true) {
last_text = listSelected[i].innerText;
last_value = checkOptions[i].value;
document.getElementById('GridExpInfo_tplRowEdit3_ctl00_ddlStageType').innerHTML = "";
var ObjPriOptionExp = document.createElement("OPTION");
ObjPriOptionExp.text = last_text;
ObjPriOptionExp.value = last_value;
document.getElementById('GridExpInfo_tplRowEdit3_ctl00_ddlStageType').add(ObjPriOptionExp);
}
}
}
} else if (checkQueryString == "M") {
alert('Value is M now');
} else {
alert('Kindly select the stage');
}
}

How do I make a resultant cell read only?

I have a form that allows the user to select a pay frequency (hourly, for example) and displays the annualizing factor (2080, for hourly). My code allows the user to modify the annualizing factor, but I want it only to display, not be editable. Can someone help?
Code:
function register() {
document.all.NewFrequency.onchange = OnChange;
}
function Init() {
var selectionValue = document.all.AnnualizingFactor;
register();
if (selectionValue.value == "") {
OnChange();
}
}
function OnChange() {
var selectValue = document.all.NewFrequency;
var selectionValue = document.all.AnnualizingFactor;
if (selectValue.options[selectValue.selectedIndex].value == "Yearly" ) {
selectionValue.value = "1";
}
if (selectValue.options[selectValue.selectedIndex].value == "Weekly") {
selectionValue.value = "52";
}
if (selectValue.options[selectValue.selectedIndex].value == "Unit") {
selectionValue.value = "2080";
}
if (selectValue.options[selectValue.selectedIndex].value == "SemiWeekly") {
selectionValue.value = "104";
}
if (selectValue.options[selectValue.selectedIndex].value == "Semimonthly") {
selectionValue.value = "24";
}
if (selectValue.options[selectValue.selectedIndex].value == "Quarterly") {
selectionValue.value = "4";
}
if (selectValue.options[selectValue.selectedIndex].value == "Monthly") {
selectionValue.value = "12";
}
if (selectValue.options[selectValue.selectedIndex].value == "Hourly") {
selectionValue.value = "2080";
}
if (selectValue.options[selectValue.selectedIndex].value == "Daily") {
selectionValue.value = "365";
}
if (selectValue.options[selectValue.selectedIndex].value == "Biweekly") {
selectionValue.value = "26";
}
if (selectValue.options[selectValue.selectedIndex].value == "None") {
selectionValue.value = "0";
}
}

As #j08691 said, you have to mark the field readonly:
<input type="text" readonly name="AnnualizingFactor" />
Or set the readonly property of the input programmatically:
function Init() {
var selectionValue = document.all.AnnualizingFactor;
selectionValue.readonly = true;
register();
if (selectionValue.value == "") {
OnChange();
}
}

Javascript - multiple tasks in one function not working

I got a script to trim http or https from a form inputs.
This is my script :
function MakeLinkSafe(){
var f = document.getElementById('f')
str = trim(f.value);
if(str.substr(0, 7) == 'http://'){
f.value = str.substr(7);
}
else if(str.substr(0, 8) == 'https://'){
f.value = str.substr(8);
}
return true;
var fb = document.getElementById('fb')
str = trim(fb.value);
if(str.substr(0, 7) == 'http://'){
fb.value = str.substr(7);
}
else if(str.substr(0, 8) == 'https://'){
fb.value = str.substr(8);
}
return true;
}
When I put a url in my "f" input while I leave my "fb" empty and vice versa, it's working. But when I put url in both of the input. It doesn't work.
Is there any problem ith my codes ? Thank you

It's because you have a return statement after the check on the "f" element...
Change your code as follows:
function MakeLinkSafe() {
var checkF = function () {
var f = document.getElementById('f');
str = trim(f.value);
if (str.substr(0, 7) == 'http://') {
f.value = str.substr(7);
}
else if (str.substr(0, 8) == 'https://') {
f.value = str.substr(8);
}
return true;
}
var checkFB = function () {
var fb = document.getElementById('fb');
str = trim(fb.value);
if (str.substr(0, 7) == 'http://') {
fb.value = str.substr(7);
}
else if (str.substr(0, 8) == 'https://') {
fb.value = str.substr(8);
}
return true;
}
return checkF() && checkFB();
}
You can, of course, create a function accepting an id to take advantage of proper functions, as mentioned by mrida above... Something along the lines of the following might do:
function MakeLinkSafe() {
var check = function (id) {
var element = document.getElementById(id);
str = trim(element.value);
if (str.substr(0, 7) == 'http://') {
element.value = str.substr(7);
}
else if (str.substr(0, 8) == 'https://') {
element.value = str.substr(8);
}
return true;
}
return check('f') && check('fb');
}

this code fragment of your code is unreachable
var fb = document.getElementById('fb')
str = trim(fb.value);
if(str.substr(0, 7) == 'http://'){
fb.value = str.substr(7);
}
else if(str.substr(0, 8) == 'https://'){
fb.value = str.substr(8);
}
return true;
before reaching the above code, the function will already have exited with a return value of true.
One way to do it is as follows (this code will fix both your links and alert true in case both are safe links.
function MakeLinkSafe(linkid){
var f = document.getElementById(linkid)
str = trim(f.value);
if(str.substr(0, 7) == 'http://'){
f.value = str.substr(7); return true;
}
if(str.substr(0, 8) == 'https://'){
f.value = str.substr(8); return true;
}
return false;
}
var f = MakeLinkSafe('f');
var fb = MakeLinkSafe('fb');
if(f&&fb)alert(true);else alert(false);

How to import data of gmail contacts, using javascript Google Contact API, in more detailed format?

I'm using code from this page http://code.google.com/apis/contacts/docs/1.0/developers_guide_js.html to get list of gmail contacts. Actually it works ok, but I get data of name, address, etc like a simple string, with "\n" as separator, for example:
<script type="text/javascript">
var contactsService;
var scope = 'https://www.google.com/m8/feeds';
function setupContactsService() {
//contactsService = new google.gdata.contacts.ContactsService('exampleCo-exampleApp-1.0');
contactsService = new google.gdata.contacts.ContactsService('GoogleInc-jsguide-1.0');
}
function getMyContacts() {
var contactsFeedUri = 'https://www.google.com/m8/feeds/contacts/default/full'; //?max-results=9999&alt=json&v=3.0
var query = new google.gdata.contacts.ContactQuery(contactsFeedUri);
setupContactsService();
contactsService.getContactFeed(query, handleContactsFeed, handleError);
}
var handleContactsFeed = function(result) {
var entries = result.feed.entry;
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var addrs = entry.getPostalAddresses();
var name = entry.getTitle();
// logging
console.log(addrs[0]);
console.log(name);
}
}
function handleError(e) {
alert(e.cause ? e.cause.statusText : e.message);
}
</script>
it gives me an object where name and address values are simple strings.
Can I get somehow data in like associative array format, where address will contains separate values of street, zip, city, country; and name separate values of first name, last name etc.
Like:
{
"type": "address",
"value":
{
"street": "Starret 1234",
"city": "City name",
"stateOrProvince": "ca",
"postalCode": "73000",
"country": "USA"
}
},
{
"type": "name",
"value":
{
"firstName": "Allen",
"lastName" : "Iverson",
.....
}
}
Thanks in advance!

Seems I found an answer, for get more detailed and formatted info need to add additional parameter to contactsFeedUri for google.gdata.contacts.ContactQuery.
This additional parameter is: ?v=3.0
So in my case function will looks like:
function getMyContacts() {
var contactsFeedUri = 'https://www.google.com/m8/feeds/contacts/default/full?v=3.0&alt=json';
var query = new google.gdata.contacts.ContactQuery(contactsFeedUri);
setupContactsService();
contactsService.getContactFeed(query, handleContactsFeed, handleError);
}
And for get necessary data I create a simple obj, which can be useful for somebody:
function contactEntry(entry) {
this.entry = entry;
this.testEntry = function() {
alert( 'test entry' )
};
this.getFirstName = function() {
if ((entry.gd$name == null) || (entry.gd$name.gd$givenName == null) || (entry.gd$name.gd$givenName.$t == null)) {
return '';
} else {
return entry.gd$name.gd$givenName.$t;
}
};
this.getLastName = function() {
if ((entry.gd$name == null) || (entry.gd$name.gd$familyName == null) || (entry.gd$name.gd$familyName.$t == null)) {
return '';
} else {
return entry.gd$name.gd$familyName.$t;
}
};
this.getAdditionalName = function() {
if ((entry.gd$name == null) || (entry.gd$name.gd$AdditionalName == null) || (entry.gd$name.gd$AdditionalName.$t == null)) {
return '';
} else {
return entry.gd$name.gd$familyName.$t;
}
};
this.getEmail = function() {
if ((entry.gd$email == null) || (entry.gd$email.length == 0) || (entry.gd$email[0].address == null)) {
return '';
} else {
return entry.gd$email[0].address;
}
};
this.getStreet = function() {
if (!this._addrExists() || (entry.gd$structuredPostalAddress[0].gd$street == null)) {
return '';
} else {
return entry.gd$structuredPostalAddress[0].gd$street.$t;
}
};
this.getCity = function() {
if (!this._addrExists() || (entry.gd$structuredPostalAddress[0].gd$city == null)) {
return '';
} else {
return entry.gd$structuredPostalAddress[0].gd$city.$t;
}
};
this.getCountry = function() {
if (!this._addrExists() || (entry.gd$structuredPostalAddress[0].gd$country == null)) {
return '';
} else {
return entry.gd$structuredPostalAddress[0].gd$country.$t;
}
};
this.getPostcode = function() {
if (!this._addrExists() || (entry.gd$structuredPostalAddress[0].gd$postcode == null)) {
return '';
} else {
return entry.gd$structuredPostalAddress[0].gd$postcode.$t;
}
};
this.getPhone = function() {
if ((entry.gd$phoneNumber == null) || (entry.gd$phoneNumber.length == 0) || (entry.gd$phoneNumber[0].$t == null)) {
return '';
} else {
return entry.gd$phoneNumber[0].$t
}
};
this.getOrganization = function() {
if ((entry.gd$organization == null) || (entry.gd$organization.length == 0) || (entry.gd$organization[0].getOrgName() == null)) {
return '';
} else {
return entry.gd$organization[0].getOrgName().getValue();
}
};
this.getBirthday = function() {
if ((entry.gContact$birthday == null) || (entry.gContact$birthday.when == null)) {
return '';
} else {
return entry.gContact$birthday.when;
}
};
this.getEvent = function() {
if ((entry.gContact$event == null) || (entry.gContact$event.length == 0) || (entry.gContact$event[0].gd$when == null)) {
return '';
} else {
return entry.gContact$event[0].gd$when.startTime;
}
};
// protected methods
this._addrExists = function() {
if ((entry.gd$structuredPostalAddress == null) || (entry.gd$structuredPostalAddress.length == 0)) {
return false;
}
return true;
};
}
It can be used in this way:
var handleContactsFeed = function(result) {
var entries = result.feed.entry;
var contact = new contactEntry(entries[0]);
var address = {};
address['fname'] = contact.getFirstName();
address['lname'] = contact.getLastName() + (contact.getAdditionalName() != '' ? ' ' + contact.getAdditionalName() : '');
address['address'] = contact.getStreet();
address['city'] = contact.getCity();
address['country'] = contact.getCountry();
address['zip'] = contact.getPostcode();
address['phone'] = contact.getPhone();
address['mail'] = contact.getEmail();
address['organization'] = contact.getOrganization();
address['birthday'] = contact.getBirthday();
address['event'] = contact.getEvent();
}