I have a generic file up loader which looks like this:
<span class="input-group-btn">
<span class="btn btn-default btn-fill btn-file">
Browse<input type="file" id="fileInputs" multiple accept="image/*" onclick="resetprogresss()">
</span>
</span>
I can upload multiple files with my Desktop no problems, but When I try and use the same functionality on a mobile device, I cannot seem to select multiple files.
here is the javascript:
var Filenames;
function generateUUID() {
var d = new Date().getTime();
var uuid = 'xxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
};
var MainPath = generateUUID();
var Names = [];
function UploadFiles() {
var SetDir = MainPath;
var fileInputs = document.getElementById("fileInputs");
if ('files' in fileInputs) {
if (fileInputs.files.length == 0) {
alert("Please select a file");
return;
} else {
var file = fileInputs.files[0];
var ar = $("#AutoResumeBoxs").is(":checked");
var chunksize = 20000;
var name = SetDir;
/*
Arguments:
username name used to create subfolders on the server.
files files object from the file input tag.
uploadStartFunction function that receives a file object just before uploading.
progressFunction function that accepts a percent-complete integer value.
doneFunction function called when file is uploaded.
errorFunction function called when an error occurs.
chunkSize size in bytes of each chunk uploaded.
autoResume bool to control auto resuming.
*/
CFUpload(name, fileInputs.files, uploadStarts, progresss, dones, errors, chunksize, ar);
}
}
}
function uploadStarts(thisfile) {
Names.push(thisfile.name);
}
function progresss(percent) {
var p = percent + "%";
$("#lblUPs").text(p);
$("#progressbars").width(p);
$("#progressbars").attr("data-appear-progress-animation", p);
$("#ProgressTabs").text(p);
}
function resetprogresss() {
progresss(0);
}
function dones() {
}
function errors(data) {
}
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
function getCookie(c_name) {
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1) {
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1) {
c_value = null;
}
else {
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1) {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start, c_end));
}
return c_value;
}
$(document).ready(function () {
$("#urls").hide();
document.getElementById("saveme").disabled = true;
var username = getCookie("username");
});
I use this library to upload the files. Any Advice would be greatly appreciated.
Well it depends on the selection method you choose on your mobile , however , my native Gallery , and file manager absloutely work fine on my mobile , just tap and hold the file you want to upload , and it will switch to multi selection mode :
Please note that there are many jQuery plugins out there to upload files like this one , so it is not necessary to use pure html input tag.
Related
I want to show a random image to a page visitor, then only show that same image to the same visitor until the cookie expires.
Everything works properly but I'm stuck on the initialization.
Basically, if there is no cookie set, I need to run 1 of 3 functions randomly.
How would I go about choosing the one of 3 functions at random and running it?
$(document).ready(function() {
var cookie = readCookie("boatColor");
if (!cookie) {
console.log('Run one of 3 Functions Randomly');
} else if (cookie == "boatRed") {
showRedBoat();
} else if (cookie == "boatWhite") {
showWhiteBoat();
} else if (cookie == "boatBlue") {
showBlueBoat();
}
});
function showRedBoat() {
var newSrc = "";
var myText = "";
newSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/500458/copeland_boat_red.jpg";
myText = "<h3>You've got the Red Boat!</h3>";
theImage.src = newSrc;
theDesc.innerHTML = myText;
createCookie("boatColor", 'boatRed', 0.00034722222);
}
function showWhiteBoat() {
var newSrc = "";
var myText = "";
newSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/500458/copeland_boat_white.jpg";
myText = "<h3>You've got the White Boat!</h3>";
theImage.src = newSrc;
theDesc.innerHTML = myText;
createCookie("boatColor", 'boatWhite', 0.00034722222);
}
function showBlueBoat() {
var newSrc = "";
var myText = "";
newSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/500458/copeland_boat_blue.jpg";
myText = "<h3>You've got the Blue Boat!</h3>";
theImage.src = newSrc;
theDesc.innerHTML = myText;
createCookie("boatColor", 'boatBlue', 0.00034722222);
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
Codepen Link: https://codepen.io/nolaandy/pen/awgoQM
You could use new Date().getTime() % 3 to get a pseudo random number between 0 and 2. Then just use a switch statement to call one function or another.
My solution is to generate a random number if there is no cookie set, then run one of three functions based on that number:
$(document).ready(function() {
var cookie = readCookie("boatColor");
if (!cookie) {
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var randomNumber = getRandomInt(0,2);
if (randomNumber == 0) {
showRedBoat();
} else if (randomNumber == 1) {
showWhiteBoat();
} else if (randomNumber == 2) {
showBlueBoat();
}
} else if (cookie == "boatRed") {
showRedBoat();
} else if (cookie == "boatWhite") {
showWhiteBoat();
} else if (cookie == "boatBlue") {
showBlueBoat();
}
});
I'm trying to reload the page only when the cookie (userInfo) value includes pageCount=1.
This is my cookie value for userInfo:
lastBranchVisitedName=No branch set&mostRecentBranchId=&pageCount=4&lastPageUrl=/personal/life-health/over-50s-insurance/&allocatedBranchId=70&allocatedBranchTelephone=01993 894 700&allocatedBranchName=Motor Direct&locationLatitude=51.8969248&locationLongitude=-2.0758525999999997&lastPageDateTime=28/03/2017 14:37:26
What i am trying to achieve is that once the geoLocation is allowed, if the pageCount=1 then reload the page once. Currently the page is reloading regardless of what pageCount=.
Here is my current Javascript:
// Hide / show notification depending on cookie
window.onload = function () {
if (setCookieValue("geoPopUpCompleted") == undefined) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(setPosition);
} else {
alert("Unfortunately we're unable to find your location");
}
}
// Get page count
var pageCount = getCookie("pageCount");
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
function setPosition(position) {
setCookieValue("locationLongitude", position.coords.longitude);
setCookieValue("locationLatitude", position.coords.latitude);
setCookieValue("geoPopUpCompleted", true);
if (pageCount) {
(function () {
if (window.localStorage) {
if (!localStorage.getItem("firstLoad")) {
localStorage["firstLoad"] = true;
window.location.reload();
}
else
localStorage.removeItem("firstLoad");
}
})();
}
}
}
// GEO cookie settings
function setCookieValue(cookieName, cookieValue) {
var cookieExpireDate = "expires=Sun, 31 Dec 4017 12:00:00 UTC; path=/";
document.cookie = cookieName + "=" + cookieValue + "; " + cookieExpireDate;
}
Not looking for JQuery solutions.
Thanks for your help
The following code that worked for me... hope this helps someone else.
// Hide / show notification depending on cookie
window.onload = function () {
if (setCookieValue("geoPopUpCompleted") == undefined) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(setPosition);
} else {
alert("Unfortunately we're unable to find your location");
}
}
function setPosition(position) {
setCookieValue("locationLongitude", position.coords.longitude);
setCookieValue("locationLatitude", position.coords.latitude);
setCookieValue("geoPopUpCompleted", true);
// Get page count
var pageCount = getCookie("pageCount");
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=1");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
// Reload page once
if (pageCount) {
(function () {
if (window.localStorage) {
if (!localStorage.getItem("firstLoad")) {
localStorage["firstLoad"] = true;
window.location.reload();
}
else
localStorage.removeItem("firstLoad");
}
})();
}
}
}
// GEO cookie settings
function setCookieValue(cookieName, cookieValue) {
var cookieExpireDate = "expires=Sun, 31 Dec 4017 12:00:00 UTC; path=/";
document.cookie = cookieName + "=" + cookieValue + "; " + cookieExpireDate;
}
I'm using the following jQuery code for open my shop URL in a new tab windows when user click any part of page :
function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
function setCookie(c_name, value) {
var exdays = 1;
var exdate = new Date();
exdate.setHours(exdate.getHours() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
function checkCookie() {
var username1 = getCookie("tabligh1");
var username2 = getCookie("tabligh2");
var usernam = "sendshod";
if (username1 == null | username2 == null) {
window.open('#', '_parent', 'toolbar=1,location=1,directories=1,status=1,menubar=1?,scrollbars=1,resizable=1');
window.focus();
}
if (username1 == "" | username1 == null) {
if (window.open('http://shop.url')) {
window.focus();
setCookie("tabligh1", usernam);
}
}
}
// document.onclick = checkCookie;
jQuery(document).click(function (event) {
if (!jQuery(event.target).is('.hamyar_area, .hamyar_area *')) {
checkCookie();
}
})
if ((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined)) window.onload = checkCookie;
When user click in page , a # character add end of correct URL like this:
before click : domain.com
after click : domain.com/#
And when # character add to end of URL, page jumping to top of page.
I want to use this jquery code but I don't want when user click on the page, page don't jumping to the top.
I try to create my own collapsed sidebar, and I want to have the cookie saved for settings(collapsed or expanded bar). Here`s my code from to footer included file:
var cookieRightSideBar;
var $postscontainer;
var $container;
var $infocontainer;
cookieRightSideBar = document.cookie.replace(/(?:(?:^|.*;\s*)rightside_container\s*\=\s*([^;]*).*$)|^.*$/, "$1");
$postscontainer = document.getElementById('leftside');
$container = document.getElementById('rightside_container');
$infocontainer = document.getElementById('rightside');
function collapseRightside() {
document.cookie = (cookieRightSideBar == 'collapsed') ? 'rightside_container=expanded' : 'rightside_container=collapsed';
$postscontainer.style.width = ($postscontainer.style.width == '99%') ? '80%' : '99%';
$container.style.display = ($container.style.display == 'none') ? 'block' : 'none';
$infocontainer.style.width = ($infocontainer.style.width == '0%') ? '19%' : '0%';
}
if (document.getElementById('leftside')) {
var $myheight = document.getElementById ('leftside').offsetHeight - 62;
document.getElementById('rightside').style.maxHeight = $myheight + 'px';
}
if (cookieRightSideBar == 'expanded') {
$container.style.display = 'block';
$infocontainer.style.width = "19%";
$postscontainer.style.width = "80%";
}
Its almost worked, except couple sadly things.
Then after refresh a page, I click to button for expand my bar, looks like function collapseRightside not worked correctly after first click(bar collapsed if was expanded but not expanded if was collapsed). This function properly work with any stages only after second click.
And one more... If I collaps bar, and expand again and then refresh page, the bar appear collapsed.
I understarnd what I have mistakes in logical things, but I can`t understand where?
Thanks for any help!!!
This seems to fix your problem.
https://jsfiddle.net/L5unwnL9/5/
The problem was that you were checking for $container.style.display == 'none' while that value is null on page load. This fixed it on both container and infocontainer.
I've also added createCookie and getCookie functions just because it was easier to use for me.
var cookieRightSideBar;
var $postscontainer;
var $container;
var $infocontainer;
var e = document.getElementById('onclick');
e.onclick = collapseRightside;
cookieRightSideBar = getCookie("rightside_container")
$container = document.getElementById('rightside_container');
$infocontainer = document.getElementById('rightside');
function collapseRightside() {
cookieRightSideBar = (getCookie('rightside_container') == 'collapsed') ? 'expanded' : 'collapsed';
createCookie("rightside_container", cookieRightSideBar);
$container.style.display = (!$container.style.display || $container.style.display == 'none') ? 'block' : 'none';
$infocontainer.style.width = (!$infocontainer.style.width || $infocontainer.style.width == '0%') ? '19%' : '0%';
}
if (document.getElementById('leftside')) {
var $myheight = document.getElementById('leftside').offsetHeight - 62;
document.getElementById('rightside').style.maxHeight = $myheight + 'px';
}
if (cookieRightSideBar === 'expanded') {
$container.style.display = 'block';
$infocontainer.style.width = "19%";
}
function createCookie(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
} else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
I have never used cookies before, so I am using a peice of code I am very unfamiliar with.
It was working all fine, until I noticed just now that for select boxes, it is not working for any values after the tenth index. (for index 10 and above).
I have looked at the cookie stored on my system, and it appears t be saving them correctly. (I saw select10) ETC stored properly.
When it runs onload of body however, it is not loading in the values properly.
Here is the cookie code I am using:
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var expDays = 100;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1) { endstr = document.cookie.length; }
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg) return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
// use the following code to call it:
// <body onLoad="cookieForms('open', 'form_1', 'form_2', 'form_n')" onUnLoad="cookieForms('save', 'form_1', 'form_2', 'form_n')">
function cookieForms() {
var mode = cookieForms.arguments[0];
for(f=1; f<cookieForms.arguments.length; f++) {
formName = cookieForms.arguments[f];
if(mode == 'open') {
cookieValue = GetCookie('saved_'+formName);
if(cookieValue != null) {
var cookieArray = cookieValue.split('#cf#');
if(cookieArray.length == document[formName].elements.length) {
for(i=0; i<document[formName].elements.length; i++) {
if(cookieArray[i].substring(0,6) == 'select') { document[formName].elements[i].options.selectedIndex = cookieArray[i].substring(7, cookieArray[i].length-1); }
else if((cookieArray[i] == 'cbtrue') || (cookieArray[i] == 'rbtrue')) { document[formName].elements[i].checked = true; }
else if((cookieArray[i] == 'cbfalse') || (cookieArray[i] == 'rbfalse')) { document[formName].elements[i].checked = false; }
else { document[formName].elements[i].value = (cookieArray[i]) ? cookieArray[i] : ''; }
}
}
}
}
if(mode == 'save') {
cookieValue = '';
for(i=0; i<document[formName].elements.length; i++) {
fieldType = document[formName].elements[i].type;
if(fieldType == 'password') { passValue = ''; }
else if(fieldType == 'checkbox') { passValue = 'cb'+document[formName].elements[i].checked; }
else if(fieldType == 'radio') { passValue = 'rb'+document[formName].elements[i].checked; }
else if(fieldType == 'select-one') { passValue = 'select'+document[formName].elements[i].options.selectedIndex; }
else { passValue = document[formName].elements[i].value; }
cookieValue = cookieValue + passValue + '#cf#';
}
cookieValue = cookieValue.substring(0, cookieValue.length-4); // Remove last delimiter
SetCookie('saved_'+formName, cookieValue, exp);
}
}
}
// End -->
</script>
I beleive the problem lies with the following line, found about 3/4 of the way down the code block above (line 68):
if(cookieArray[i].substring(0,6) == 'select') { document[formName].elements[i].options.selectedIndex = cookieArray[i].substring(7, cookieArray[i].length-1); }
Just for reference, here is the opening body tag I am using:
<body style="text-align:center;" onload="cookieForms('open', 'ramsform', 'decksform', 'hullsform', 'crewform', 'shipwrightform'); Swap(crew0z,'crew0i'); Swap(crew1z,'crew1i'); Swap(crew2z,'crew2i'); Swap(crew3z,'crew3i'); Swap(crew4z,'crew4i'); Swap(crew5z,'crew5i'); Swap(crew6z,'crew6i'); Swap(crew7z,'crew7i'); Swap(crew8z,'crew8i'); Swap(crew9z,'crew9i');" onunload="cookieForms('save', 'ramsform', 'decksform', 'hullsform', 'crewform', 'shipwrightform');">
(Please ignore the swap()'s as they are unrelated)
Page I am working on can be found: http://webhostlet.com/POP.htm
In both the open and save codes, change:
document[formName].elements[i].options.selectedIndex
to:
document[formName].elements[i].selectedIndex
options is an array of all the options, the selectedIndex property belongs to the select element that contains them.
Change:
cookieArray[i].substring(7, cookieArray[i].length-1)
to:
cookieArray[i].substring(6)
You were off by 1 because you forgot that it's 0-based counting. The second argument isn't needed, it defaults to the rest of the string.
The reason it worked for the first 10 menu items is a quirk of substring: if the second argument is lower than the first, it swaps them! So "select5".substring(7, 6) is treated as "select5".substring(6, 7), which gets the last character of the string. But for the longer strings, it was `"select35".substring(7, 7), which is an empty string.