Drag-n-drop

Drag-n-drop

Hi,
I am using a drag-n-drop method for file upload and insert into database. The images are uploading successfully and also insert into database. But when I add an input field to that form , the input field is not sending the data. The column st_name in the database table is blank. Please help me.

My full codes:

index.php-

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image upload</title>
<link href=' http://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/multiupload.js"></script>
<script type="text/javascript">
var config = {
support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif,application/pdf,application/msword,text/plain", // Valid file formats
form: "demoFiler", // Form ID
dragArea: "dragAndDropFiles", // Upload Area ID
uploadUrl: "upload.php" // Server side upload url
}
$(document).ready(function(){
initMultiUploader(config);
});
</script>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body lang="en">
<center><h1 class="title">Multiple Drag and Drop File Upload</h1></center>
<div id="dragAndDropFiles" class="uploadArea">
<h1>Drop Images Here</h1>
</div>
<form method="post" name="demoFiler" id="demoFiler" enctype="multipart/form-data">
<input type="text" name="st_name" id="st_name" value="" placeholder="Student Name" />
<input type="file" name="multiUpload" id="multiUpload" multiple />
<input type="submit" name="submitHandler" id="submitHandler" value="Upload" class="buttonUpload" />
</form>
<div class="progressBar">
<div class="status"></div>
</div>
</body>
</html>

upload.php-

<?php
mysql_select_db("signup",mysql_connect("localhost","root",""));
if($_SERVER['REQUEST_METHOD'] == "POST"){
move_uploaded_file($_FILES['file']['tmp_name'], "uploads/".$_FILES['file']['name']);
$st_name=$_POST['st_name'];
mysql_query("INSERT INTO `signup`.`multi_upload` (`id`, `st_name`, `file_img`) VALUES (NULL, ' $st_name', '".$_FILES['file']['name']."')");
echo $_POST['index'];
}
?>

multiupload.js-

function multiUploader(config){
  
this.config = config;
this.items = "";
this.all = []
var self = this;
multiUploader.prototype._init = function(){
if (window.File && 
window.FileReader && 
window.FileList && 
window.Blob) {
var inputId = $("#"+this.config.form).find("input[type='file']").eq(0).attr("id");
document.getElementById(inputId).addEventListener("change", this._read, false);
document.getElementById(this.config.dragArea).addEventListener("dragover", function(e){ e.stopPropagation(); e.preventDefault(); }, false);
document.getElementById(this.config.dragArea).addEventListener("drop", this._dropFiles, false);
document.getElementById(this.config.form).addEventListener("submit", this._submit, false);
document.getElementById(this.config.form).addEventListener("text", this._text, false);
} else
console.log("Browser supports failed");
}
multiUploader.prototype._submit = function(e){
e.stopPropagation(); e.preventDefault();
self._startUpload();
}
multiUploader.prototype._preview = function(data){
this.items = data;
if(this.items.length > 0){
var html = "";
var uId = "";
  for(var i = 0; i<this.items.length; i++){
uId = this.items[i].name._unique();
var sampleIcon = '<img src="images/image.png" />';
var errorClass = "";
if(typeof this.items[i] != undefined){
if(self._validate(this.items[i].type) <= 0) {
sampleIcon = '<img src="images/unknown.png" />';
errorClass =" invalid";
} 
html += '<div class="dfiles'+errorClass+'" rel="'+uId+'"><h5>'+sampleIcon+this.items[i].name+'</h5><div id="'+uId+'" class="progress" style="display:none;"><img src="images/ajax-loader.gif" /></div></div>';
}
}
$("#dragAndDropFiles").append(html);
}
}

multiUploader.prototype._read = function(evt){
if(evt.target.files){
self._preview(evt.target.files);
self.all.push(evt.target.files);
} else 
console.log("Failed file reading");
}
multiUploader.prototype._validate = function(format){
var arr = this.config.support.split(",");
return arr.indexOf(format);
}
multiUploader.prototype._dropFiles = function(e){
e.stopPropagation(); e.preventDefault();
self._preview(e.dataTransfer.files);
self.all.push(e.dataTransfer.files);
}
multiUploader.prototype._uploader = function(file,f){
if(typeof file[f] != undefined && self._validate(file[f].type) > 0){
var data = new FormData();
var ids = file[f].name._unique();
data.append('file',file[f]);
data.append('index',ids);
$(".dfiles[rel='"+ids+"']").find(".progress").show();
$.ajax({
type:"POST",
url:this.config.uploadUrl,
data:data,
cache: false,
contentType: false,
processData: false,
success:function(rponse){
$("#"+ids).hide();
var obj = $(".dfiles").get();
$.each(obj,function(k,fle){
if($(fle).attr("rel") == rponse){
$(fle).slideUp("normal", function(){ $(this).remove(); });
}
});
if (f+1 < file.length) {
self._uploader(file,f+1);
}
}
});
} else
console.log("Invalid file format - "+file[f].name);
}
multiUploader.prototype._startUpload = function(){
if(this.all.length > 0){
for(var k=0; k<this.all.length; k++){
var file = this.all[k];
this._uploader(file,0);
}
}
}
String.prototype._unique = function(){
return this.replace(/[a-zA-Z]/g, function(c){
        return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
    });
}

this._init();
}

function initMultiUploader(){
new multiUploader(config);
}


Thanks,
Alok Routray