function displayPreview(files) {
var reader = new FileReader();
var img = new Image();
reader.onload = function (e) {
img.src = e.target.result;
fileSize = Math.round(files.size / 1024);
if(fileSize>50) {
ret1=false;
alert("File size is " + fileSize + " kb");
return ret1;
} else {
var ret1 = true;
return ret1;
}
img.onload = function () {
if(this.width!="181" && this.height!="181") {
ret1=false;
alert("width=" + this.width + " height=" + this.height);
return ret1;
} else {
var ret1 = true;
return ret1;
}
console.log("width=" + this.width + " height=" + this.height+"File size is " + fileSize + " kb");
};
};
reader.readAsDataURL(files);
}
function chkform() {
var ret = false;
if (document.getElementById("file").value === "") {
console.log("empty");
} else {
var file = document.getElementById("file").files[0];
var tt=displayPreview(file);
console.log(tt+"nis");
}
return ret;
}
When a user clicks on the submit button, the form has an onsubmit="return chkform();", then my checkform checks if the id name file is empty or not.
If not, then it call the function displayPreview(). In that function I am checking whether the size is not more than 50 and width and height is not equal to width="181px" and height="181px".
I am returning ret through which I can get the information it's returning true or false
but In my checkform I am getting UNDEFINED... why?
Edit
Added reproduction code at JSFIddle: http://jsfiddle.net/nishit_bhardwaj/zaukV/
Sorry I didn't work with your code but this is how you can get the filesize. After that it's easy to validate. You also could disable or hide the submit/upload-button if the filesize is incorrect:
http://jsfiddle.net/rq8nA/
JS:
$("input:file").change(function () {
if ($(this).val() !== "") {
var file = $('#file_select')[0].files[0];
console.log(file.size);
}
});
HTML:
<input type="file" name="file" id="file_select" />
I added something to get width and preview image too:
http://jsfiddle.net/rq8nA/1/
Related
As of now, I can successfully upload an image and display it in the browser and display that it has 0 likes initially.
What I'm trying to achieve is that when the user double clicks on the image, the 0 likes should become 1 likes (I know it's not grammatically correct, I just want it to function properly first before moving onto that issue).
If you look at the console logs, it indeed shows the like number switching back and forth with every double click, which's good. The bad part is I'm not sure how to display that change in the browser.
I've tried so many different ways but running out of options. What am I doing wrong and how can I fix this?
JS file:
function previewImages() {
var preview = document.createElement('div');
preview.className = "preview";
document.body.appendChild(preview);
if (this.files) {
[].forEach.call(this.files, readAndPreview);
}
function readAndPreview(file) {
// Make sure `file.name` matches our extensions criteria
if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
return alert(file.name + " is not an image");
} // else...
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
var initialCountOfLikes = 0;
var zeroLikes = document.createElement('p');
var zeroLikesTextNode = document.createTextNode(initialCountOfLikes + " likes");
document.body.appendChild(zeroLikes.appendChild(zeroLikesTextNode));
preview.appendChild(image);
image.onclick = function (event) {
if (event.detail === 2 && initialCountOfLikes === 0) {
console.log("clicked twice");
initialCountOfLikes++;
console.log("initialCountOfLikes++ => " + initialCountOfLikes);
}
else if(event.detail === 2 && initialCountOfLikes === 1) {
console.log("inside second if block");
initialCountOfLikes--;
console.log("initialCountOfLikes-- => " + initialCountOfLikes);
}
document.body.appendChild(zeroLikes.appendChild(zeroLikesTextNode));
};
});
reader.readAsDataURL(file);
}
}
document.querySelector('#file-input').addEventListener("change", previewImages);
Here's my HTML:
<div id="file-input-wrapper">
<input type="file" id="file-input" name="files" style="display: none;"/>
<label for="file-input" id="LblBrowse">
Upload your photo!
</label>
</div>
console logs:
clicked twice
index.js:126 initialCountOfLikes++ => 1
index.js:130 inside second if block
index.js:132 initialCountOfLikes-- => 0
index.js:124 clicked twice
index.js:126 initialCountOfLikes++ => 1
index.js:130 inside second if block
index.js:132 initialCountOfLikes-- => 0
This works. Your event.detail is registering as one, so I changed your listener to a dblClick event and removed that from the if statement. And nodes use nodeValue instead of innerText, so corrected in solution.
window.onload = function(){
function previewImages() {
var preview = document.createElement('div');
preview.className = "preview";
document.body.appendChild(preview);
if (this.files) {
[].forEach.call(this.files, readAndPreview);
}
function readAndPreview(file) {
// Make sure `file.name` matches our extensions criteria
if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
return alert(file.name + " is not an image");
} // else...
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
var initialCountOfLikes = 0;
var zeroLikes = document.createElement('p');
var zeroLikesTextNode = document.createTextNode(initialCountOfLikes + " likes");
document.body.appendChild(zeroLikes.appendChild(zeroLikesTextNode));
preview.appendChild(image);
image.ondblclick = function (event) {
if (initialCountOfLikes === 0) {
console.log("clicked twice");
initialCountOfLikes++;
console.log("initialCountOfLikes++ => " + initialCountOfLikes);
}
else if(initialCountOfLikes === 1) {
console.log("inside second if block");
initialCountOfLikes--;
console.log("initialCountOfLikes-- => " + initialCountOfLikes);
}
zeroLikesTextNode.nodeValue = initialCountOfLikes + " likes";
document.body.appendChild(zeroLikes.appendChild(zeroLikesTextNode));
};
});
reader.readAsDataURL(file);
}
}
document.querySelector('#file-input').addEventListener("change", previewImages);
}
You can start a timer, and measure the time between clicks, when the image is clicked. If the time between clicks is less than some number, then you can increase your count.
Something like the following:
firstClick = true;
let timer = new Date().getMilliseconds();
let someValue; // set this
image.onclick = function (event) {
let currentTime = new Date().getMilliseconds();
if(firstClick){
timer = new Date().getMilliseconds();
}
let difference = currentTime - timer;
if(difference >= someValue && !firstClick){
return;
}
firstClick = !firstClick;
timer = new Date().getMilliseconds();
if (event.detail === 2 && initialCountOfLikes === 0 && !firstClick) {
console.log("clicked twice");
initialCountOfLikes++;
console.log("initialCountOfLikes++ => " + initialCountOfLikes);
}
}
You can do something similar to what I'm doing below where you use a module to increment a private counter. The comments should be enough to explain what exactly is going on in the code:
//Load the existing number of likes from the server (im just using 5 as example)
const initialLikes = 5;
//Initialize a "like" counter
const likes = ((quantity) => {
//This is the count
let i = quantity;
//We return a module that allows us to increment the count or get the current count
return {
increment: () => i += 1,
quantity: () => i
}
})(initialLikes || 0);
//Store DOM elements we're accessing in variables
const captionEl = document.querySelector('#countEl');
const imgEl = document.querySelector('#puppyImg');
//Our double click handler:
const onDblClick = e => {
//Increment the count via our module, then update the count text
likes.increment();
captionEl.textContent = likes.quantity();
}
const init = () => {
//Set the initial count text on screen
captionEl.textContent = likes.quantity();
//Attach the event handler to the img
imgEl.addEventListener('dblclick', onDblClick);
};
init();
img:hover {
cursor: pointer;
}
<img id="puppyImg" src="https://s.abcnews.com/images/Lifestyle/puppy-ht-3-er-170907_4x3_992.jpg" height="160" width="190" alt="Cute puppy photo" />
<br /> Likes: <span id="countEl"></span>
I'm working with image preview before upload.
So I'm displaying the choosen files. It's working well.
But I'm stuck in a situation.
Foreach file on the "input file", the scripts tests if it's too small (smaller than 300px w:h).
If one of these files disobey this rule (must be width and height greater than 300px), the script has set an error var as true. And, after the "for" block, check if "error" is true or false.
I'm working in this scenario:
window.onload = function () {
var fileUpload2 = document.getElementById("inputFileID");
fileUpload2.onchange = function () {
var error = false;
if (typeof (FileReader) != "undefined") {
var dvPreview = document.getElementById("divToShowPreview");
dvPreview.innerHTML = "";
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if(fileUpload2.files.length > 3) {
alert('Only 3 files allowed!');
} else {
for (var i = 0; i < fileUpload2.files.length; i++) {
var file = fileUpload2.files[i];
if (regex.test(file.name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
var img = document.createElement("IMG");
img.src = e.target.result;
img.onload = function() {
console.log(this.width + " " + this.height);
if(this.width >=300 && this.height >=300 ) {
dvPreview.appendChild(img);
} else {
error = true;
}
};
};
reader.readAsDataURL(file);
} else {
alert(file.name + " is not a valid image file.");
dvPreview.innerHTML = "";
return false;
}
}
console.log(error);
}
} else {
alert("This browser does not support HTML5 FileReader.");
}
};
};
As you can see, the console.log(error) still shows FALSE!
How can I get this var set as true?
Thanks
the problem is that the img.onload functions is asynchronously executed. therefore console.log(error) is executed before or between the img.onload
this can be proven by looking at the sequence of your console.log, that look something like:
false
300 300
200 300
to solve this problem, create a variable to count how many images have been load, then count it in every img.onload. when the count of image that has been load is equal to the uploaded image count, call a function to check if error exists. for example:
function imageError(){
alert('image size to small');
}
window.onload = function () {
var fileUpload2 = document.getElementById("inputFileID");
// add variables
var imgLoaded = 0;
fileUpload2.onchange = function () {
var error = false;
if (typeof (FileReader) != "undefined") {
var dvPreview = document.getElementById("divToShowPreview");
dvPreview.innerHTML = "";
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if(fileUpload2.files.length > 3) {
alert('Only 3 files allowed!');
} else {
for (var i = 0; i < fileUpload2.files.length; i++) {
var file = fileUpload2.files[i];
if (regex.test(file.name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
var img = document.createElement("IMG");
img.src = e.target.result;
img.onload = function() {
//increase the loaded img count
imgLoaded++;
console.log(imgLoaded); // another check to show the sequence of events
console.log(this.width + " " + this.height);
if(this.width >=300 && this.height >=300 ) {
dvPreview.appendChild(img);
} else {
error = true;
}
// call imageError if all image have been loaded and there is and error
if (imgLoaded == fileUpload2.files.length){
console.log(error) // just to check
if (error){
imageError();
}
}
};
};
reader.readAsDataURL(file);
} else {
alert(file.name + " is not a valid image file.");
dvPreview.innerHTML = "";
return false;
}
}
//console.log(error); // no need for this line
}
} else {
alert("This browser does not support HTML5 FileReader.");
}
};
};
You have to break your for when you find a error, so it will not perform the next verification.
...
} else {
error = true;
break;
}
...
function loadAll() {
var zip64;
var zipURL = 'settings/Images.zip';
var xhr = new XMLHttpRequest();
xhr.open('GET', zipURL, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
if (this.status == 200) {
var responseArray = new Uint8Array(this.response);
var d = responseArray.length;
var binaryString = new Array(d);
while (d--) {
binaryString[d] = String.fromCharCode(responseArray[d]);
}
var data = binaryString.join("");
zip64 = window.btoa(data);
zip.createReader(new zip.Data64URIReader(zip64), function(reader) {
reader.getEntries(function(entries) {
z = 0;
zloopid = setInterval(function() {
if (z >= entries.length || !entries[z]) {
clearInterval(zloopid);
reader.close();
start();
return;
}
if (entries[z].filename.split("/")[0] == "__MACOSX") {
z++;
return;
}
$("#loadimg").html("Loading " + entries[z].filename + ".... (" + (z + 1) + " of " + entries.length + ")");
var isMask = (entries[z].filename.replace(/^.*[\\\/]/, '') == "mask.jpg");
entries[z].getData(new zip.Data64URIWriter(), function(uri) {
if (isMask) {
imgtemp = new Image();
imgtemp.src = uri;
}
else {
var lol = new Image();
lol.src = uri;
imageLibrary.push(lol);
}
});
z++;
}, 0);
});
}, function(error) {
window.location = "error.html?err=Error by unzipper: " + error + " (Problem in Images.zip)";
});
}
else {
window.location = "error.html?err=Error while retrieving zip file (" + zipURL + ") : " + this.status;
}
};
xhr.send();
}
function start() {
var image = imgtemp;
width = image.width;
height = image.height;
So I have this piece of code. I have a global variable named imgtemp but everytime I set it in the if (inMask) block, it reverts to undefined when start() is called. Why is this?
loadAll() is called first, then start(). I can confirm that when the code that calls start() in loadAll() executes, imgtemp already turned back to undefined.
Thanks in advance!
It is because loadAll becomes async and returns before anything is loaded so when you call start the image has not been set yet. You'll need to "chain" them instead of calling them separately.
Only call loadAll() and then inside the loadAll add an event handler for loading the image which when loaded calls the start() function.
/* snip */
entries[z].getData(new zip.Data64URIWriter(), function(uri) {
if (isMask) {
imgtemp = new Image();
imgtemp.onload = function(event) {
start(); /* <--- HERE */
}
imgtemp.src = uri;
}
else {
/* snip */
I want to upload the video on youtube. Problem statement is that user drag and drop the video on my application and when user click on the upload button video is uploaded to the youtube.
I have written this code
$('#drop-files').bind('drop', function(e) {
rc = count;
var files = e.dataTransfer.files;
//alert("files -"+files[0].path);
count += files.length;
$('#uploaded-holder').show();
$.each(files, function(index, file) {
console.log("aaaa : "+file);
//alert("sarthi : "+file.name);
if (!(files[index].type.match('image.*') || files[index].type.match('pdf.*') || files[index].type.match('video.*'))) {
alert("ONLY IMAEG AND VIDEO")
callModel();
} else {
// Start a new instance of FileReader*/
var fileReader = new FileReader();
var obj = {};
// When the filereader loads initiate a function
//alert("file "+file);
fileReader.onload = (function(file) {
var isVideo = 1;
return function(e) {
// Push the data URI into an array
dataArray.push({
name : file.name,
value : this.result
});
// Move each image 40 more pixels across
//z = z+40;
var image;
var video;
if(file.type.match('image.*'))
image = this.result;
else if(file.type.match('pdf.*'))
image = "assets/img/pdf.png";
else if(file.type.match('video.*')){
video = this.result;
}
// Just some grammatical adjustments
/*if(dataArray.length == 1) {
$('#upload-button span').html("1 file to be uploaded");
} else {
$('#upload-button span').html(dataArray.length+" files to be uploaded");
}*/
if(file.type.match('image.*')) {
//alert("1");
var html = tmpl(template, {
image:image,
loadingbar:"loadingbar"+rc,
loadper:"loadper"+rc,
type:"type"+rc,
dd:"dd"+rc,
ed:"ed"+rc,
grey:"greey"+rc,
upbtn: "upbtn"+rc,
dderrorid: "dderr"+rc,
ederrorid: "ederr"+rc
});
obj = {
htmlstring:html,
type:"type"+rc,
dd:"dd"+rc,
ed:"ed"+rc,
upbtn: "upbtn"+rc,
loadbar: "loadingbar"+rc,
loadper:"loadper"+rc,
grey:"greey"+rc,
file:file,
flag:0,
dderrorid: "dderr"+rc,
ederrorid: "ederr"+rc
}
$('#dropped-files').append(html);
var now = new Date();
var today = (now.getMonth() + 1) + '-' + now.getDate() + '-' + now.getFullYear();
$('#'+obj.ed).val(today);
uploadObject[rc] = obj;
$("#"+obj.upbtn).click(function(e){
if(!($("#uid").val() == "")){
$('.error').hide();
if(!($("#"+obj.dd).val() == "")){
$('#'+obj.dderrorid + " span").hide();
if(!($("#"+obj.ed).val() == "")){
$('#'+obj.ederrorid + " span").hide();
upload(e);
} else {
$('#'+obj.ederrorid + " span").show();
}
} else {
$('#'+obj.dderrorid + " span").show();
}
} else {
$('.error').show();
}
});
$("#"+obj.grey).click(function(e){
removeFiles(e);
});
rc++;
}
else{
if($('#dropped-files > .video').length < maxFiles) {
//alert("2");
var html1 = tmpl(vtemplate, {
video:video,
loadingbar:"loadingbar"+rc,
loadper:"loadper"+rc,
type:"type"+rc,
dd:"dd"+rc,
ed:"ed"+rc,
grey:"greey"+rc,
upbtn: "upbtn"+rc,
dderrorid: "dderr"+rc,
ederrorid: "ederr"+rc
});
obj = {
htmlstring:html1,
type:"type"+rc,
dd:"dd"+rc,
ed:"ed"+rc,
upbtn: "upbtn"+rc,
loadbar: "loadingbar"+rc,
loadper:"loadper"+rc,
grey:"greey"+rc,
file:file,
flag:0,
dderrorid: "dderr"+rc,
ederrorid: "ederr"+rc
}
//$('#dropped-files').append(html1);
now = new Date();
today = (now.getMonth() + 1) + '-' + now.getDate() + '-' + now.getFullYear();
$('#'+obj.ed).val(today);
uploadObject[rc] = obj;
$("#"+obj.upbtn).click(function(e){
if(!($("#uid").val() == "")){
$('.error').hide();
if(!($("#"+obj.dd).val() == "")){
$('#'+obj.dderrorid + " span").hide();
if(!($("#"+obj.ed).val() == "")){
$('#'+obj.ederrorid + " span").hide();
$("input[type='file']")
.prop("files", e.originalEvent.dataTransfer.files) // put files into element
.closest("form")
.submit();
} else {
$('#'+obj.ederrorid + " span").show();
}
} else {
$('#'+obj.dderrorid + " span").show();
}
} else {
$('.error').show();
}
});
$("#"+obj.grey).click(function(e){
removeFiles(e);
});
rc++;
}
$('#dropped-files').append(html1);
}
};
})(files[index]);
fileReader.readAsDataURL(file);
}
});
});
I am not able to get the absolute path of file dropped on my application.
Thanks in advance !
You can not access clients (local address) at serverside. This may help you!
Passing path to uploaded file from HTML5 drag & drop to input field
and
http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html
I'm working with MarkDownDeep. It has a similar "insert image" function like SO does.
I'd like to extend this function to use a bootstrap modal that would allow the user to upload their own images or at least get a typeahead working so that a user could pick something uploaded from another page.
I've tried to use a callback function in replace of the the prompt below but it doesn't insert str into the textbox like the original function.
pub.cmd_img = function (ctx) {
ctx.TrimSelection();
if (!ctx.CheckSimpleSelection())
return false;
imagePopUp(function(results) {
$("#" + ctx.m_textarea.id).focus();
var url = results;
if (url === null)
return false;
var alttext = ctx.getSelectedText();
if (alttext.length == 0) {
alttext = "Image Text";
}
var str = "![" + alttext + "](" + url + ")";
ctx.ReplaceSelection(str);
ctx.m_selectionStart += 2;
ctx.m_selectionEnd = ctx.m_selectionStart + alttext.length;
return true;
});
return false;
uploadImageUrl is a holding variable because at the moment I'm using an iframe inside the modal so the user can upload, the iframe then sets parent.uploadImageUrl
uploadImageUrl = "baz";
function imagePopUp(callback) {
$('#imageUpload').modal('show');
$('#confirmTrue').click(function () {
$('#imageUpload').modal('hide');
if (callback) callback(uploadImageUrl);
});
}
Original
pub.cmd_img = function (ctx) {
ctx.TrimSelection();
if (!ctx.CheckSimpleSelection())
return false;
var url = prompt("Enter the image URL"); //need to change what this does
if (url === null)
return false;
var alttext = ctx.getSelectedText();
if (alttext.length == 0) {
alttext = "Image Text";
}
var str = "![" + alttext + "](" + url + ")";
ctx.ReplaceSelection(str);
ctx.m_selectionStart += 2;
ctx.m_selectionEnd = ctx.m_selectionStart + alttext.length;
return true;
};
You can see my none-working fiddle
This should do the trick:
pub.cmd_img = function(ctx){
ctx.TrimSelection();
if (!ctx.CheckSimpleSelection())
return false;
//call popup
imagePopUp(function(results){
$("#" + ctx.m_textarea.id).focus();
var url = results;
if (url === null)
return false;
var alttext = ctx.getSelectedText();
if (alttext.length == 0){
alttext = "Image Text";
}
var str = "![" + alttext + "](" + url + ")";
var editor = $(ctx.m_textarea).data("mdd");
editor.cmd_img_core = function(state){
state.ReplaceSelection(str);
state.m_selectionStart += 2;
state.m_selectionEnd = state.m_selectionStart + alttext.length;
return true;
};
editor.InvokeCommand("img_core");
delete editor.cmd_img_core;
});
return false;
};
I had some issues with this code, in that when I tried to insert a second image into the editor it would insert the URL twice, and the third image three times and so on. It seemed to be running the imagePopup callback the same number of times as the number of images inserted. I resolved the issue with the following changes. Not perfect but it works:
var isImageInserted = false;
pub.cmd_img = function (ctx) {
ctx.TrimSelection();
if (!ctx.CheckSimpleSelection())
return false;
isImageInserted = false;
//call popup
imagePopUp(function (results) {
$("#" + ctx.m_textarea.id).focus();
var url = results;
if (url === null)
return false;
var alttext = ctx.getSelectedText();
if (alttext.length == 0) {
alttext = "Image Text";
}
var str = "";
if (!alttext.indexOf(url) > -1) {
str = "![" + alttext + "](" + url + ")";
} else {
str = alttext;
}
var editor = $(ctx.m_textarea).data("mdd");
if (!isImageInserted) {
editor.cmd_img_core = function (state) {
state.ReplaceSelection(str);
state.m_selectionStart += 2;
state.m_selectionEnd = state.m_selectionStart + alttext.length;
isImageInserted = true;
return true;
};
editor.InvokeCommand("img_core");
delete editor.cmd_img_core;
}
});
return false;
}
hope this helps someone else as pretty much every markdowndeep search seems to come here.