JS-HTML Image App

August 6, 2023

JavaScript and HTML app on one page User can select multiple image files on their own computer. The app then displays those images back to them using base64 encoded img src elements - each image accompanied by its original filename Also populates a Javascript array with a list of {"filename": ...", "base64content" ...} objects

Sure, you can create a simple HTML and JavaScript application that allows the user to select multiple image files and displays the images back to them using base64 encoded img src elements. The original filenames and base64 contents will also be populated in a JavaScript array.

Here's the code that can do this:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Preview</title>
</head>
<body>
    <input type="file" id="imageInput" multiple accept="image/*" />
    <button onclick="previewImages()">Preview Images</button>
    <div id="preview"></div>

    <script>
        var images = [];

        function previewImages() {
            // Clear previous data
            images = [];
            document.getElementById("preview").innerHTML = "";

            var files = document.getElementById("imageInput").files;
            Array.from(files).forEach(function (file) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    var base64content = e.target.result;
                    var filename = file.name;

                    // Append image and filename to the preview area
                    var previewDiv = document.getElementById("preview");
                    var imgTag = document.createElement("img");
                    imgTag.src = base64content;
                    var filenameTag = document.createElement("p");
                    filenameTag.innerHTML = "Filename: " + filename;
                    previewDiv.appendChild(imgTag);
                    previewDiv.appendChild(filenameTag);

                    // Append to the images array
                    images.push({ "filename": filename, "base64content": base64content });
                };

                reader.readAsDataURL(file);
            });
        }

        // For debugging purposes, you can view the images array in the console
        function logImagesArray() {
            console.log(images);
        }
    </script>
</body>
</html>

The user can select multiple images through the input field.
By clicking the "Preview Images" button, the selected images are displayed below the button along with their filenames.
The images and filenames are stored in the images array as objects with the properties filename and base64content.

You can call logImagesArray() at any point to print the current content of the images array to the console.

Make sure they are displayed sorted alphabetically by their filename - and add a {img: max-width: 300px } style at the top of the page

Certainly! You can modify the code to sort the images alphabetically by filename before displaying them. Here's the updated code:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Preview</title>
    <style>
        img {
            max-width: 300px;
        }
    </style>
</head>
<body>
    <input type="file" id="imageInput" multiple accept="image/*" />
    <button onclick="previewImages()">Preview Images</button>
    <div id="preview"></div>

    <script>
        var images = [];

        function previewImages() {
            // Clear previous data
            images = [];
            document.getElementById("preview").innerHTML = "";

            var files = document.getElementById("imageInput").files;

            // Convert FileList to an array and sort by filename
            Array.from(files).sort((a, b) => a.name.localeCompare(b.name)).forEach(function (file) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    var base64content = e.target.result;
                    var filename = file.name;

                    // Append image and filename to the preview area
                    var previewDiv = document.getElementById("preview");
                    var imgTag = document.createElement("img");
                    imgTag.src = base64content;
                    var filenameTag = document.createElement("p");
                    filenameTag.innerHTML = "Filename: " + filename;
                    previewDiv.appendChild(imgTag);
                    previewDiv.appendChild(filenameTag);

                    // Append to the images array
                    images.push({ "filename": filename, "base64content": base64content });
                };

                reader.readAsDataURL(file);
            });
        }

        // For debugging purposes, you can view the images array in the console
        function logImagesArray() {
            console.log(images);
        }
    </script>
</body>
</html>

I've added the style to limit the maximum width of the images to 300px as you requested. Also, I've added sorting to the code, so the images are now displayed in alphabetical order by their filenames.

Array.from(files).forEach(function (file) { var reader = new FileReader(); reader.onload = function (e) { var base64content = e.target.result; var filename = file.name; // Append to the images array images.push({ "filename": filename, "base64content": base64content }); }; reader.readAsDataURL(file); }); Best way to run some code once all of those onload have fired

You can track the number of files that have been processed and execute your code when all the files have been read. A counter can be used to achieve this.

Here's a modification to the code snippet you provided to run some code once all the onload events have fired:

javascript
var files = document.getElementById("imageInput").files;
var processedCount = 0;
Array.from(files).forEach(function (file) {
    var reader = new FileReader();
    reader.onload = function (e) {
        var base64content = e.target.result;
        var filename = file.name;
        // Append to the images array
        images.push({ "filename": filename, "base64content": base64content });

        processedCount++;
        if (processedCount === files.length) {
            allFilesProcessed();
        }
    };
    reader.readAsDataURL(file);
});

function allFilesProcessed() {
    // Sort the images array by filename
    images.sort((a, b) => a.filename.localeCompare(b.filename));

    // Now, you can use the sorted images array to display the images
    // or do anything else you need to do after all files have been read
    images.forEach(image => {
        var previewDiv = document.getElementById("preview");
        var imgTag = document.createElement("img");
        imgTag.src = image.base64content;
        var filenameTag = document.createElement("p");
        filenameTag.innerHTML = "Filename: " + image.filename;
        previewDiv.appendChild(imgTag);
        previewDiv.appendChild(filenameTag);
    });
}

Here, the function allFilesProcessed is called once all the files have been processed. It sorts the images array alphabetically by the filename and then uses this sorted array to append the images to the preview div. This ensures that all images are loaded before any further processing, like sorting and displaying, takes place.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Annotated presentation creator</title> <style> img { max-width: 300px; } </style> </head> <body> <input type="file" id="imageInput" multiple accept="image/*" /> <button onclick="createSlidesForImages()">Load images</button> <p> Template for each slide:<br> <textarea id="slideTemplate"></textarea> </p> <div id="preview"></div> <script> var images = []; function createSlidesForImages() { // Clear previous data var previewDiv = document.getElementById("preview"); images = []; document.getElementById("preview").innerHTML = ""; var files = document.getElementById("imageInput").files; var processedCount = 0; Array.from(files).forEach(function (file) { var reader = new FileReader(); reader.onload = function (e) { var base64content = e.target.result; var filename = file.name; // Append to the images array images.push({ "filename": filename, "base64content": base64content }); processedCount++; if (processedCount === files.length) { allFilesProcessed(); } }; reader.readAsDataURL(file); }); function allFilesProcessed() { // Sort the images array by filename images.sort((a, b) => a.filename.localeCompare(b.filename)); // Now, you can use the sorted images array to display the images // or do anything else you need to do after all files have been read images.forEach(image => { var previewDiv = document.getElementById("preview"); var imgTag = document.createElement("img"); imgTag.src = image.base64content; var filenameTag = document.createElement("p"); filenameTag.innerHTML = "Filename: " + image.filename; previewDiv.appendChild(imgTag); previewDiv.appendChild(filenameTag); }); } } // For debugging purposes, you can view the images array in the console function logImagesArray() { console.log(images); } </script> </body> </html> When displayed, each image should appear floated left of a textarea with a placeholder of "alt" - which has a class of textarea-alt and a data-filename="" attribute with the image filename Below the image there should be a clear: both textarea labelled "annotation" - with a class of textarea-annotation and the same data-filename attribute Typing in the annotation textarea should update a preview directly below with the rendered HTML of markdown typed into that textarea, using this snippet: html = marked.parse("# hello", {headerIds: false, mangle: false}).trim() The marked library can be loaded like this: import marked from 'https://cdn.jsdelivr.net/npm/marked@5.1.2/+esm'

Certainly! You can achieve the desired functionality by making a few adjustments to your code.

Here's the modified code:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Annotated presentation creator</title>
    <style>
        img {
            max-width: 300px;
            float: left;
        }
        .clear {
            clear: both;
        }
        .textarea-alt,
        .textarea-annotation {
            width: 100%;
            height: 100px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <input type="file" id="imageInput" multiple accept="image/*" />
    <button onclick="createSlidesForImages()">Load images</button>
    <div id="preview"></div>

    <script type="module">
        import marked from 'https://cdn.jsdelivr.net/npm/marked@5.1.2/+esm';

        var images = [];

        function createSlidesForImages() {
            // Clear previous data
            var previewDiv = document.getElementById("preview");
            images = [];
            previewDiv.innerHTML = "";

            var files = document.getElementById("imageInput").files;
            var processedCount = 0;
            Array.from(files).forEach(function (file) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var base64content = e.target.result;
                    var filename = file.name;
                    // Append to the images array
                    images.push({ "filename": filename, "base64content": base64content });

                    processedCount++;
                    if (processedCount === files.length) {
                        allFilesProcessed();
                    }
                };
                reader.readAsDataURL(file);
            });

            function allFilesProcessed() {
                // Sort the images array by filename
                images.sort((a, b) => a.filename.localeCompare(b.filename));

                // Create slides for each image
                images.forEach(image => {
                    var imgTag = document.createElement("img");
                    imgTag.src = image.base64content;

                    var altTextarea = document.createElement("textarea");
                    altTextarea.placeholder = "alt";
                    altTextarea.className = "textarea-alt";
                    altTextarea.dataset.filename = image.filename;

                    var annotationTextarea = document.createElement("textarea");
                    annotationTextarea.placeholder = "annotation";
                    annotationTextarea.className = "textarea-annotation";
                    annotationTextarea.dataset.filename = image.filename;
                    annotationTextarea.addEventListener('input', function() {
                        updatePreview(this);
                    });

                    var annotationPreview = document.createElement("div");
                    annotationPreview.className = "annotation-preview";
                    
                    var clearDiv = document.createElement("div");
                    clearDiv.className = "clear";

                    previewDiv.appendChild(imgTag);
                    previewDiv.appendChild(altTextarea);
                    previewDiv.appendChild(annotationTextarea);
                    previewDiv.appendChild(annotationPreview);
                    previewDiv.appendChild(clearDiv);
                });
            }

            function updatePreview(textarea) {
                var previewDiv = textarea.nextElementSibling;
                var html = marked.parse(textarea.value, { headerIds: false, mangle: false }).trim();
                previewDiv.innerHTML = html;
            }
        }

        // For debugging purposes, you can view the images array in the console
        function logImagesArray() {
            console.log(images);
        }
    </script>
</body>
</html>

Here's what the code does:

Includes the marked library for markdown parsing.
Creates a slide for each image with a floated image, alt textarea, annotation textarea, and preview div.
Clears the float with a div to ensure proper layout.
Adds an input event listener to the annotation textarea that updates the preview div below it with the rendered HTML of markdown typed into that textarea.

You can now select and load images, and their previews will appear next to the textareas, where you can type markdown and see the rendered HTML in real-time.

Uncaught ReferenceError: createSlidesForImages is not defined

Ah, the issue you're experiencing is because the JavaScript is written as a module (due to the import statement), which means that the functions declared inside it aren't available in the global scope. This leads to the error when the button's onclick attribute tries to access the function createSlidesForImages.

Here's an alternative approach that attaches the event listener inside the JavaScript code, rather than in the HTML onclick attribute:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Annotated presentation creator</title>
    <style>
        img {
            max-width: 300px;
            float: left;
        }
        .clear {
            clear: both;
        }
        .textarea-alt,
        .textarea-annotation {
            width: 100%;
            height: 100px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <input type="file" id="imageInput" multiple accept="image/*" />
    <button id="loadImagesButton">Load images</button>
    <div id="preview"></div>

    <script type="module">
        import marked from 'https://cdn.jsdelivr.net/npm/marked@5.1.2/+esm';

        var images = [];

        document.getElementById("loadImagesButton").addEventListener("click", createSlidesForImages);

        function createSlidesForImages() {
            // (Rest of the code remains the same)
            // ...
        }

        // Other functions here...
        // ...

        // For debugging purposes, you can view the images array in the console
        function logImagesArray() {
            console.log(images);
        }
    </script>
</body>
</html>

I replaced the onclick attribute with an id for the button, and I added an event listener inside the JavaScript to attach the createSlidesForImages function to the button's click event. This should resolve the error and allow the code to work as intended.

Javascript to add a progress bar to a page with a length of 80 and then increment that length from 1 to 80 every 1s

Sure! Here's a simple example of adding a progress bar to a page, and then incrementing the progress from 1 to 80 every second:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Bar</title>
    <style>
        #progress-container {
            width: 80%;
            background-color: #f3f3f3;
            position: relative;
        }
        #progress-bar {
            width: 1%;
            height: 30px;
            background-color: #4caf50;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="progress-container">
        <div id="progress-bar"></div>
    </div>

    <script>
        var progressBar = document.getElementById("progress-bar");

        function incrementProgress() {
            var currentWidth = parseInt(progressBar.style.width);
            if (currentWidth < 80) {
                progressBar.style.width = (currentWidth + 1) + "%";
            } else {
                // Stop the interval once we reach 80%
                clearInterval(progressInterval);
            }
        }

        var progressInterval = setInterval(incrementProgress, 1000);
    </script>
</body>
</html>

This code creates a simple progress bar and increments its width by 1% every second until it reaches 80%. The progress bar is inside a container that represents the full 100%, so when the bar reaches 80%, it will fill 80% of the container. You can modify the appearance and behavior by adjusting the CSS and JavaScript as needed.

use an HTML progress bar element

Certainly! You can use the HTML <progress> element to create a progress bar and increment it from 1 to 80 every second. Here's an example:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Bar</title>
</head>
<body>
    <progress id="progressBar" value="1" max="80"></progress>

    <script>
        var progressBar = document.getElementById("progressBar");

        function incrementProgress() {
            if (progressBar.value < 80) {
                progressBar.value += 1;
            } else {
                // Stop the interval once we reach 80
                clearInterval(progressInterval);
            }
        }

        var progressInterval = setInterval(incrementProgress, 1000);
    </script>
</body>
</html>

In this example, I used the <progress> element with a value attribute that starts at 1 and a max attribute set to 80. The JavaScript function increments the value by 1 every second until it reaches 80, at which point the interval is cleared, and the progress bar stops incrementing.

Continue this conversation

|Terms of use|Privacy policy