A simple guide to loading images from a directory and displaying them upon click

Question

A simple guide to loading images from a directory and displaying them upon click

I am currently working on a function that includes multiple sub-functions to achieve different tasks. One function is intended to store the files received as input into an array called loadedimages within the parent function. Another function aims to display these files in the appropriate component using showLoadedImages. Lastly, there is a function designed to display the correct image file in the correct component, but it is not functioning properly. The other two functions seem to be working fine. My challenge lies in getting the last function to work while utilizing the loadedimages array. I am open to suggestions for altering the content stored in the array.

Below is the JavaScript code:

function imgviewer() {
    "use strict";
    var loadedimages = [];
    var lidivs = [];

    function loadimages() {
        var files = document.getElementById("images").files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
                alert('THERE IS NO IMAGE IN THIS DIRECTORY.');
                break;
            }
            loadedimages.push(file);
        }
    }

    function showLoadedImages(elem) {
        loadimages();
        var ld = loadedimages;

        //var files = getLoadedImages(); //filelist obj
        for (var i = 0; i < ld.length; i++) {
            var file = ld[i];
            var reader = new FileReader();
            reader.onload = (function(file) {
                return function(e) {
                    // Render thumbnail.
                    var span = document.createElement(
                        'span');
                    span.innerHTML = [
                        '<img class="tile" src="',
                        e.target.result,
                        '" title="', encodeURI(
                            file.name), '">'
                    ].join('');
                    document.getElementById(elem).insertBefore(
                        span, null);
                    lidivs.push(span);
                };
            })(file);
            // Read in the image file as a data URL.
            reader.readAsDataURL(file);
        }
    }

    function showImage(index, elem) {
        var chosenFile = loadedimages[index];
        document.getElementById(elem).src = chosenFile;
    }
document.getElementById('images').addEventListener('change', function(){
    showLoadedImages("main");
    }, false);
}

And here is some HTML

<form name="uploadForm">
<input id="images" type="file" webkitdirectory mozdirectory directory      name="myFiles"
multiple/>
<span id="list"></span>
</form>
<div id="sidebar1"><img id="willchange" src="images/railaythailand.jpg"   width="1200" height="832" alt=""/></div>
<div id="main"></div>

Whenever I call showLoadedImages("main"), the images are displayed in the main div. My goal is to be able to click on those images so they appear on "willchange".

javascript image onclick

Answer 1

Answer №1

Here is a solution that meets your request. While it addresses the main issue, there are still some other issues in your code that need attention. For example, the images are not thumbnails as intended, and loading shrunken images can be just as slow as loading the originals. Maybe I have overlooked something.

"use strict";
var loadedimages = [];
var lidivs = [];

function loadimages() {
var files = document.getElementById("images").files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
continue;
}
loadedimages.push(file);
}
    loadedimages.length || alert('THERE IS NO IMAGE IN THIS DIRECTORY.');
}

function showLoadedImages(elem) {
loadimages();
var ld = loadedimages;

//var files = getLoadedImages(); //filelist obj
for (var i = 0; i < ld.length; i++) {
var file = ld[i];
var reader = new FileReader();
reader.onload = (function(file) {
return function(e) {
// Render thumbnail.
var span = document.createElement(
'span');
span.innerHTML = [
'<img data-index="',
lidivs.length,
'" class="tile" src="',
e.target.result,
'" title="', encodeURI(
file.name), '">'
].join('');
span.addEventListener("click", foo );
document.getElementById(elem).insertBefore(
span, null);
lidivs.push(span);
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
}

function showImage(index, elem) {
document.getElementById(elem).src = lidivs[index].children[0].src;
}

function foo(event) {
  showImage(event.target.dataset.index, "willchange");
}

function show() {
    showLoadedImages("list");
}

function init() {
document.getElementById("images").addEventListener("change", show, false);
}

document.addEventListener( "DOMContentLoaded", init, false );

<body>
<form name="uploadForm">
<input id="images" type="file" webkitdirectory mozdirectory directory      name="myFiles"
multiple/>
<span id="list"></span>
</form>
<div id="sidebar1"><img id="willchange" src="images/railaythailand.jpg"   width="1200" height="832" alt=""/></div>
</body>

Answer 2

Here is a solution that meets your request. While it addresses the main issue, there are still some other issues in your code that need attention. For example, the images are not thumbnails as intended, and loading shrunken images can be just as slow as loading the originals. Maybe I have overlooked something.

"use strict";
var loadedimages = [];
var lidivs = [];

function loadimages() {
var files = document.getElementById("images").files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
continue;
}
loadedimages.push(file);
}
    loadedimages.length || alert('THERE IS NO IMAGE IN THIS DIRECTORY.');
}

function showLoadedImages(elem) {
loadimages();
var ld = loadedimages;

//var files = getLoadedImages(); //filelist obj
for (var i = 0; i < ld.length; i++) {
var file = ld[i];
var reader = new FileReader();
reader.onload = (function(file) {
return function(e) {
// Render thumbnail.
var span = document.createElement(
'span');
span.innerHTML = [
'<img data-index="',
lidivs.length,
'" class="tile" src="',
e.target.result,
'" title="', encodeURI(
file.name), '">'
].join('');
span.addEventListener("click", foo );
document.getElementById(elem).insertBefore(
span, null);
lidivs.push(span);
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
}

function showImage(index, elem) {
document.getElementById(elem).src = lidivs[index].children[0].src;
}

function foo(event) {
  showImage(event.target.dataset.index, "willchange");
}

function show() {
    showLoadedImages("list");
}

function init() {
document.getElementById("images").addEventListener("change", show, false);
}

document.addEventListener( "DOMContentLoaded", init, false );

<body>
<form name="uploadForm">
<input id="images" type="file" webkitdirectory mozdirectory directory      name="myFiles"
multiple/>
<span id="list"></span>
</form>
<div id="sidebar1"><img id="willchange" src="images/railaythailand.jpg"   width="1200" height="832" alt=""/></div>
</body>

A simple guide to loading images from a directory and displaying them upon click

Answer №1

Similar questions

"Troubleshooting the inconsistency of GraphQL resolver context functionality between Playground and the client in the official NextJS starter

Tips for identifying HTML tags that include a specific attribute automatically

Tips for transforming intricate JavaScript arrays into a unified array and iterating through to create a table

Guide to updating current rjs files to incorporate jQuery and json in Rails 3

Implement an event listener on an element dynamically inserted into the DOM through an AJAX request

Node.js is being utilized to upload data to an FTP server with the help of js

Is there a different method for looping in JSX besides .map()?

"Null" is the value assigned to a JavaScript variable

Tips for conducting performance analysis in React 16

Starting a line series from the beginning of the y-axis on a bar chart using chart.js

"Navigate with Ease: Introducing the Twitter Bootstrap Scroll

Enables tagging without the need to manually input tags using an Angular form

Setting the default value for Jquery AutoComplete

How can you incorporate a value into a variable in PHP?

Is there a way to replicate the functionality of Python's zip() function in JavaScript

What is the most efficient method for retrieving an element using a data attribute with an object (JSON) value?

adjusting the position of a dynamic JavaScript panel

Do not trigger mouseleave events when absolute positioned elements have overlapping layers

String Replacement in JavaScript

Navigating through paths of assets in Ruby on Rails