Level 2
I suggest you to follow this article steps : Laravel file upload functionality with multiple file and image uploading option.
https://www.cloudways.com/blog/laravel-multiple-files-images-upload/
I am working with laravel 5.6 and I have image upload button with my form. currently it is using upload single file.
<div class="form-group row required">
<div class="field" align="left" >
<h3>Upload images</h3>
<input type="file" id="files" name="files[]" multiple />
</div>
</div>
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 thumbanail but second file input did not display thumbanails.....what is the problem. how can fix this problem?
Please or to participate in this conversation.