LoadImages into Boxes using FileReader


(Scott) #1

I am SO close to something SO simple. I need to be able to use the following function to load images into four separate boxes:

function imageLoader(hypeDocument, element, event) {

hypeDocument.getElementById('files').addEventListener('change', loadSelectedFileInit, false);

function loadSelectedFileInit(event) {

	var file = this.files[0];
	console.log(file);
 	var preview = hypeDocument.getElementById('box_1');
 	preview.innerHTML = ""
 	 preview.style.backgroundImage = ''; 
 	 var reader  = new FileReader();

reader.addEventListener(“load”, function () {

	if (file.type.match('image.*')) {


preview.style.backgroundImage = 'url('+ reader.result + ')'; 
preview.style.backgroundRepeat="no-repeat";
preview.style.backgroundSize="98%";
preview.style.backgroundPosition = "center";
 } else {
var theType =  file.type;
if (file.type == ""){ theType  ="Unknown" }

  preview.innerHTML = " Could not load selected file of  "  + theType  +  "  type "


}

}, false);

if (file) {
reader.readAsDataURL(file);
}

};

The HTML and CSS say four boxes, each with the same following hidden input form:

//form onsubmit=“return false”//
//label for=“files”>



click here to load image
</label//
//input style=“visibility: hidden; position: absolute;” type=“file” size=“25” id=“files” name=“files[]” value="" placeholder=“file to this input”><br//

</form//

But on preview in Hype, only the first box loads the image. If I attempt to load an image in another box, it yet loads to the first one. How do we get the rest of the boxes to load their respective images? I know it’s an issue of names and ids, but can’t figure out where and which ones.


(Jonathan Deutsch) #2

This pasted code isn’t valid; when posting code to the forums please put it in a triple tick ` block so it comes in correctly. Also it is difficult for anyone to look at a pasting of code and understand why it would not be working outside the context of your current .hype document, as it relies on this and anyone would need to execute the code in its environment to determine what is happening. From your other case, my guess is that you actually need multiple ‘files’ boxes, since an element with this ID did not appear to exist in the .hype document.