jQuery File Upload - validate filesize and extension

Question

I'm using jQuery File Upload, my code is:

$(function(){

        var ul = $('#upload ul');
     // Initialize the jQuery File Upload plugin
        $('#upload').fileupload({
            maxFileSize: 500,
            acceptFileTypes:  /(\.|\/)(gif|jpe?g|png)$/i,
            formData: {
                action: 'ja_upload_doc',
                cv_id: $('#cv_id').val(),
                first_name: $('#first_name').val(),
                last_name: $('#last_name').val(),
            },
            // This element will accept file drag/drop uploading
            dropZone: $('#drop'),

            // This function is called when a file is added to the queue;
            // either via the browse button, or via drag/drop:
            add: function (e, data) {

                // Automatically upload the file once it is added to the queue
                var jqXHR = data.submit().success(function (result, textStatus, jqXHR) {
                    console.log('Done');
               });
            },

            progress: function(e, data){
            },
            done:function(e, data){

                console.log(data);
            },
            fail:function(e, data){
                // Something has gone wrong!
                data.context.addClass('error');
            }

        });

    });

I'm including

• jquery.ui.widget.js
• jquery.iframe-transport.js
• jquery.fileupload.js
• jquery.fileupload-ui.js
• jquery.fileupload.css

Is there anything else I need to include to make the Validation work? Or is there something wrong with my code?

Answer 1

You need to include jquery.fileupload-process.js and jquery.fileupload-validate.js files in this order to be able to validate.

Answer 2

To validate filesize just use: maxFileSize

maxFileSize: 500 // in byte 1024 * 1024 = 1Mb // for maximum size
minFileSize: 1   // in byte also

and to validate extension use : acceptFileTypes

acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i

for more information read about this option

Answer 3

      <script type = "text/javascript">
        var counter = 0;
        function AddFileUpload() {
        var div = document.createElement('DIV');
        div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +
         '" type="file" />' +'<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value=""  />' +
          '<input id="Button' + counter + '" type="button" ' +
          'value="Remove" onclick = "RemoveFileUpload(this)" />';
            document.getElementById("FileUploadContainer").appendChild(div);
            counter++;
        }
    function RemoveFileUpload(div) {
            document.getElementById("FileUploadContainer").removeChild(div.parentNode);
    }
    </script>

 html codes ////////////
 <div>
    <asp:Label ID="lblError" runat="server" Font-Bold="true" ForeColor="Red"> </asp:Label><br />
  <span style="font-family:Arial"><span style="color: #003366">&nbsp;Click to add files</span></span>
 <input id="Button1" onclick="AddFileUpload()" 
 style="height: 27px; width: 74px;" tabindex="25" type="button" value="add" /><br /> <br /><br />
  <div id="FileUploadContainer">
  <asp:FileUpload ID="FileUpload1" runat="server" />
  <input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value=""  />
  <!--FileUpload Controls will be added here -->
                                                                                          </div>                                                                                         <br />                                                                                         <br />                                                                                          <br />
<asp:Button ID="btnUpload" runat="server" Text="Upload" onclick="btnUpload_Click" />
<br /><br />
/<TD>
    </div>