Uploading image using ajax

Question

I have a variables src and image ,

var src = $("#img_tag").attr('src');
var image = new Image();

I want to pass this image variable to a public function in php to upload. What is it that exactly that I need to pass, is it the src , the base64 , the image itself as new FormData ?

Right now I have:

var data = new FormData();
var src = $("#img_tag").attr('src');
var image = new Image();
data.append('Image', image);

console.log(data);

$.ajax({  
    url: "/products/image_upload",  
    type: "POST",  
    data:  data,
    processData: false,  
    contentType: false, 
    success: function (msg) {
        console.log(msg+"---Image was uploaded");
    }
    error: function(err) {
        console.log(err);
    }
});

In my view :

public function image_upload() {
    $this->autoRender = false;
    echo json_encode($this->data);
    if($this->request->is('post'))
    {
         if(!empty($_FILES['Image']['name'])) {
            $file = $_FILES['Image'];
            echo json_encode($file);
            $ext = substr(strtolower(strrchr($file['name'], '.')), 1);
            $arr_ext = array('jpg', 'jpeg', 'gif', 'png');
            $temp = explode(".", $file['name']);
            $newfilename = $_FILES['Image']['name'];
            if(in_array($ext, $arr_ext))
            {
                if(move_uploaded_file($file['tmp_name'], WWW_ROOT . 'img/product-uploads' . DS . $newfilename))
                {
                    echo json_encode("Image uploaded properly");
                    return json_encode($_FILES);
                }
            }
        }
    }
}

And getting:

 {"Image":"[object HTMLImageElement]"}---Image was uploaded

BUT IMAGE IS NOT UPLOADED

Answer 1

I got a bit of a research, and found this article super helpful. (Thanks to that)

I managed to upload an image file to a directory in my server from an image src by getting the base64 encoded image, passed for the controller to decode and upload. (Also thanks to Musa, DanielO, and Rory McCrossan)

In Controller: Code from this article . (I added a custom filename in a datetime format)

public function additional_image_upload() {
    $this->autoRender = false;

    $base64 = $this->request->data['base64'];
    $product_id = $this->request->data['id'];
    $baseFromJavascript = $base64;

    $data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $baseFromJavascript));

    $t = microtime(true);
    $micro = sprintf("%06d",($t - floor($t)) * 1000000);
    $date_tmp = new DateTime( date('Y-m-d H:i:s.'.$micro, $t) );

    $date = $date_tmp->format("Y-m-d_his.u");
    $filepath = WWW_ROOT . 'img/product-uploads' . DS ."$date.jpg"; // or image.jpg
    file_put_contents($filepath,$data);
}

In Script: (I passed the base64 encoded image for the controller to handle)

var src = $(this).attr('src');
$.ajax({
    url:"/products/additional_image_upload",
    data:{
        "id": "<?= $id; ?>",
        "base64": src
    },
    type:"POST",
    success: function(msg) {
        console.log(msg."---Img uploaded");
    },
    error: function(error) {
        console.log(error);
    }
});

And all was working great. Added this to help future readers.

Answer 2

If you take a look at the FormData.append doc, you will see that the second argument takes a string or a blob.
So passing an HTMLImageElement isn't going to work, if you cant get the image as a Blob or a File using a FormData object doesn't really help.
Since you're trying to upload the src of #img_tag , this will only really work if it is the base64 encoded image.
In this case use data.append('Image', src); and read the data from $_POST['Image'] then clean it up and decode it.

If the image src is a regular url, use $_POST['Image'] with curl to download the image to your server.