Hi I have modified the dropbox script with the following
<script type="text/javascript">
$(function(){
var dropbox = $('#dropbox'),
message = $('.message', dropbox);
dropbox.filedrop({
// The name of the $_FILES entry:
paramname:'userfile',
maxfiles: 10,
maxfilesize: 50,
url: '<?php echo base_url();?>ajax/post_file.php',
uploadFinished:function(i,file,response){
$.data(file).addClass('done');
// response is the JSON object that post_file.php returns
},
error: function(err, file) {
switch(err) {
case 'BrowserNotSupported':
showMessage('Your browser does not support HTML5 file uploads!');
break;
case 'TooManyFiles':
alert('Too many files! Please select 5 at most! (configurable)');
break;
case 'FileTooLarge':
alert(file.name+' is too large! Please upload files up to 2mb (configurable).');
break;
default:
break;
}
},
// Called before each upload is started
/* beforeEach: function(file){
if(!file.type.match(/^image\//)){
// alert('Only images are allowed!');
///$('div#dropbox.uploaded').css('background','url("<?php echo base_url();?>images/filedrop/mp3.png") no-repeat center center rgba(255,255,255,0.5)');
// Returning false will cause the
// file to be rejected
// return false;
}
},*/
uploadStarted:function(i, file, len){
createImage(file);
},
progressUpdated: function(i, file, progress) {
$.data(file).find('.progress').width(progress);
}
});
var template = '<div class="preview">'+
'<span class="imageHolder">'+
'<img />'+
'<span class="uploaded"></span>'+
'</span>'+
'<div class="progressHolder">'+
'<div class="progress"></div>'+
'</div>'+
'</div>';
function createImage(file){
var preview = $(template),
image = $('img', preview);
var reader = new FileReader();
image.width = 100;
image.height = 100;
reader.onload = function(e){
// e.target.result holds the DataURL which
// can be used as a source of the image:
alert(e.target.result);
if (e.target.result.indexOf("data:image") >= 0)
image.attr('src',e.target.result);
if (e.target.result.indexOf("data:audio") >= 0)
image.attr({
'src':'<?php echo base_url();?>images/filedrop/mp3.png',
'style':'border: none;'
});
if (e.target.result.indexOf("data:video") >= 0)
image.attr({
'src':'<?php echo base_url();?>images/filedrop/video.png',
'style':'border: none;'
});
};
// Reading the file as a DataURL. When finished,
// this will trigger the onload function above:
reader.readAsDataURL(file);
message.hide();
preview.appendTo(dropbox);
// Associating a preview container
// with the file, using jQuery's $.data():
$.data(file,preview);
}
function showMessage(msg){
message.html(msg);
}
});
</script>
and my post_file.php looks like this
<?php
// If you want to ignore the uploaded files,
// set $demo_mode to true;
$demo_mode = false;
$upload_dir = '../../uploads/';
$allowed_ext = array('jpg','jpeg','png','gif','mp3','ogg','mp4','pdf', 'zip', 'docx', 'doc', 'xls', 'ppt', 'wav', 'wmv', 'mpeg', 'mpg', 'mpe', 'mov', 'avi', '3gp', 'css', 'jsc', 'js', 'php', 'htm', 'html');
if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
exit_status('Error! Wrong HTTP method!');
}
if(array_key_exists('userfile',$_FILES) && $_FILES['userfile']['error'] == 0 ){
$userfile = $_FILES['userfile'];
if(!in_array(get_extension($userfile['name']),$allowed_ext)){
exit_status('Only '.implode(',',$allowed_ext).' files are allowed!');
}
if($demo_mode){
// File uploads are ignored. We only log them.
$line = implode(' ', array( date('r'), $_SERVER['REMOTE_ADDR'], $userfile['size'], $userfile['name']));
file_put_contents('log.txt', $line.PHP_EOL, FILE_APPEND);
exit_status('Uploads are ignored in demo mode.');
}
// Move the uploaded file from the temporary
// directory to the uploads folder:
if(move_uploaded_file($userfile['tmp_name'], $upload_dir.$userfile['name'])){
// connect to the mysql server
$link = mysql_connect("localhost", "root", "")
or die ('Could not connect to mysql because '.mysql_error());
// select the database
mysql_select_db("mis_revamp")
or die ('Could not select database because '.mysql_error());
$media_type=get_mime_type($upload_dir.$userfile['name']);
$query1="SELECT * FROM media WHERE media_filename='".$userfile['name']."'";
$result1=mysql_query($query1);
$numrows1=mysql_num_rows($result1);
mysql_query("INSERT INTO media VALUES ('','".$userfile['name']."','".filesize("../../uploads/".$userfile['name'])."','../uploads/','".$media_type."',CURDATE())");
$query1="SELECT * FROM media WHERE media_filename='".$userfile['name']."'";
$result1=mysql_query($query1);
$numrows1=mysql_num_rows($result1);
while($row=mysql_fetch_array($result1))
{
$id=$row['media_id'];
}
exit_status('File was uploaded successfuly!');
}
}
exit_status('Something went wrong with your upload!');
// Helper functions
function exit_status($str){
echo json_encode(array('status'=>$str));
exit;
}
function get_extension($file_name){
$ext = explode('.', $file_name);
$ext = array_pop($ext);
return strtolower($ext);
}
function get_mime_type($file) {
// our list of mime types
$mime_types = array(
"pdf"=>"application/pdf",
"exe"=>"application/octet-stream",
"zip"=>"application/zip",
"docx"=>"application/msword",
"doc"=>"application/msword",
"xls"=>"application/vnd.ms-excel",
"ppt"=>"application/vnd.ms-powerpoint",
"gif"=>"image/gif",
"png"=>"image/png",
"jpeg"=>"image/jpg",
"jpg"=>"image/jpg",
"mp3"=>"audio/mpeg",
"wav"=>"audio/x-wav",
"wmv"=>"video/x-ms-wmv",
"mpeg"=>"video/mpeg",
"mpg"=>"video/mpeg",
"mpe"=>"video/mpeg",
"mov"=>"video/quicktime",
"avi"=>"video/x-msvideo",
"3gp"=>"video/3gpp",
"css"=>"text/css",
"jsc"=>"application/javascript",
"js"=>"application/javascript",
"php"=>"text/html",
"htm"=>"text/html",
"html"=>"text/html"
);
$extension = strtolower(end(explode('.',$file)));
$type=explode("/",$mime_types[$extension]);
return $type[0];
}
?>
For some reason I am not able to add any video files. I am doing the file upload with PHP via AJAX. The images and drag and drop are getting uploaded but no videos are. Please i need some assistance urgently. Thanks.!