Save an image to server using ajax, php

Question

I'm using JCrop and the code provided here How should I crop the image at client side using jcrop and upload it?, which is working great except I don't know how to upload the cropped image to the server.

Here's the most relevant piece of the javascript/ajax

$("#form").submit(function(e) {
  e.preventDefault();
  formData = new FormData($(this)[0]);
  var blob = dataURLtoBlob(canvas.toDataURL('image/png'));

  //---Add file blob to the form data
  formData.append("cropped_image[]", blob);
  $.ajax({
    url: "sendImage.php",
    type: "POST",
    data: formData,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data) {
      alert("Success");
    },
    error: function(data) {
      alert("Error");
    },
    complete: function(data) {}
  });
});

The canvas is added to a div 'views'.

 <div id="views"></div>

And here's what php I have so far to try to upload the image

//File destination
$destination = '../Images/Uploads/';
//Get uploaded image file it's temporary name
$image_tmp_name = $_POST["formData"];
//Move temp file to final destination
move_uploaded_file($image_tmp_name, $destination);

I know I'm way off but any pointers would be great, thank you so much!

I know I'm wrong with the temp filename $image_tmp_name = $_POST["formData"];, should that be "views" instead of "formData"?

Edit to add:

$upload_dir = '../Images/uploads/';  
$img = $_FILES['views'];
$img = str_replace('data:image/jpg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.jpg";
$success = file_put_contents($file, $data);

Is this any closer? I realised I was using 'image/png' when my images are jpg so I've changed the png's to jpg's. Still getting a blank jpg when I try to save it. I've scoured stackoverflow all day for an answer and haven't got any further, please can anyone give me a hint as to what to do? Thank you!

did you try the code from this answer ? (from the linked question) [Answer : How should I crop the image at client side using jcrop and upload it?](http://stackoverflow.com/a/34706552/3992945) — ᴄʀᴏᴢᴇᴛ, Jan 25 '17 at 16:33
The first answer doesn't give any php. I've tried lots of variants of the php in the second answer but the farthest I've got is saving a blank .png file in the target folder. — champion_bake, Jan 25 '17 at 16:40
based on your edit, there is something wrong : if you send the file "as a file" (just like you would with a ``) it will be stored as a temp file and you will get the file infos in `$_FILE`. Then you will need to use `move_uploaded_file` to save it where you want. If you use the js of the answer i linked, the file is sent as a base64 string and you will get it in `$_POST`. Then, you will have to remove `data:image/jpg;base64,`, decode the base64 data and save it to a file. you cannot mix the two methods. — ᴄʀᴏᴢᴇᴛ, Jan 25 '17 at 22:09

Save an image to server using ajax, php

0 Answers0