CODEWITHSUNDEEP
javascriptphpjquery
belakbox
belakbox

Reputation: 75

Callback unique filename with jquery php

I am using html2canvas and Canvas2Image to create a png image from canvas and save it to the server with a unique filename.

I would like to know how to retrieve and show the unique filename after it gets generated.

jQuery

$(function() { 
                $("#convertcanvas").click(function() { 
                    html2canvas($("#mycanvas"), {
                      onrendered: function(canvas) {
                       theCanvas = canvas;
                         document.body.appendChild(canvas);

                         // Convert for sharing        

                var img = canvas.toDataURL("image/png",1.0);
                $.ajax({
                    url:'save.php', 
                     type:'POST', 
                     data:{
                          data:img
                        }
                });

PHP

<?php
    $data = $_POST['data'];
    $data = substr($data,strpos($data,",")+1);
    $data = base64_decode($data);
    $file = 'images/myfile'.md5(uniqid()).'.png';
    file_put_contents($file, $data);
?>

Thanks in advance for any help.

Upvotes: 1

Views: 140

Answers (2)

Danmoreng
Danmoreng

Reputation: 2367

You can simply give back the filename inside of an array and return it as JSON with json_encode.

PHP

<?php
    $data = $_POST['data'];
    $data = substr($data,strpos($data,",")+1);
    $data = base64_decode($data);
    $file = 'images/myfile'.md5(uniqid()).'.png';
    file_put_contents($file, $data);
    echo json_encode(array('filename' => $file));
?>

And in your script you can specify to expect json data by setting the 'dataType' property to "json". Then you can use the .done() function to do anything you want with the returned data, for example console logging it:

jQuery

   var img = canvas.toDataURL("image/png",1.0);
   $.ajax({
       url:'save.php', 
       type:'POST',
       dataType: 'json',
       data:{
           data:img
       }
   }).done(function(data){
       console.log(data);
   });

Upvotes: 0

Timmetje
Timmetje

Reputation: 7694

You can get the filename by returning it in your PHP and catching it in the AJAX with a succes method.

PHP

<?php
    $data = $_POST['data'];
    $data = substr($data,strpos($data,",")+1);
    $data = base64_decode($data);
    $filename = 'myfile'.md5(uniqid()).'.png'; // <-- Added this because you probably don't want to return the image folder.
    $path = 'images/'.$filename;
    file_put_contents($path, $data);
    echo  $filename; // <-- echo your new filename!
?>

jQuery

$.ajax({
    url:'save.php', 
    type:'POST', 
    data:{
        data:img
    },
    success: function(data) {
       alert(data); // <-- here is your filename
       handleData(data); 
    }
});

Upvotes: 1

Related Questions