We Keep Coding

uploading multiple files restriction is not working using dropzone

I have the code given below it is counting the files when i select the files and alert that you cannot select more than etc...
Limit is 4 and when i select 6 it says cannot select more than 4. But when i select 4 it adds and show thumb anad again on selecting one or 4 it adds again the new 4 or whatever files, so user can upload unlimited files.
How can i catch that selected files and restrict them.
<div class="m-form__group form-group row">
<label for="exampleInputEmail1" class="col-form-label col-lg-3 col-sm-12">
Select Image
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<div class="col-lg-12 col-md-9 col-sm-12" id="thumb-output">
<input id="files" class="" type="file" name="file[]" multiple>
</div>
</div>
</div>
$(document).ready(function() {
$('input[type=file]').on('dragenter', function() {
$('div').addClass('dragover');
});
$('input[type=file]').on('dragleave', function() {
$('div').removeClass('dragover');
});
if (window.File && window.FileList && window.FileReader) {
var numFiles = $('input[type=file]')[0].files.length;
$("#files").on("change", function(e) {
var files = e.target.files, filesLength = files.length;
if(files.length > 4){
alert("you can select max 4 files.");
}else{
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</span>" +
"</span>").insertAfter("#files");
$(".remove").click(function(){
$(this).parent(".pip").remove();
});
});
fileReader.readAsDataURL(f);
}
}
});
} else {
alert("Your browser doesn't support to File API")
}
});

You can use a global variable to track how many files have been added.
var fileAdded = 0;
...
if(fileAdded + files.length > 4){
alert("you can select max 4 files.");
} else {
fileAdded = fileAdded + files.length;
for (var i = 0; i < files.length; i++) {
...
}
}
Also, please remember to decrease fileAdded when the user delete a file.
Here is an example:
var fileDict = new Object();
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
var numFiles = $('input[type=file]')[0].files.length;
$("#files").on("change", function(e) {
var files = e.target.files, filesLength = files.length;
if(Object.keys(fileDict).length + files.length > 4){
alert("you can select max 4 files.");
}else{
for (var i = 0; i < filesLength; i++) {
var f = files[i];
fileDict[f.name] = f;
var fileReader = new FileReader();
fileReader.onload = (function(e) {
$("<div class=\"pip\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + f.name + "\"/>" +
"<br/><span class=\"remove\" data-name=\""+f.name+"\">Remove</span>" +
"</div>").insertAfter("hr");
});
fileReader.readAsDataURL(f);
}
}
});
} else {
alert("Your browser doesn't support to File API");
}
});
$(document).on('click', '.remove', function(){
delete fileDict[$(this).data("name")];
$(this).parent(".pip").remove();
});
var upload = function() {
let formData = new FormData();
var i = 0;
Object.keys(fileDict).forEach(item => {
formData.append("file" + i, fileDict[item]);
i += 1;
});
$.ajax({
type: 'post',
url: '/upload.php',
enctype: 'multipart/form-data',
processData: false,
contentType: false,
data: formData ,
success: function(data) {
alert(data);
}
});
}
img {
max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="files" class="" type="file" name="file[]" multiple>
<hr>
<input type="button" value="Upload" onclick="upload()">
I am not sure which language you are using for backend. I use PHP here:
<?php
if (count($_FILES) > 4) {
echo "you can select max 4 files.";
} else {
foreach ($_FILES as $file_id => $file) {
if ($file['error'] > 0) {
echo 'Error: ' . $file['error'] . '<br>';
} else {
move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name']);
echo 'uploads/' . $file['name'] . '<br>';
}
}
}

when removing multiple images in an image file is not selected with jQuery

My project has multiple image upload space. I choose 4 pictures. I have selected one of the pictures removed when the file is not selected what is the reason?
<div class="aupload">
<img src="{{ url_for('static', filename='admin/images/upload.png') }}" class="uploadImage" alt="">
<input type="file" id="files" name="files[]" multiple />
</div>
<button type="submit" class="btn form-control btn-default">Kaydet</button>
<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;
$("<div class=\"preview\">" +
"</span><img class=\"uploadImg\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<span class=\"remove\"><i class=\"fa fa-times\"></i>" +
"</div>").insertAfter("#files");
$(".remove").click(function(){
$(this).parent(".preview").remove();
$('#files').val("");
});
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
</script>
What I want to do is: clicking the remove button will remove the uploaded photo and reduce the number of files selected. I'd appreciate it if you could help.

Multiple File Upload To Display File Names Only

I have a need to get the JSFIDDLE DEMO to keep the ability to upload multiple files, but instead displaying the preview, I need to display the multiple file names only.
Here's the JSFIDDLE JS used to upload the files:
$(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\"><i class='fa fa-times'></i></span>" +
"</span>").insertAfter("#files");
$(".remove").click(function() {
$(this).parent(".pip").remove();
});
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File
API")
}
});
In addition, I need to be able to upload only the following file types: .jpg, .png, .pdf, .xlsx and .docx.
Thank for any help!

If you just want to show the file names you don't need to use the img tag. You can change the code as following.
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];
$("<span class=\"pip\">" +
"<br/><span class=\"remove\"><i class='fa fa-times'></i>"+ f.name + "</span>" +
"</span>").insertAfter("#files");
$(".remove").click(function () {
$(this).parent(".pip").remove();
});
}
});
} else {
alert("Your browser doesn't support to File API")
}
And for the 2nd question, you can define the accepted types in your html as
<div class="file-loading">
<input type="file" id="files" name="files[]" multiple accept=".jpg,.png,.pdf,.xlsx,.docx"/>
</div>

Multiple files Uploader jQuery

I am trying to add multiple file uploading functionality to a my website. Basically I have a button "add files" which triggers and appends a input fields of file type which can be used to upload a document.
Both on change and click events are not triggered. Thanks
files = $('.button-container');
fileSerialNumber = 1;
var addFileInputBtn = $('<button class="add-file">+ Add file</button><br><br>')
files.append(addFileInputBtn)
addFileInputBtn.click(function (event) {
event.preventDefault();
addFileInputBtn.text("+ Add another file")
var fileBoxContainer = $('<div class="fileBoxContainer"/><br>')
var fileNameLabel = $('<label style="margin-left: 20px;" for="namefile' + fileSerialNumber + '"> Name: </label>');
var fileName = $('<input class="file-name" name="namefile' + fileSerialNumber + '" type="text"></input>');
var rmButton = $("<button class='remove-button' style='color:grey;'><i class='fa fa-times-circle' aria-hidden='true'></i></button>");
var fileInput = $('<input class="file-input" name="file' + fileSerialNumber + '" type="file"></input>')
fileBoxContainer.append(fileInput);
fileBoxContainer.append(fileNameLabel);
fileBoxContainer.append(fileName);
fileBoxContainer.append(rmButton);
files.append(fileBoxContainer);
debugger
fileInput.on('change', function () {
debugger
var fName = this.value
fName = fName.replace(/.*[\/\\]/, '');
fileName.val(fName);
});
rmButton.click(function (event) {
event.preventDefault();
fileBoxContainer.remove();
});
fileSerialNumber += 1;
})
$('.remove-button').click(function (event) {
event.preventDefault();
$('.fileBoxContainer').remove();
});
<html>
<head>
<script src="https://use.fontawesome.com/f65531ab46.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form class="button-container">
</form>
</body>
</html>

how to copy static uploaded input data to another upload input data in the same html page for firefox

i am trying to upload a file and copy the uploaded data to a upload input button
<input type="file" id="myFile">
<input type="file" id="myFile1">
<script>
var control = document.getElementById("myFile");
control.addEventListener("change", function(event) {
var i = 0, files = control.files;
console.log("Filename: " + files[i].name);
console.log("Type: " + files[i].type);
console.log("Size: " + files[i].size + " bytes");
var control1 = document.getElementById("myFile1");
var i = 0;
control1.files = control.files;
alert(document.getElementById("myFile1").files[0].name);
}, false);
</script>
the above scenario seems to work in chrome but it's not working in firefox and ie