stop attaching files that size more than 5mb to multiple file input

Question

I developed custom multiple file upload feature like follows

this is the whole code for above module

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="file_count"></div>
<input type="file" id="uploadFile" name="FileUpload" multiple="multiple" />
<div id="upload_prev"></div>

Script

var fileCount = 0;

var showFileCount = function() {
  $('#file_count').text('# Files selected: ' + fileCount);
};

showFileCount();

$(document).on('click', '.close', function() {
  $(this).parents('span').remove();
  fileCount -= 1;
  showFileCount();
})

$('#uploadFile').on('change', function() {

  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  var files = $('#uploadFile')[0].files;
  for (var i = 0; i < files.length; i++) 
  {
    if (files[i].size < 5242880) 
    {
       $("#upload_prev").append('<span>' + '<div class="filenameupload">' + files[i].name + ' abc</div>' + '<p class="close" >X</p></span>');
    }
    else
    {
       alert("File size is more than 5MB");
       event.preventDefault();
       false;
    }
  }
  fileCount += files.length;
  showFileCount();
});

CSS

.filenameupload {
  width: 98%;
}

#upload_prev {
  border: thin solid #000;
  width: 65%;
  padding: 0.5em 1em 1.5em 1em;
}

#upload_prev span {
  display: flex;
  padding: 0 5px;
  font-size: 12px;
}

I'm trying to stop files, that size more than 5mb attaching to this 'uploadFile' multiple file input, using above code.

but it can 'append' div items properly and can't stop attaching files(size more than 5mb) to above 'uploadFile' multiple file input

How can I resolve this

EDIT

This is a ASP.NET MVC Application, this is how I'm getting files from backend

[HttpPost]        
public ActionResult SomeAction(ModelClass model)
{
    var attchaedfiles = Request.Files;
    ...
}

@guest271314 yes I want to stop attaching them to this multiple file input — kez, Feb 24 '17 at 18:12
Well since you don't know how large the files are before the user selects them, you can only react to it afterwards. And I don't think preventing the default event action is going to work in that it would remove the selected file again. So you can only alert the user that they have to remove that file again, and perform your check again afterwards on the next change event. — CBroe, Feb 24 '17 at 18:14
@guest271314 I think you''re proposing filter it in server side, actually I want to setup these files from client side, I'm getting these file in server side using following syntax `var attchaedfiles = Request.Files;` — kez, Feb 24 '17 at 18:17
@CBroe how can I remove that file, specifically if its more than 5mb from the list of files ? — kez, Feb 24 '17 at 18:20
You can not manipulate the selection of a file input via script, for security reasons. The user has to remove the file. — CBroe, Feb 24 '17 at 18:22
The alternative would be that you don't use one input with multiple attribute, but add file inputs that take one file each dynamically - then you could just remove a particular input field again, if the user chose a file that is to big. — CBroe, Feb 24 '17 at 18:23
What parts are unclear or you're having trouble with? How to dynamically create new input elements? Well you managed to create and append `span` elements in your code already (although creating invalid HTML, because `span` can not contain `div` or `p` elements), so you should be able to create and append other types of elements as well. How to remove an element via jQuery is something you can easily research yourself, if unknown. Whether you want to bind a change event handler to each created input field individually, or use _event delegation_ to "catch 'em all in one go", is up to you. — CBroe, Feb 24 '17 at 18:36

score 0 · Answer 1 · edited May 23 '17 at 12:32

FileList object referenced by .files property of <input type="file"> element is read-only. You can use .item() method of FileList to to select a single File object at a specific index, though it is not possible to set or remove File object from FileList object. See input file to array javascript/jquery.

You can use FormData, FormData.prototype.append(), XMLHttpRequest() or fetch() to send only files which meet if condition to server.

$('#uploadFile').on('change', function() {
  var fd = new FormData();
  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  var count = 0;
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  var files = $('#uploadFile')[0].files;
  for (var i = 0; i < files.length; i++) 
  {
    if (files[i].size < 5242880) 
    {
       $("#upload_prev").append('<span>' + '<div class="filenameupload">' + files[i].name + ' abc</div>' + '<p class="close" >X</p></span>');
       fd.append("file-" + (count++), files[i])
    }
  }
  var request = new XMLHttpRequest();
  request.open("POST", "/path/to/server", true);
  request.send(fd);
  fileCount = Array.from(fd.keys()).length;
  showFileCount();
});

@kez Yes, substitute path to server where file is uploaded. You could also attach `load`, `error` handlers at `XMLHttpRequest` object. — guest271314, Feb 25 '17 at 04:22
no I have no Idea to bind these validated result send thoes to above C# post method — kez, Feb 25 '17 at 04:40

stop attaching files that size more than 5mb to multiple file input

1 Answers1