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”>
//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.