File Upload Validation Using jQuery

In this blog we will see client side validation for asp:FileUpload control. Many times we need to upload files in SharePoint list/library using visual web part. If we want to check file size of selected files then you can use below code.

If we directly use asp:FileUpload then it will allow you to select files from some specific location. If we used jquery file upload then it allows user to select files from different locations.

Below are the jquery files that are required. Download it from library and save it in location from where you can give reference.

<script type="text/javascript" src="/Documents/Project/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/Documents/Project/jquery.MultiFile.js"></script>

I have careted one visual web part and in that I have added "asp:FileUpload" control. I have added CssClass="multi" to file control for jquery functionality.

Below is the HTML For the same. Currently I have checked for 2 MB size.

<div class="form-group" id="Attachment">
<div class="col-sm-2"> <label for="Attachment">Attachments:</label> </div>
<div class="col-sm-4">
<asp:FileUpload ID="fuITRequestAttachment" CssClass="multi" runat="server" /> <span>Max file size is 2MB</span> </div>
<div class="col-sm-4" id="fileAttachments" runat="server"> </div>
</div>
<asp:Button ID="btnSave" runat="server" CssClass="btn btn-primary" Text="Submit" OnClientClick="javascript:return validate();" OnClick="btnSave_Click1" />

Validate function will get executed when we click on Submit button. I have written code to check file size in validate function.

Whenever we upload file in file upload control (with jquery multifile) then input:file control gets created dynamically at run time based on number of files selected.

So in the below code I have taken all input : file control and checked size of files. For now I have used file size 2 MB.

function validate() {
var validate = false;
$('.MultiFile-wrap').each(function() {
var file = $("input:file");
if (file.length > 1) {
for (var i = 0; i < file.length; i++) {
var x = $("#[id=" + file[i].id + "]");
if (x != undefined) {
if (x[0].files != undefined) {
if (x[0].files[0].size > 2097152) {
alert('Please select file size less than 2 MB');
validate = false;
break;
}
}
}
}
}
});
return validate;
}

After size validation I have saved all files in SharePoint list item attachment. Below is the code for that

open .ascx.cs file and add below code on button click event

protected void btnSave_Click1(object sender, EventArgs e) {
try {
SPSite site = new SPSite(SPContext.Current.Web.Url);
using(SPWeb web = site.OpenWeb()) {
SPList lst = web.Lists.TryGetList("ListName");
SPListItem item = lst.Items.Add();
item["Title"] = "File upload";
if (HttpContext.Current.Request.Files.Count > 0) {
SPAttachmentCollection attach = item.Attachments;
for (var i = 0; i < HttpContext.Current.Request.Files.Count; i++) {
HttpPostedFile file = HttpContext.Current.Request.Files[i] as HttpPostedFile;
string strFileName = file.FileName;
if (!string.IsNullOrEmpty(strFileName)) {
Stream fStream = file.InputStream;
byte[] binFile = new byte[file.ContentLength];
fStream.Read(binFile, 0, binFile.Length);
attach.Add(strFileName, binFile);
fStream.Close();
fStream.Dispose();
}
}
}
item.Update();
}
} catch (Exception ex) {
throw;
}
}

Build and deploy above web part and check validation for file size.