Server Side Integration

Image Upload with PHP

The following example illustrates how to handle image upload on your server using PHP as a server-side language. For step by step explanation see image upload concept.

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

<script>
  $(function() {
    $('.selector').editable({
      // Set the image upload URL.
      imageUploadURL: '/upload_image.php',

      imageUploadParams: {
        id: 'my_editor'
      }
    })
  });
</script>

Next, you have to store the image on your PHP server and return a JSON with a link field that contains the URL to the uploaded file. This is a basic example of how the "upload_image.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
    // Allowed extentions.
    $allowedExts = array("gif", "jpeg", "jpg", "png");

    // Get filename.
    $temp = explode(".", $_FILES["file"]["name"]);

    // Get extension.
    $extension = end($temp);

    // An image check is being done in the editor but it is best to
    // check that again on the server side.
    // Do not use $_FILES["file"]["type"] as it can be easily forged.
    $finfo = finfo_open(FILEINFO_MIME_TYPE);
    $mime = finfo_file($finfo, $_FILES["file"]["tmp_name"]);

    if ((($mime == "image/gif")
    || ($mime == "image/jpeg")
    || ($mime == "image/pjpeg")
    || ($mime == "image/x-png")
    || ($mime == "image/png"))
    && in_array($extension, $allowedExts)) {
        // Generate new random name.
        $name = sha1(microtime()) . "." . $extension;

        // Save file in the uploads folder.
        move_uploaded_file($_FILES["file"]["tmp_name"], getcwd() . "/uploads/" . $name);

        // Generate response.
        $response = new StdClass;
        $response->link = "/uploads/" . $name;
        echo stripslashes(json_encode($response));
    }
?>