Limit amount of uploaded Images

Question

I have this JavaScript code which lets users upload and preview their uploaded images.

The images are being previewed through a table grid with specified dimensions.

My Question:

How can I edit the JavaScript to limit users from uploading more than 9 images?

Note: the same restriction would be implemented on the server side later on. Due to users being able to bypass this JavaScript code. But that's for later. For now I want to get the frontend to limit the users.

Note: This question has been asked before but was based solely on limiting file input button. My problem is implementing this code with mine.

Code in question (to limit file upload)

$(function() {
    $("button[type = 'submit']").click(function(event) {
        var $fileUpload = $("input[type='file']");
        if (parseInt($fileUpload.get(0).files.length) > 10) {
            alert("You are only allowed to upload a maximum of 10 files");
            event.preventDefault();
        }
    });
});

(function (global) {
    var imagesPerRow = 3,
        chooseFiles,
        columns,
        previews;

    function PreviewImages() {
        var row;

        Array.prototype.forEach.call(chooseFiles.files, function (file, index) {
            var cindex = index % imagesPerRow,
                oFReader = new FileReader(),
                cell,
                image;

            if (cindex === 0) {
                row = previews.insertRow(Math.ceil(index / imagesPerRow));
            }

            image = document.createElement("img");
            image.id = "img_" + index;
            image.style.objectFit = "cover";
            image.style.width = "150px";
            image.style.height = "90px";
            cell = row.insertCell(cindex);
            cell.appendChild(image);

            oFReader.addEventListener("load", function assignImageSrc(evt) {
                image.src = evt.target.result;
                this.removeEventListener("load", assignImageSrc);
            }, false);

            oFReader.readAsDataURL(file);
        });
    }

    global.addEventListener("load", function windowLoadHandler() {
        global.removeEventListener("load", windowLoadHandler);
        chooseFiles = document.getElementById("chooseFiles");
        columns = document.getElementById("columns");
        previews = document.getElementById("previews");

        var row = columns.insertRow(-1),
            header,
            i;

        for (i = 0; i < imagesPerRow; i += 1) {
            header = row.insertCell(-1);
            header.style.width = (100 / imagesPerRow) + "%";
        }

        chooseFiles.addEventListener("change", PreviewImages, false);
    }, false);
}(window));

div.rounded {
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
}
label {
    display: block;
}
input {
    display: block;
}
#previewTable {
    width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="imagesDiv" class="rounded">
    <label for="chooseFiles">Add Images</label>
    <input type="file" id="chooseFiles" multiple="multiple" />
    <table id="previewTable">
        <thead id="columns"></thead>
        <tbody id="previews"></tbody>
    </table>
</div>

It doesn't, I understand that its the right code to limit the users upload selection but I'm lost at the implementation with my own code. The code I provided above. — Seever .S, Aug 30 '20 at 21:24

score 1 · Accepted Answer · answered Aug 30 '20 at 22:14

You can modify your javascript code to check the files.length property of the input type="file" element & set the files array empty by assigning the value property of the input element to an empty string if the files.length is more than 9.

check the modified javascript code:

(function (global) {
    var imagesPerRow = 3,
        chooseFiles,
        columns,
        previews;

    

    global.addEventListener("load", function windowLoadHandler() {
        global.removeEventListener("load", windowLoadHandler);
        chooseFiles = document.getElementById("chooseFiles");
        columns = document.getElementById("columns");
        previews = document.getElementById("previews");

        var row = columns.insertRow(-1),
            header,
            i;

        for (i = 0; i < imagesPerRow; i += 1) {
            header = row.insertCell(-1);
            header.style.width = (100 / imagesPerRow) + "%";
        }

        chooseFiles.addEventListener("change", function (e) {
            if(this.files.length > 9){
                alert("You are only allowed to upload a maximum of 9 files");
                this.value = "";
                e.preventDefault();
            }
            else{
                var row;

                Array.prototype.forEach.call(chooseFiles.files, function (file, index) {
                    var cindex = index % imagesPerRow,
                        oFReader = new FileReader(),
                        cell,
                        image;

                    if (cindex === 0) {
                        row = previews.insertRow(Math.ceil(index / imagesPerRow));
                    }

                    image = document.createElement("img");
                    image.id = "img_" + index;
                    image.style.objectFit = "cover";
                    image.style.width = "150px";
                    image.style.height = "90px";
                    cell = row.insertCell(cindex);
                    cell.appendChild(image);

                    oFReader.addEventListener("load", function assignImageSrc(evt) {
                        image.src = evt.target.result;
                        this.removeEventListener("load", assignImageSrc);
                    }, false);

                    oFReader.readAsDataURL(file);
                });
            }
        
        }, false);
    }, false);
}(window));

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive</title>

  <link rel="stylesheet" href="./assets/css/custom.css">
</head>
<body>
  
  
<div id="imagesDiv" class="rounded">
    <label for="chooseFiles">Add Images</label>
    <input type="file" id="chooseFiles" multiple="multiple" />
    <table id="previewTable">
        <thead id="columns"></thead>
        <tbody id="previews"></tbody>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./assets/js/main.js"></script>

</body>
</html>

Hope this solves your problem.

score 0 · Answer 2 · answered Aug 30 '20 at 21:27

I can't really understand the code displayed above, but what you can do is:

Define variable uploadedImages = 0 so that every time the user uploads a photo on the website, uploadedImages increments by one. Also, make an IF statement that checks every time before uploading a photo, and only upload the image if the uploadedImages didn't pass the max number of uploaded images allowed.

I tried to implement this in your code but I can't figure out how it works.

Limit amount of uploaded Images

2 Answers2