how to select only 10 photos instead of many

Question

how to select only 10 photos instead of many User needs to upload only 10 photo if more error popup

<div class="col-md-12">
    <div class="field" align="left">
    <h3>Upload your images</h3>
    <input type="file" id="files" name="photos[]" multiple />
</div>
<script>

    $(document).ready(function() {
        if (window.File && window.FileList && window.FileReader) {
            $("#files").on("change", function(e) {
                var files = e.target.files,
                    filesLength = files.length;
                for (var i = 0; i < filesLength; i++) {
                    var f = files[i]
                    var fileReader = new FileReader();
                    fileReader.onload = (function(e) {
                        var file = e.target;
                        $("<span class=\"pip\">" +
                            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                            "<br/><span class=\"remove\">Remove image</span>" +
                            "</span>").insertAfter("#files");
                        $(".remove").click(function() {
                            $(this).parent(".pip").remove();
                        });

                        // Old code here
                        /*$("<img></img>", {
                          class: "imageThumb",
                          src: e.target.result,
                          title: file.name + " | Click to remove"
                        }).insertAfter("#files").click(function(){$(this).remove();});*/

                    });
                    fileReader.readAsDataURL(f);
                }
            });
        } else {
            alert("Your browser doesn't support to File API")
        }
    });
</script>

Route::get('image-gallery', 'ImageGalleryController@index'); Route::post('image-gallery', 'ImageGalleryController@upload');

Possible duplicate of [How to limit maximum items on a multiple input ()](https://stackoverflow.com/questions/10105411/how-to-limit-maximum-items-on-a-multiple-input-input-type-file-multiple) — , Jul 11 '17 at 05:47

score 0 · Answer 1 · answered Jul 11 '17 at 05:53

0

Add an if:

if(files.length > 10){
    //Your code here
}

answered Jul 11 '17 at 05:53

xM0nSt3r

25
1
7

if add if(files.length > 10) preview of image not showing...is there other way – Veekee45 Jul 11 '17 at 06:10
@Veekee45 you want to limit the selection in the popup window? – xM0nSt3r Jul 11 '17 at 06:20

score 0 · Answer 2 · answered Jul 11 '17 at 05:53

0

You can pass FileList object to Array.prototype.slice() to convert FileList to Array, provide pass 0 to first parameter, 10 to second parameter

<input type="file" multiple>
<script>
  var input = document.querySelector("input[type=file]");
  input.onchange = function(event) {
    console.log(event.target.files.length);
    var files = Array.prototype.slice.call(event.target.files, 0, 10);
    console.log(files.length);
  }
</script>

answered Jul 11 '17 at 05:53

guest271314

1
15
104
177

@Veekee45 Do you provide notification to user hat only 10 files are expected to be uploaded? – guest271314 Jul 11 '17 at 06:20

Alexander Higgins · Answer 3 · 2017-07-11T06:20:07.363

Just add an if statement to check the files.length property

$(document)
    .ready(function() {
        if (window.File && window.FileList && window.FileReader) {
            $("#files")
                .on("change", function(e) {
                    var files = e.target.files,
                        filesLength = files.length;
                    if (filesLength>10) {
                         alert("You may only select 10 files");
                         $("#files").val(""); 
                         return; 
                         }
                    for (var i = 0; i < filesLength; i++) {
                        var f = files[i]
                        var fileReader = new FileReader();
                        fileReader.onload = (function(e) {
                            var file = e.target;
                            $("<span class=\"pip\">" +
                                    "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                                    "<br/><span class=\"remove\">Remove image</span>" +
                                    "</span>")
                                .insertAfter("#files");
                            $(".remove")
                                .click(function() {
                                    $(this)
                                        .parent(".pip")
                                        .remove();
                                });

                            // Old code here
                            /*$("<img></img>", {
                              class: "imageThumb",
                              src: e.target.result,
                              title: file.name + " | Click to remove"
                            }).insertAfter("#files").click(function(){$(this).remove();});*/

                        });
                        fileReader.readAsDataURL(f);
                    }
                });
        } else {
            alert("Your browser doesn't support to File API")
        }
    });

hi Higgins thanks for your help but preview is not working ..it uploads more than 10 photos..is there any way to solve this..with preview and limits — Veekee45, Jul 11 '17 at 06:13

how to select only 10 photos instead of many

3 Answers3