If you do not enable the server side image upload, the plugin will automatically transform the images into base64 format. The downside is that images in this format are much heavier to store than a simple URL to an image, which is why it is advisable to manage image saving on the server side.

In our example, we will use a PHP script called from an URL :

var options = {
   defaults: {
       upload: {
           method: 'POST',
           action: "http://url-to-my-php-script/upload.php"

var instance = new AsukaDesigner('#myId', options); // Create an instance of the main plugin class

You can process the file received by the PHP script however you want, the most important thing is that it must return either directly the URL of the uploaded file, or an object containing the URL and optionally the name of the uploaded file :


// File name
$filename = $_FILES['file']['name'];

// Valid file extensions
$valid_extensions = array("jpg","jpeg","png", "gif");

// File extension
$extension = pathinfo($filename, PATHINFO_EXTENSION);

// Check extension
if(in_array(strtolower($extension),$valid_extensions) ) {
   // Upload file
   $uploads_path = 'uploads/' . $filename;
   if(move_uploaded_file($_FILES['file']['tmp_name'], $uploads_path)){
      echo json_encode(array(
          "url" => 'http://your-url/uploads/'. $filename,
          /* "name" => $filename */
        echo $uploads_path;
      // Error while uploading
      echo false;
   // Error while uploading
   echo false;


Was this article helpful to you? Yes No

How can we help?