Sep placeholders, sep images, independent intervals

1

I need a user to be able to load different images into four to six boxes, completely independent of each other, and then be able to crop/fill them with the image. In other words, if the user loads an image into the first box, and they don’t like it, they can remove it and load something else. When they go to the next box, same and so forth. At the end, they are able to export all the boxes into one cohesive widget that will serve as a storyboard visual for a larger project.

The following function titled, “loadimg_1 (hypeDocument, element, event)” works for one box:

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);
}
};

However, the second function titled, “loadimg_2 (hypeDocument, element, event)” does, indeed, load an image into the second box (with “box_2” replacing “box_1” as in the first function), but they do not operate independently of one another. Meaning, the first box loads fine if that is, indeed, the first box the user chooses to load. But then when he loads the second box with an image, it populates BOTH boxes with the same image. Could the entire project be calling BOTH functions simultaneously at all times? How do we get these to operate independently of one another?

2

Without seeing the document it is hard to see the problem (although this sounds like a general javascript issue, not anything specific to Hype).

I’d guess that you are not referencing a different element for the hypeDocument.getElementById('files') call or that you might need to rename loadSelectedFileInit. But that’s just a guess.

3

loaderFileReader.hype.zip (11.8 KB)
this is what i am currently working with…

4

At a glance, I don’t see how this code is ever being called; you’d probably want to call functions from an ‘On Scene Load’ event. Also you are calling hypeDocument.getElementById('files') but I don’t see any elements with the ID of ‘files’. I’d recommend getting this code working in a simple HTML file with your own divs outside of Hype first - there’s no real Hype dependencies and it will be easier to work with. Then it will be easier to show how to integrate into a Hype document.