fileapi.js
// to show images as thumbnails in div
to show images as thumbnails in div
to show images as thumbnails in div
function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    if (!file.type.startsWith('image/')){ continue }
    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
		var preview = document.getElementById("preview");
		preview.appendChild(img);
		console.log("image source: " + img);
   find all images in imgHolder
  for (var i = 0; i < imgHolder.length; i++) {
  	var imgs = imghHolder[i].getElementsByTagName('img');
  	 print out src
  	for (var j = 0; j < imgs.length; j++) {
  		var img = imgs[j];
  		imgString+=img.src + "<br />";
  	}
  }
  document.getElementById("result").innerHTML=imgString;
  console.log(imgString + ': ')
    var reader = new FileReader();
    reader.onload = (function(aImg) {
			return function(e) {
				aImg.src = e.target.result;
				console.log("aImage Source: " + aImg.src);
			};
		})(img);
    reader.readAsDataURL(file);
console.log("Reader file: " + file)
     create an array to hold image data src
		 var imageArr = [];
		 for(i =0; i < img.length; i++){
		 	imageArr.push[i];
		 	console.log(imageArr);
		 }
  }
}
function handleFiles ( files ) { for ( var i = 0 ; i < files . length ; i ++ ) { var file = files [ i ] ; if ( ! file . type . startsWith ( 'image/' ) ) { continue } var img = document . createElement ( "img" ) ; img . classList . add ( "obj" ) ; img . file = file ; var preview = document . getElementById ( "preview" ) ; preview . appendChild ( img ) ; console . log ( "image source: " + img ) ; var reader = new FileReader ( ) ; reader . onload = ( function ( aImg ) { return function ( e ) { aImg . src = e . target . result ; console . log ( "aImage Source: " + aImg . src ) ; } ; } ) ( img ) ; reader . readAsDataURL ( file ) ; console . log ( "Reader file: " + file ) } }
to show images as thumbnails in div
to show images as thumbnails in div
// img is draggable once loaded so needs this - draggable="true" ondragstart="drag(event)" // img.ondragstart = drag(event); // img.setAttribute("id", "drag-img"); // img.setAttribute("draggable", "true"); // var source = img.src; // Assuming that "preview" is the div output where the content will be displayed. //     // find the div with id preview // 	var imgString = ""; //   var imgHolder = document.getElementById('preview'); // // // find all images in imgHolder // for (var i = 0; i < imgHolder.length; i++) { // 	var imgs = imghHolder[i].getElementsByTagName('img'); // // 	// print out src // 	for (var j = 0; j < imgs.length; j++) { // 		var img = imgs[j]; // 		imgString+=img.src + "<br />"; // 	} // } // document.getElementById("result").innerHTML=imgString; // console.log(imgString + ': ') // create an array to hold image data src // var imageArr = []; // for(i =0; i < img.length; i++){ // 	imageArr.push[i]; // 	console.log(imageArr); // }