JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://hayageek.com/examples/jquery/jquery-multiple-file-upload/tags/preview/uploadfile.css">
<script src="http://hayageek.com/examples/jquery/jquery-multiple-file-upload/tags/preview/jquery.uploadfile.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <form action="" id="contact-form" class="form-horizontal">
    <fieldset>
    <legend>Sample Contact Form <small>(will not submit any information)</small></legend>
    <div class="control-group">
    <label class="control-label" for="name">Your Name</label>
    <div class="controls">
    <input type="text" class="input-xlarge" name="name" id="name">
    </div>
    </div>
    <div class="control-group">
    <label class="control-label" for="email">Email Address</label>
    <div class="controls">
    <input type="text" class="input-xlarge" name="email" id="email">
    </div>
    </div>
    <div class="control-group">
    <label class="control-label" for="subject">Subject</label>
    <div class="controls">
</div>

<div class="help-desk"></div>

<hr>
Hello
<hr>
Hello
<div class="control-group" id="control-group"></div>
    </div>
    <div class="control-group">
    <label class="control-label" for="message">Your Message</label>
    <div class="controls">
    <textarea class="input-xlarge" name="message" id="message" rows="3"></textarea>
    </div>
    </div>
    <div class="form-actions">
    </div>
    </fieldset>
    </form>
        <div id="mulitplefileuploader">Upload</div>
<div id="status"></div>

        <button type="button" id="submit-button" class="btn btn-primary btn-large">Submit the Data</button>
    <button type="reset" class="btn">Cancel</button>

JavaScript

$(document).ready(function(){
 
var vobj = $('#contact-form').validate(
{
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
subject: {
minlength: 2,
required: true
},
message: {
minlength: 2,
required: true
}
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
element
.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});



		$("#uploadAll").hide();
var settings = {
    url: "../upload.php",
    dragDrop:true,
    fileName: "myfile",
	returnType:"json",
	autoSubmit:false,
	onSelect:function()
	{
		//show uploadAll
		
		$("#uploadAll").show();
	
	},
	afterUploadAll:function()
	{
		$("#status").append("Uploaded Files<br>");
		console.log("Files Uploaded");
		
	},
	showQueueDiv:"control-group",
	showDelete:true,
    deleteCallback: function(data,pd)
	{
    for(var i=0;i<data.length;i++)
    {
        $.post("http://hayageek.com/examples/jquery/jquery-multiple-file-upload/delete.php",{op:"delete",name:data[i]},
        function(resp, textStatus, jqXHR)
        {
            //Show Message  
            $("#status").append("<div>File Deleted</div>");      
        });
     }      
    pd.statusbar.hide(); //You choice to hide/not.

	}

}
var uploadObj = $("#mulitplefileuploader").uploadFile(settings);


     $("#submit-button").click(function()
                              {
                               if(vobj.form())
                               {
                                   if(uploadObj.fileCounter != 1)
		                            uploadObj.startUpload();
	                    else
		                alert("No fiels selected");
                                   
                               }
                              });   
    
    
});