We Keep Coding

Multiple videos upload repeatedly - JavaScript / jQuery

I created a upload for multiples videos, and I'm showing in a thumbnail.
It's working ok until here, the problem is, I select for example 3 videos differently, but when loading my preview for all videos are the same.
HTML:
<div id="thumbnail"></div>
<input type="file" id="upload-file" accept="video/*" multiple/>
JavaScript:
$('div').on('click', '.closeDiv', function () {
$(this).prev().remove();
$(this).remove();
$('#upload-file').val("");
});
var fileDiv = document.getElementById("upload");
var fileInput = document.getElementById("upload-file");
fileInput.addEventListener("change", function (e) {
var filesVAR = this.files;
showThumbnail(filesVAR);
}, false);
function showThumbnail(files) {
debugger
for (var i = 0; i < files.length; i++) {
var file = files[i];
var thumbnail = document.getElementById("thumbnail");
var pDiv = document.createElement("div");
var video = document.createElement("video");
var div = document.createElement("div");
pDiv.setAttribute('class', 'pDiv');
thumbnail.appendChild(pDiv);
video.setAttribute('class', 'imgKLIK5');
pDiv.appendChild(video)
div.innerHTML = "Excluir";
div.setAttribute('class', 'closeDiv');
pDiv.appendChild(div)
video.file = file;
var reader = new FileReader()
reader.onload = (function (aImg) {
return function (e) {
var blobURL = URL.createObjectURL(file);
aImg.src = blobURL;
aImg.setAttribute("controls", "")
};
}(video))
var ret = reader.readAsDataURL(file);
var canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
video.onload = function () {
ctx.drawImage(video, 100, 100);
}
}
}
Check the image results (I selected 3 videos):
But the results:

just need to change the vars to lets and it works fine
$('div').on('click', '.closeDiv', function() {
$(this).prev().remove();
$(this).remove();
$('#upload-file').val("");
});
let fileDiv = document.getElementById("upload");
let fileInput = document.getElementById("upload-file");
fileInput.addEventListener("change", function(e) {
let filesVAR = this.files;
showThumbnail(filesVAR);
}, false);
function showThumbnail(files) {
debugger
for (let i = 0; i < files.length; i++) {
let file = files[i];
let thumbnail = document.getElementById("thumbnail");
let pDiv = document.createElement("div");
let video = document.createElement("video");
let div = document.createElement("div");
pDiv.setAttribute('class', 'pDiv');
thumbnail.appendChild(pDiv);
video.setAttribute('class', 'imgKLIK5');
pDiv.appendChild(video)
div.innerHTML = "Excluir";
div.setAttribute('class', 'closeDiv');
pDiv.appendChild(div)
video.file = file;
let reader = new FileReader()
reader.onload = (function(aImg) {
return function(e) {
let blobURL = URL.createObjectURL(file);
aImg.src = blobURL;
aImg.setAttribute("controls", "")
};
}(video))
let ret = reader.readAsDataURL(file);
let canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
video.onload = function() {
ctx.drawImage(video, 100, 100);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumbnail"></div>
<input type="file" id="upload-file" accept="video/*" multiple/>
I hope this helps

Preview PDF/Image file before upload

Is there anyway where pdf/image file can auto preview/shown in iframe before uploading without need click on preview button?
function PreviewImage() {
pdffile=document.getElementById("uploadPDF").files[0];
pdffile_url=URL.createObjectURL(pdffile);
$('#viewer').attr('src',pdffile_url);
}
<form name=f1 method=post enctype="multipart/form-data">
<input id="uploadPDF" type="file" name="file"/>
<input type="button" value="Preview" onclick="PreviewImage();" />
<div style="clear:both">
<iframe id="viewer" frameborder="0" scrolling="no" width="300" height="200"></iframe>
</div>
<button type="submit" name="submit" class="btn btn-success btn-sm">
<i class="fa fa-dot-circle-o"></i> Add
</button> 
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

You have an input, check the onChange and then make a
src= URL.createObjectURL(event.target.files[0])
to create URL: and then use it to preview with embed
<embed
src=src
width="250"
height="200">
Read more here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed

you can use javascript pdf library like this one (i'm using pdf.js) from this link :
https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
$("#myPdf").on("change", function(e){
var file = e.target.files[0]
if(file.type == "application/pdf"){
var fileReader = new FileReader();
fileReader.onload = function() {
var pdfData = new Uint8Array(this.result);
// Using DocumentInitParameters object to load binary data.
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
// Fetch the first page
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded');
var scale = 1.5;
var viewport = page.getViewport({scale: scale});
// Prepare canvas using PDF page dimensions
var canvas = $("#pdfViewer")[0];
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});
};
fileReader.readAsArrayBuffer(file);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<input type="file" id="myPdf" /><br>
<canvas id="pdfViewer"></canvas>

How to preview PDF ,excel and Image before upload in pop window.
I have done something for me issue its working fine for me . also have added the blank pop once you are going to choose next file.
I have created for MVC .
JavaScript:
<script type="text/javascript" src="https://unpkg.com/xlsx#0.15.1/dist/xlsx.full.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
// tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
$("#Document").on("change", function (e)
{
$("#dialog").dialog({
width: 700,
height: 500,
dialogClass: "dialog-full-mode" /*must to add this class name*/
});
var file = e.target.files[0]
if (file.type == "application/pdf")
{
var fileReader = new FileReader();
fileReader.onload = function () {
var pdfData = new Uint8Array(this.result);
// Using DocumentInitParameters object to load binary data.
var loadingTask = pdfjsLib.getDocument({ data: pdfData });
loadingTask.promise.then(function (pdf) {
console.log('PDF loaded');
// Fetch the first page
var pageNumber = 1;
pdf.getPage(pageNumber).then(function (page) {
console.log('Page loaded');
var scale = 1.5;
var viewport = page.getViewport({ scale: scale });
// Prepare canvas using PDF page dimensions
var canvas = $("#pdfViewer")[0];
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});
};
fileReader.readAsArrayBuffer(file);
}
//$('#excel_data').empty("");
if (file.type == "image/jpeg")
{
debugger
document.getElementById("img1").style.display = "block";
var reader = new FileReader();
reader.onload = function () {
var output = document.getElementById('img1');
output.src = reader.result;
};
reader.readAsDataURL(e.target.files[0]);
// $('#img1').attr("src", "");
}
if (file.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")
{
var reader = new FileReader();
reader.readAsArrayBuffer(e.target.files[0]);
reader.onload = function (e) {
var data = new Uint8Array(reader.result);
var work_book = XLSX.read(data, { type: 'array' });
var sheet_name = work_book.SheetNames;
var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], { header: 1 });
if (sheet_data.length > 0) {
var table_output = '<table class="table table-striped table-bordered">';
for (var row = 0; row < sheet_data.length; row++) {
table_output += '<tr>';
for (var cell = 0; cell < sheet_data[row].length; cell++) {
if (row == 0) {
table_output += '<th>' + sheet_data[row][cell] + '</th>';
}
else {
table_output += '<td>' + sheet_data[row][cell] + '</td>';
}
}
table_output += '</tr>';
}
table_output += '</table>';
document.getElementById('excel_data').innerHTML = table_output;
}
}
}
});
</script>
#Html.LabelFor(model => model.Document, htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-9">
#Html.EditorFor(model => model.Document, new { htmlAttributes = new {type="file",accept=".xlsx,.xls,image/*,.pdf", #class = "form-control" } })
#Html.ValidationMessageFor(m => m.Document, "", new { #class = "text-danger" })
<div id="dialog" style="display: none; width:auto; ">
<img src="" id="img1" class="img1" style="display:none;"><br>
<div id="excel_data" class="mt-5" ></div>
<canvas id="pdfViewer" ></canvas>
</div>

Iframe Dom error :cannot read property "src" of null

I putted my editor.html in a iframe using this code :
<iframe name= "iframeEditor" id="ifrm" src="editor.html" width="1000" height="500" frameborder="0"></iframe>
then, i have to access to an element in a script balise in my "editor.html" :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Diagram</title>
<script type="text/javascript" src="lib/jquery-1.8.1.js"></script>
<!-- I use many resources -->
<script>
function generatePNG (oViewer) {
var oImageOptions = {
includeDecoratorLayers: false,
replaceImageURL: true
};
var sResult = oViewer.generateImageBlob(function(sBlob) {
b = 64;
var reader = new window.FileReader();
reader.readAsDataURL(sBlob);
reader.onloadend = function() {
base64data = reader.result;
var image = document.createElement('img');
image.setAttribute("id", "GraphImage");
image.src = base64data;
document.body.appendChild(image);
}
}, "image/png", oImageOptions);
return sResult;
}
</script>
</head>
<body >
<div id="diagramContainer"></div>
</body>
</html>
I should access to image.src from the iframe that contain my editor.htm so i try with this code :
<script>
var if1 = document.getElementById("ifrm");
var fc = (if1.contentWindow || if1.contentDocument);
var img1 = fc.document.getElementById("GraphImage");
console.log(img1.src);
</script>
but i get an error : cannot read property "src" of null

You are running script that looks for image element before image is loaded, so it's not yet added to DOM.
move your script to separate function:
function yourScript() {
var if1 = document.getElementById("ifrm");
var fc = (if1.contentWindow || if1.contentDocument);
var img1 = fc.document.getElementById("GraphImage");
console.log(img1.src);
}
and run it at the end of onloadend callback:
function generatePNG (oViewer) {
var oImageOptions = {
includeDecoratorLayers: false,
replaceImageURL: true
};
var sResult = oViewer.generateImageBlob(function(sBlob) {
b = 64;
var reader = new window.FileReader();
reader.readAsDataURL(sBlob);
reader.onloadend = function() {
base64data = reader.result;
var image = document.createElement('img');
image.setAttribute("id", "GraphImage");
image.src = base64data;
document.body.appendChild(image);
yourScript(); // your script is run after appending image to body
}
}, "image/png", oImageOptions);
return sResult;
}

While JavaScript File Reader With Pushing Data to Global Array

I have posted code below and trying to upload text files:
Problem is to store data in JavaScript array, ifileData always returns blank/null values.
<input type="file" name="ic-files[]" class="ic-input" multiple="true" />
<input type="file" name="ic-files[]" class="ic-input" multiple="true" />
<input type="file" name="ic-files[]" class="ic-input" multiple="true" />
<input type="file" name="ic-files[]" class="ic-input" multiple="true" />
<script>
var ifileData = new Array();
$(document).on('click','#start', function()
{
$('.ic-input').each(function()
{
if($(this).val() != "")
{
var inCorrectFile = $(this).get(0).files;
for (var i = 0; i < inCorrectFile.length; i++)
{
var reader = new FileReader();
reader.onload = function(e)
{
/* Temp Object */
var ipfileData = {};
var fileContent = this.result;
ipfileData['data'] = fileContent;
ifileData.push(ipfileData);
}
reader.readAsText(inCorrectFile[i], "UTF-8");
}
}
});
alert(JSON.stringify(ifileData));
});
</script>
also i've posted code to https://jsfiddle.net/3aexs7wp/3/

Try substituting change event for click event ; adjusting delegated selector to .ic-input
var ifileData = new Array();
$(document).on('change', '.ic-input', function() {
$('.ic-input').each(function() {
if ($(this).val() != "") {
var inCorrectFile = $(this).get(0).files;
for (var i = 0; i < inCorrectFile.length; i++) {
var reader = new FileReader();
reader.onload = function(e) {
/* Temp Object */
var ipfileData = {};
var fileContent = this.result;
ipfileData['data'] = fileContent;
ifileData.push(ipfileData);
console.log(ifileData)
}
reader.readAsText(inCorrectFile[i], "UTF-8");
}
}
});
// alert(JSON.stringify(ifileData));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="file" name="ic-files[]" class="ic-input" multiple="true" />
jsfiddle https://jsfiddle.net/3aexs7wp/4/

How to get the Actual image width and height after drop event

I have been working on the following paradigm, in order to learn "how to drag an image from my desktop and drop it in my browser" works with Html 5. But after I drop the image, I just can't get the information about the image's actual width and height in the function handleFiles(files,n) where I alert it. Is this even possible?
Can anyone help me?
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="el-gr" lang="el-gr" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Files javascript upload with drag and drop</title>
</head>
<title>File(s) size</title>
</head>
<body>
<table>
<tr>
<td><input type="file" id="fileElem1" name="fileElem1" accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<div id="dropbox_1" style="width:200px;height:100px;border:1px solid blue;z-index=10;">
<div id="preview1"></div>
</div>
</td>
<td><input type="file" id="fileElem2" name="fileElem2" accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<div id="dropbox_2" style="width:200px;height:100px;border:1px solid blue;"> <div id="preview2"></div></div></td>
<td><input type="file" id="fileElem3" name="fileElem3" accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<div id="dropbox_3" style="width:200px;height:100px;border:1px solid blue;"> <div id="preview3"></div></div></td>
</tr>
</table>
<input type="button" onclick="sendFiles()" value="send" >
<script>
var dropbox1,dropbox2,dropbox3;
dropbox1 = document.getElementById("dropbox_1");
dropbox1.addEventListener("dragenter", dragenter, false);
dropbox1.addEventListener("dragover", dragover, false);
dropbox1.addEventListener("drop", drop, false);
dropbox2 = document.getElementById("dropbox_2");
dropbox2.addEventListener("dragenter", dragenter, false);
dropbox2.addEventListener("dragover", dragover, false);
dropbox2.addEventListener("drop", drop, false);
dropbox3 = document.getElementById("dropbox_3");
dropbox3.addEventListener("dragenter", dragenter, false);
dropbox3.addEventListener("dragover", dragover, false);
dropbox3.addEventListener("drop", drop, false);
var fileElem1 = document.getElementById("fileElem1");
var fileElem2 = document.getElementById("fileElem2");
var fileElem3 = document.getElementById("fileElem3");
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var n=e.currentTarget.id.split("_");
var dt = e.dataTransfer;
var files = dt.files;
handleFiles(files,n[1]);
}
var filesforupload = new Array(null,null,null);
function handleFiles(files,n) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
alert(img.width); // <- HERE I NEED TO GET THE width of the image
img.style.zIndex=2;
img.style.position="absolute";
document.getElementById("dropbox_"+n).style.height="200";
document.getElementById("preview"+n).innerHTML = "";
document.getElementById("preview"+n).appendChild(img);
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
filesforupload[n-1]=file;
//filesforupload.push(file);
//sendFile(file);
}
}
function sendFile(file) {
var uri = "upload.php";
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText);
// handle response.
}
};
var reader = new FileReader();
fd.append('fileElem', file);
// Initiate a multipart/form-data upload
xhr.send(fd);
}
function sendFiles(){
for (var i=0; i<filesforupload.length; i++) {
if(filesforupload[i]!=null)
sendFile(filesforupload[i]);
}
}
dropbox1.ondrop = function(event) {
event.stopPropagation();
event.preventDefault();
filesArray = event.dataTransfer.files;
}
function dump(obj) {
var out = '';
for (var i in obj) {
out += i + ": " + obj[i] + "\n";
}
alert(out);
}
</script>
</body>
</html>

Try it this way (updated with 100 ms timeout):
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
setTimeout(function() {
console.log(aImg.width); // right now file already loaded...
}, 100);
};
})(img);
http://jsfiddle.net/wVB3V/3/

anyway I found the following solution by adding an id to the image + onload function on the image like this
img.addEventListener('load', function() { alert(document.getElementById('test').width); /* ... */ }, false);
img.id="test";
The order does not matter since the load event fires after the img object gets appended.
Here is the complete code.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="el-gr" lang="el-gr" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>File(s) javascript upload with drag and drop</title>
</head>
<title>File(s) size</title>
</head>
<body>
<table>
<tr>
<td><input type="file" id="fileElem1" name="fileElem1" accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<div id="dropbox_1" style="min-width:200px;height:100px;border:1px solid blue;z-index=10;">
<div id="preview1"></div>
</div>
</td>
<td><input type="file" id="fileElem2" name="fileElem2" accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<div id="dropbox_2" style="width:200px;height:100px;border:1px solid blue;"> <div id="preview2"></div></div></td>
<td><input type="file" id="fileElem3" name="fileElem3" accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<div id="dropbox_3" style="width:200px;height:100px;border:1px solid blue;"> <div id="preview3"></div></div></td>
</tr>
</table>
<input type="button" onclick="getthewidth()" value="send" >
<script>
function getthewidth(){
alert(document.getElementById('test').width);
}
var dropbox1,dropbox2,dropbox3;
dropbox1 = document.getElementById("dropbox_1");
dropbox1.addEventListener("dragenter", dragenter, false);
dropbox1.addEventListener("dragover", dragover, false);
dropbox1.addEventListener("drop", drop, false);
dropbox2 = document.getElementById("dropbox_2");
dropbox2.addEventListener("dragenter", dragenter, false);
dropbox2.addEventListener("dragover", dragover, false);
dropbox2.addEventListener("drop", drop, false);
dropbox3 = document.getElementById("dropbox_3");
dropbox3.addEventListener("dragenter", dragenter, false);
dropbox3.addEventListener("dragover", dragover, false);
dropbox3.addEventListener("drop", drop, false);
var fileElem1 = document.getElementById("fileElem1");
var fileElem2 = document.getElementById("fileElem2");
var fileElem3 = document.getElementById("fileElem3");
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var n=e.currentTarget.id.split("_");
var dt = e.dataTransfer;
var files = dt.files;
handleFiles(files,n[1]);
}
var filesforupload = new Array(null,null,null);
function handleFiles(files,n) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
img.addEventListener('load', function() { alert(document.getElementById('test').width); /* ... */ }, false);
img.id="test";
//alert(document.getElementById('test').id);
// alert(img.width); // <- HERE I NEED TO GET THE width of the image
img.style.zIndex=2;
img.style.position="absolute";
//document.getElementById("dropbox_"+n).style.height="200";
document.getElementById("preview"+n).innerHTML = "";
document.getElementById("preview"+n).appendChild(img);
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
filesforupload[n-1]=file;
//filesforupload.push(file);
//sendFile(file);
}
}
function sendFile(file) {
var uri = "upload.php";
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText);
// handle response.
}
};
var reader = new FileReader();
fd.append('fileElem', file);
// Initiate a multipart/form-data upload
xhr.send(fd);
}
function sendFiles(){
for (var i=0; i<filesforupload.length; i++) {
if(filesforupload[i]!=null)
sendFile(filesforupload[i]);
}
}
dropbox1.ondrop = function(event) {
event.stopPropagation();
event.preventDefault();
filesArray = event.dataTransfer.files;
}
function dump(obj) {
var out = '';
for (var i in obj) {
out += i + ": " + obj[i] + "\n";
}
alert(out);
}
</script>
</body>
</html>