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.!

Member Avatar for LastMitch

@unikorndesigns

The images and drag and drop are getting uploaded but no videos are.

There's a difference from uploading a video to a destination folder rather saving it as a db. It's much easier uploading the video to a folder rather than uploading to the folder and saving the video in the db. You are making this a bit complicate than it should be.

My advice just upload the video to the destination folder. Then upload the images separately.

Is this path correct:

$upload_dir = '../../uploads/';
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.