Server Side Integration

Media Manager in PHP

The following example illustrates how to use the media manager on your server using PHP as a server-side language. For step by step explanation see media manager concept.

First, you need to pass to the Froala WYSIWYG HTML Editor, upon initialization, the URL where to load the images from. In our case it would be '/load_images.php'.

<script>
  $(function() {
    $('.selector').editable({
      // Set the image upload URL.
      imagesLoadURL: '/load_images.php'
    })
  });
</script>

Next, you have to return an array of links for the images to display. This is a basic example of how the "images_load.php" file may look like. Please note that you may also need to create the uploads folder and set the right permissions to access it.

<?php
    // Array of image links to return.
    $response = array();

    // Image types.
    $image_types = array(
                      "image/gif",
                      "image/jpeg",
                      "image/pjpeg",
                      "image/jpeg",
                      "image/pjpeg",
                      "image/png",
                      "image/x-png"
                  );

    // Filenames in the uploads folder.
    $fnames = scandir("uploads");

    // Check if folder exists.
    if ($fnames) {
        // Go through all the filenames in the folder.
        foreach ($fnames as $name) {
            // Filename must not be a folder.
            if (!is_dir($name)) {
                // Check if file is an image.
                if (in_array(mime_content_type(getcwd() . "/uploads/" . $name), $image_types)) {
                    // Add to the array of links.
                    array_push($response, "/uploads/" . $name);
                }
            }
        }
    }

    // Folder does not exist, respond with a JSON to throw error.
    else {
        $response = new StdClass;
        $response->error = "Images folder does not exist!";
    }

    $response = json_encode($response);

    // Send response.
    echo stripslashes($response);
?>

The last thing would be to implement the media manager image delete action. You need to pass to the WYSIWYG HTML editor, upon initialization, the URL where the delete request is being made. In our case it would be '/delete_image.php'.

<script>
  $(function() {
    $('.selector').editable({
      // Set the image delete URL.
      imageDeleteURL: '/delete_image.php'
    });
  });
</script>

Next, you have to process the request on your PHP server and delete the image. This is a basic example of how the "delete_image.php" file may look like. We are assuming that the images paths are relative to the directory with the PHP "delete_image.php" file.

<?php
    // Get src.
    $src = $_POST["src"];

    // Check if file exists.
    if (file_exists(getcwd() . $src)) {
      // Delete file.
      unlink(getcwd() . $src);
    }
?>