I am using JQuery file upload demo for my next project with Codeigniter. Can anyone tell me how do I achieve the following :
Help appreciated !!
you probably have a plethora of solutions now, however I wanted to use the BASIC plugin for the jquery uploader, i.e. without any other scripts.. for some reason the maxFileSize/fileTypes options were not working - however that is mostly no doubt to my lack of reading the documentation!
Anyway for me, it was as quick as doing the following:
add: function (e, data) { var goUpload = true; var uploadFile = data.files[0]; if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(uploadFile.name)) { common.notifyError('You must select an image file only'); goUpload = false; } if (uploadFile.size > 2000000) { // 2mb common.notifyError('Please upload a smaller image, max size is 2 MB'); goUpload = false; } if (goUpload == true) { data.submit(); } }, So just using the ADD option to only allow the image types in the regex, and checking (in my case) the file size is a max of 2mb.
Rather basic, and again I am sure the maxFileSize options work, just I am only including the basic plugin script jquery.fileupload.js
EDIT I should have added in my case I am uploading just one file (a profile image) so hence the data.files[0].. you could iterate through the files collection of course.
add is run per file. Therefore data.submit is only referring to one file.
In jquery.fileupload-ui.js edit this part:
$.widget('blueimp.fileupload', $.blueimp.fileupload, { options: { // The maximum allowed file size: maxFileSize: 100000000, // The minimum allowed file size: minFileSize: undefined, // The regular expression for allowed file types, matches // against either file type or file name: acceptFileTypes: /(zip)|(rar)$/i, ---------------------------------------------------------------- To clear the list of uploaded files - Remove the $.getJSON call from main.js if you don't need that functionality.
According to the official documentation;
$('#file_upload').fileUploadUIX({ maxFileSize: 5000000, // Maximum File Size in Bytes - 5 MB minFileSize: 100000, // Minimum File Size in Bytes - 100 KB acceptFileTypes: /(zip)|(rar)$/i // Allowed File Types }); One other way to do is as follows.
$('#upload').fileupload({ change: function (e, data) { if (!(/\.(jpg|jpeg|png|pdf)$/i).test(data.files[0].name)) { alert('Not Allowed'); return false; } } }); try looking at this line :
process: [ /* { action: 'load', fileTypes: /^image\/(gif|jpeg|png)$/, maxFileSize: 20000000 // 20MB }, { action: 'resize', maxWidth: 1920, maxHeight: 1200, minWidth: 800, minHeight: 600 }, in jquery.fileupload-fp.js
