Question

I’ve been creating a HTML5 Drag & Drop image up-loader. All is good with the Javascript side of things however the PHP is driving me crazy!

I’ve been able to create a script that successfully places a image in a folder upon the drop of an image, however once it tries to create a thumb nail for the image and place the image link into the users db table it all goes to pot. I’ve sat here for hours on end, trying and trying to no avail, so i believe as it is now just about 3am GMT i should admit defeat and ask for a little help.

The JavaScript:

$(function(){

var dropbox = $('#dropbox'),
    message = $('.message', dropbox);

dropbox.filedrop({
    paramname:'pic',

    maxfiles: 5,
    maxfilesize: 200,
    url: 'uploadCore.php',

    uploadFinished:function(i,file,response){
        $.data(file).addClass('done');
    },

    error: function(err, file) {
        switch(err) {
            case 'BrowserNotSupported':
                showMessage('Your browser does not support HTML5 file uploads!');
                break;
            case 'TooManyFiles':
                alert('Too many files!');
                break;
            case 'FileTooLarge':
                alert(file.name+' is too large! Please upload files up to 200mb.');
                break;
            default:
                break;
        }
    },

    beforeEach: function(file){
        if(!file.type.match(/^image\//)){
            alert('Only images are allowed!');

            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){            
        image.attr('src',e.target.result);
    };

    reader.readAsDataURL(file);

    message.hide();
    preview.appendTo(dropbox);

    $.data(file,preview);
}

function showMessage(msg){
    message.html(msg);
}

});

Now for the PHP:

<?php

// db connection
 include("db-info.php");
    $link = mysql_connect($server, $user, $pass);
        if(!mysql_select_db($database)) die(mysql_error());

 include("loadsettings.inc.php");


//$upload_dir = 'pictures/';
$allowed_ext = array('jpg','jpeg','png','gif');

if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
    exit_status('Error! Wrong HTTP method!');
}


if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){

if (isset($_SESSION["imagehost-user"]))
   { 
      $session = true;
      $username = $_SESSION["imagehost-user"];
      $password = $_SESSION["imagehost-pass"];

      $q = "SELECT id FROM `members` WHERE (username = '$username') and (password = '$password')";
      if(!($result_set = mysql_query($q))) die(mysql_error());
      $number = mysql_num_rows($result_set);

      if (!$number) {
         session_destroy();
         $session = false;
      }else {
         $row = mysql_fetch_row($result_set); 
         $loggedId = $row[0];
    }
}


    $date = date("d-m-y");
    $lastaccess = date("y-m-d");
    $ip = $_SERVER['REMOTE_ADDR'];
    $type = "public";

    $pic = $_FILES['pic'];
        $n = $pic;
            $rndName = md5($n . date("d-m-y") . time()) . "." . get_extension($pic['name']);
                $upload_dir = "pictures/" . $rndName;
                    move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name']);

                    // issues starts here

                     $imagePath = $upload_dir;

                     $img = imagecreatefromunknown($imagePath);
                        $mainWidth = imagesx($img);
                        $mainHeight = imagesy($img);

                        $a = ($mainWidth >= $mainHeight) ? $mainWidth : $mainHeight; 

                         $div = $a / 150;
                         $thumbWidth = intval($mainWidth / $div);
                         $thumbHeight = intval($mainHeight / $div);

                            $myThumb = imagecreatetruecolor($thumbWidth, $thumbHeight);
                             imagecopyresampled($myThumb, $img, 0, 0, 0, 0, $thumbWidth, $thumbHeight, $mainWidth, $mainHeight);
                             $thumbPath = "thumbnails/" . basename($imagePath);
                             imagejpeg($myThumb, $thumbPath);

                             $details = intval(filesize($imagePath) / 1024) . " kb (" . $mainWidth . " x " . $mainHeight . ")" ; 
                             $id = md5($thumbPath . date("d-m-y") . time());


                             $q = "INSERT INTO `images`(id, userid, image, thumb, tags, details, date, access, type, ip)
                             VALUES('$id', '$loggedId', '$imagePath', '$thumbPath', '$tags', '$details', '$date', '$lastaccess', 'member-{$type}', '$ip')";
                                 if(!($result_set = mysql_query($q))) die(mysql_error());*/

                                    exit_status('File was uploaded successfuly!');

                            // to here


    $result = mysql_query("SELECT id FROM `blockedip` WHERE ip = '$ip'");
    $number = mysql_num_rows($result);
        if ($number) die(""); // blocked IP message

    function imagecreatefromunknown($path) {

        $exten = get_extension($path);

       switch ($exten) {
          case "jpg":
            $img = imagecreatefromjpeg($path);
            break;
          case "gif":
            $img = imagecreatefromgif($path);
            break;
          case "png":
            $img = imagecreatefrompng($path);
            break;
  }

  return $img;
}


}

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);
}   

?>

Answer 1

It seems you pass wrong path to the imagecreatefromunknown() function. You pass $imagePath that equals $upload_dir, but your image destination is $upload_dir.$pic['name']