JavaScript File Upload Size Validation

JavaScript file upload size validation

Yes, you can use the File API for this.

Here's a complete example (see comments):

document.getElementById("btnLoad").addEventListener("click", function showFileSize() {
    // (Can't use `typeof FileReader === "function"` because apparently it
    // comes back as "object" on some browsers. So just see if it's there
    // at all.)
    if (!window.FileReader) { // This is VERY unlikely, browser support is near-universal
        console.log("The file API isn't supported on this browser yet.");
        return;
    }

    var input = document.getElementById('fileinput');
    if (!input.files) { // This is VERY unlikely, browser support is near-universal
        console.error("This browser doesn't seem to support the `files` property of file inputs.");
    } else if (!input.files[0]) {
        addPara("Please select a file before clicking 'Load'");
    } else {
        var file = input.files[0];
        addPara("File " + file.name + " is " + file.size + " bytes in size");
    }
});

function addPara(text) {
    var p = document.createElement("p");
    p.textContent = text;
    document.body.appendChild(p);
}

body {
    font-family: sans-serif;
}

<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load'>
</form>

Validate upload file size with add more button functionality using javascript

A good practice is searching before making a question here because there are a lot of awesome answers. StackOverflow is a great repository of guidance.

Look this question, It has answered very well:

JavaScript file upload size validation

You can adapt your code to make this validation.

Simple Example:

https://jsfiddle.net/klassmann/3puwba2v/2/

HTML:

<div id="myFiles">
  <input type="file">
</div>
<button id="btnAdd">Add</button>

Javascript:

function fileValidation(e){
    console.log();
  var filelist = $(this).get(0).files;
  var firstfile = filelist[0];

  var filesize = (firstfile.size / 1024) / 1024;

  if (filesize > 3.0) {
    alert('File has more than 3MB');
  } else {
    alert('File is valid.');
  }

}

$("input[type=file]").on('change',fileValidation);

$("#btnAdd").on('click', function(){
    var $newFile = $("<input type='file'>");
  $newFile.on('change', fileValidation);
    $("#myFiles").append($newFile);
});

Cheers.

File Type and Size Validation while Uploading it using JavaScript

There are two combined reasons for this:

1. You return on the first of the two functions in the onchange. This stops javascript from calling SizeValidation1(). Therefore the code in SizeValidation1 is never called.

You use:

<input type="file" id="image1" onchange="return TypeValidation1(); SizeValidation1();" />

instead use:

<input type="file" id="image1" onchange="TypeValidation1(); SizeValidation1();" />

2. In the for-loop you use 'const' to define i. This should be 'var' since you in the next run of the loop vil override the value of i.

You use:

for (const i = 0; i <= fi.files.length - 1; i++) { 

Instead use:

for (var i = 0; i <= fi.files.length - 1; i++) { 

I hope this will be of help to you. Have a great day :-)

Is possible to validate file size and extension before upload at the same time?

When you select a File from the File Selector Dialog u get a Files Array Object. This object is having information about the File. You can access single File like.

this.files[0]

To Access Size. You can use

this.files[0].size.

Combining file size check and file type check - JS validation

Here is what you can do, create and manage an array of errors, and use it at the end. Click run to see the demo

$(document).ready(function() {

  $('input[type=file]').change(function() {

    var file = this.files[0],

        val = $(this).val().trim().toLowerCase();

    if (!file || $(this).val() === "") { return; }

    

    var fileSize = file.size / 1024 / 1024,

        regex = new RegExp("(.*?)\.(png|jpg|jpeg|gif)$"),

        errors = [];

    

    if (fileSize > 5) {

      errors.push("Please check the size of your image");

    }

    if (!(regex.test(val))) {

      errors.push('Only image files are supported. Please check the format of your file and try again.');

    }

    if (errors.length > 0) {  

      $(this).val('');

      alert(errors.join('\r\n'));

    }

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" />

---

Related Topics