Check length of number of files uploaded using JavaScript - javascript

I have multiple browse button. I want to show Apply button when I upload file from at least 4 browse button. I can check length of file when I upload file from single browse button. But how can I check files length when I upload files from multiple uploads.
Here is my HTML code:
<input type="file" class="files" name="file" /> Read bytes:
<input type="file" class="files" name="file" /> Read bytes:
<input type="file" class="files" name="file" /> Read bytes:
<input type="file" class="files" name="file" /> Read bytes:
<span class="readBytesButtons">
<button>Apply</button>
</span>
Here is my JavaScript code:
var allFiles = document.getElementsByClassName('files');
if (allFiles.length > 4) {
alert('Please select a file!');
} else {
// code to show apply button
}
It's not working well. How can I found the length of total uploaded file?

You can add an event listener to the "change" event of the input elements.
When this event is triggered, you can loop the fileElements and check the number of files using files.length.
You can then keep track of the number of elements that have more than 0 files.
If all elements have an uploaded file, you can enable the button.
For example:
var fileElements = document.getElementsByClassName('files');
for (var i = 0; i < fileElements.length; i++) {
fileElements[i].addEventListener("change", countFiles);
}
function countFiles() {
var elementsWithFiles = 0;
for (var j = 0; j < fileElements.length; j++) {
if (fileElements[j].files.length > 0) {
elementsWithFiles++;
}
}
if (elementsWithFiles > fileElements.length -1) {
document.getElementById("readBytesButtons").style.display = "block";
}
}
.readBytesButtons {
display: none;
}
<form id="" name="">
<input type="file" class="files" name="file"/> Read bytes:
<input type="file" class="files" name="file"/> Read bytes:
<input type="file" class="files" name="file"/> Read bytes:
<input type="file" class="files" name="file"/> Read bytes:
<span class="readBytesButtons" id="readBytesButtons">
<button>Apply</button>
</span>
</form>

If you want to check the amount of files inserted you most likely would need to add an event listener to each of the file inputs. Then increasing when an file gets inserted and then check if the required amound is added you would probably end up with something like this:
var insertedFiles = 0;
var allFileElements = document.getElementsByClassName('files');
for (var i = allFileElements.length - 1; i >= 0; i--) {
allFileElements[i].addEventListener("change",check);
};
function update(){
if(this.value == "") {
insertedFiles--;
} else {
insertedFiles++;
}
check();
}
function check(){
if(insertedFiles > 4){
alert("Show button.");
} else {
alert("You need to add more files.");
}
}
fiddle: https://jsfiddle.net/aL0qhoe0/2/

Related

Javascript - My preview delete the file in my input

I had a form like this :
<form action="assets/php/test.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
<div id="imgcont" hov="url('../data/img.svg')" >
<input type="file" name="clue" value=" " id="img" accept=".png,.jpg,.jpeg">
</div>
<input type="text" name="message" id="message">
<input type="submit" name="submit" value="" id="send">
</form>
And I don't know why but he always return an empty Array like this :
Array ( [clue] => Array ( [name] => [type] => [tmp_name] => [error] => 4 [size] => 0 ) ) 0
-The name of the input file is good
-Here is no other iteartion of this name in my code
I rewrite the code to delete all unusefull things
<form action="assets/php/Send_Message.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="clue" id="fileToUpload" value=" " id="img" accept=".png,.jpg,.jpeg" >
<input type="text" name="message" id="message">
<input type="submit" value="" name="submit">
</form>
<?php
print_r($_POST);
echo '</br>';
print_r($_FILES);
?>
-The file is here because I use JS to show a preview of this image
function updateImageDisplay() {
var curFiles = input.files;
if(curFiles.length === 0) {
preview.style.backgroundColor = "#ff4c42";
} else {
for(var i = 0; i < curFiles.length; i++) {
if(validFileType(curFiles[i])) {
var image = document.createElement('img');
image.src = window.URL.createObjectURL(curFiles[i]);
} else {
console.log("File Type Not Valid");
}
preview.style.backgroundImage = "url("+image.src+")"
preview.innerHTML += '<span onclick="Reinit()" class="delete" id="cl" >X</span>' ;
}
}
}
var fileTypes = [
'image/jpeg',
'image/pjpeg',
'image/png'
]
function validFileType(file) {
for(var i = 0; i < fileTypes.length; i++) {
if(file.type === fileTypes[i]) {
return true;
}
}
return false;
}
the problem comes from this two lines in my js
var image = document.createElement('img');
image.src = window.URL.createObjectURL(curFiles[i]);
It's like my js just take the imlage and not copying it.
Make sure the php.ini directives upload_max_filesize, post_max_size are larger than the file you are trying to upload. Also make sure that file_uploads isset to 1 and max_file_uploads to something larger than 0.
This error may also occur if you have nested multiple forms inside each other.

How to get the date from the uploaded image?

Image upload form uses following code:
<input type="file" name="file" id="Images" title="Please upload image(Jepg, Png)" accept="image/*">
I would like to extract the date of the image file which i just uploaded.
<span id="ImageDate"></span>
You could do something like this by using .lastModifiedDate in javascript
$("#Images").change(function() {
for(var i = 0; i < this.files.length; i++) {
var file = this.files[i];
var modifiedDate = file.lastModifiedDate + "<br />";
$("#ImageDate").append(modifiedDate);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="file" id="Images" title="Please upload image(Jepg, Png)" accept="image/*">
<br />
<span id="ImageDate"></span>

How to check the file input to know if it's empty in node.js

I'm trying to check whether the user has actually chosen a file before pressing on upload or not, if so then check if the file is bigger than 4 MB. If the user has pressed on upload without choosing a file then a message should be sent telling them to go back and choose a file. But this code doesn't seem to work.
<div id="postUpload-wrapper">
<form id="uploadpost-form" action="/uploadpost" enctype="multipart/form-data" method="POST">
<input type="text" id="postname" placeholder="Title" name="postname">
<br>
<input id="fileupload" type="file" name="image">
<br>
<input type="submit" id "uploadpost-btn" value="Upload" name="uploadpost">
</form>
</div>
//UPLOAD A POST
router.post('/uploadpost', upload.single('image'), function(req, res){
var errors = "";
if(req.body.postname === ""){
errors += "Write a title";
res.send(errors);
return false;
}
//problem here
if(req.file.size === 0){
errors += "You need to choose a file";
res.send(errors);
return false;
}else{
if(req.file.size > 4000000){
errors += "Files can only be up to 4 MB in size";
res.send(errors);
return false;
}
}
Try setting input type="submit" element property disabled to "true" , use onchange event of input type="file" element to check if user selected file at FileList object , set type="submit" element to disabled="true" , disabled="false" if file.size greater than 4000000 bytes . If file not selected , file size over 4000000 bytes submit button set to disabled
var input = document.getElementById("fileupload");
input.onchange = function() {
var file = this.files, submit = this.nextElementSibling.nextElementSibling;
if (file.length > 0) {
if (file[0].size >= 4000000) {
submit.disabled = true;
alert("file size limit")
} else {
submit.disabled = false;
console.log(this.files)
}
}
}
<div id="postUpload-wrapper">
<form id="uploadpost-form" action="/uploadpost" enctype="multipart/form-data" method="POST">
<input type="text" id="postname" placeholder="Title" name="postname">
<br>
<input id="fileupload" type="file" name="image">
<br>
<input type="submit" id="uploadpost-btn" value="Upload" name="uploadpost" disabled="true">
</form>
</div>
I believe you should check this on the client side before allowing the file to be uploaded.
if(document.getElementById("uploadpost-btn").value != "") {
// you have a file
}
You can later check on the server-side. If req.body has any data then there was a file uploaded.

How can I get files by javascript and post send for ajax

I have this form in html for multiple file uploading .
<form class="userform" method="post" action="upload.php" role="form" enctype="multipart/form-data" >
<input name="title" type="text" ><br/>
<input type="file" name="media[]" >
<div class="filesupload">
<input type="file" name="media[]" >
</div>
<script>
$(document).on("click",".add-new-file",function()
{
$('.filesupload').append('<input name="media[]" type="file" >');
});
</script>
</form>
I will get input files by javascript and send to upload.php for uploading. but I don't know how to get files values in javascript.
If you using HTML5
var fileList = document.getElementById("yourInput").files;
for(var i = 0; i < fileList.length; i++) {
//Do something with individual files
}
Using jquery
$("input[name=file1]").change(function() {
var names = [];
for (var i = 0; i < $(this).get(0).files.length; ++i) {
names.push($(this).get(0).files[i].name);
}
$("input[name=file]").val(names);
});​

how to get data from multiple inputs using javascript

I have multiple inputs, I need with one button to upload all files from all the inputs (image and/or video), I found a code on web, but I can't find a way to upload or get all my files.
I am new to this procedure and unable to figure out the problem (maybe the .get() function is not right).
How to get all the files from all the inputs in one button click?..
HTML:
<div id="back" class="back">
<label id="addPicture" onclick="locatePicture(this)"
style="color:white;font-size:larger"
for="theInput">Add Image</label>
<div style="float: left">
<input id="theInput" type='file' />
</div>
<div style="float: right">
<label id="addVideo" for="uploadFileVideo" style="color:white;font-size:larger" class="AjaxList_Button">Add Video</label>
<input id="uploadFileVideo" type='file' />
</div>
</div>
<input type='Button' ID='saveAllElements' value='Done' OnClick='saveMedia()' Text='Done' />
Javascript - code found on web
function saveMedia()
{
var xhr = new XMLHttpRequest();
var data = new FormData();
var files = $(".back").get(0).files;
alert(files.length);
if (files.length == 0)
{
alert("No files");
}
else
{
for (var i = 0; i < files.length; i++)
{
data.append(files[i].name, files[i]);
}
xhr.open("POST", "UploadHandler.ashx");
xhr.send(data);
}
};

Categories

Resources