asked    Edward     2018-10-22       javascript       49 view        1 Answer

[SOLVED] how to display file input buttons multiple times with image preview?

I am working with laravel 5.6 and I have image upload button with my form. currently it is using upload single file with image thumbnail preview.

<h3>Upload  images</h3>
<input type="file" id="files" name="files[]" multiple />

jquery

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

css

input[type="file"] {
  display: block;
}
.imageThumb {
  max-height: 75px;
  border: 2px solid;
  padding: 1px;
  cursor: pointer;
}
.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
}
.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.remove:hover {
  background: white;
  color: black;
}

now I add another upload input to same form like this,

<div class="form-group row required">
    <div class="field" align="left" >
        <h3>Upload  images</h3>
        <input type="file" id="files" name="files[]" multiple />
        <input type="file" id="files" name="files[]" multiple />//new one
    </div>
</div>

Then first upload button can appear image thumbnail but second file input did not display thumbnails. What is the problem? How can fix this problem?

  1 Answer  

        answered    Selena     2018-10-22      

Instead of giving both buttons the same id (any id that you give must be unique), give them the same class that you can then reference in your Javascript.

<div class="form-group row required">
    <div class="field" align="left" >
        <h3>Upload  images</h3>
        <input type="file" class="files" name="files[]" multiple />
        <input type="file" class="files" name="files[]" multiple />//new one
    </div>
</div>

Then your Javascript needs to be updated to bind the listener based on class instead of id. The .insertAfter() also gets updated to refer to the specific item clicked.

$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $(".files").on("change", function(e) {  // THIS LINE CHANGED
        var clickedButton = this;  // THIS LINE IS NEW
        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(clickedButton);  // THIS LINE CHANGED

            $(".remove").click(function(){
              $(this).parent(".pip").remove();
            });
          });

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

DEMO





Your Answer





 2018-10-22         Ula

Regex match string which does not fully consist of angular expressions

I've the pleasure to find all strings in our projects which are not angularjs expressions because we're going multi language (so every string which is not fully between curly braces).What I wanna do is build a regex which matches all strings, which have no angular expressions (or part of the string is no angular expression).The var names describe which should match (yes) and which shouldn't (nope).var yes = "test";var nope = "{{xyz}}";var yes = "test {{xyz}}";var nope = "{{::xyz}}";var nope = "{{xyz}} {{abc}}"; //as whitespace is okayTried a lot of different stuff using neg...
 javascript                     2 answers                     26 view
 2018-10-22         Otis

how to test private function outside react component

I have a private function outside component. It sounds more convenient to do test for function alone better than test it inside MyComponent, but it's private not exported.function func(){ return something;}export default class MyComponent extends Component {render <SomeComponent someProp={func()} />}I use mocha and enzyme for test and I wonder if there is anyway to test private function rather than test it inside the component. func is defined in module scope. It's not possible to reach variables outside the scope they were defined in JavaScript.Even if func were e...
 javascript                     2 answers                     29 view
 2018-10-22         Ruby

Sliding Menu in React

I want to create a file separator styled menu in react. I'm not very familiar with css, so i need a starting point. I have found many such menu components but all of them are full page.I dont understand how to create the shape of the component, if it were a simple rectangle it would be possible, but the shape is the rectangle plus the button, i dont know how to manage that.It will look something like this :Alter clicking on "Filter Menu", it will slide into view: That is actually a CSS/HTML only question.However, to develop from scratch:Draw a two column table and have ...
 javascript                     2 answers                     23 view