Can't upload image to local server with Froala editor

Question

I'm trying to upload images using Froala wysiwyg editor to my localhost (for testing purposes) but it's not working. When I choose the image to upload, it appears faded in the editor, then disappears when I click somewhere else. Here's my code below and a link to their documentation I tried to follow as well.

Documentation: https://www.froala.com/wysiwyg-editor/docs/concepts/image/upload

There's also this method, but I'm not sure where to put the php: https://www.froala.com/wysiwyg-editor/docs/sdks/php/image-server-upload

MY CODE

("fedit" is the class I use for my textarea.)

Javascript:

<script>
  $(function() {
    $('.fedit').froalaEditor({
        // Set the image upload parameter.
        imageUploadParam: 'file',

        // Set the image upload URL.
        imageUploadURL: '/upload_image.php',

        // Additional upload params.
        imageUploadParams: {class: 'fedit'},

        // Set request type.
        imageUploadMethod: 'POST',

        // Set max image size to 5MB.
        imageMaxSize: 5 * 1024 * 1024,

        // Allow to upload PNG and JPG.
        imageAllowedTypes: ['jpeg', 'jpg', 'png']
      })
      .on('froalaEditor.image.beforeUpload', function (e, editor, images) {
        // Return false if you want to stop the image upload.
      })
      .on('froalaEditor.image.uploaded', function (e, editor, response) {
        // Image was uploaded to the server.
      })
      .on('froalaEditor.image.inserted', function (e, editor, $img, response) {
        // Image was inserted in the editor.
      })
      .on('froalaEditor.image.replaced', function (e, editor, $img, response) {
        // Image was replaced in the editor.
      })
      .on('froalaEditor.image.error', function (e, editor, error, response) {
        // Bad link.
        else if (error.code == 1) { ... }

        // No link in upload response.
        else if (error.code == 2) { ... }

        // Error during image upload.
        else if (error.code == 3) { ... }

        // Parsing response failed.
        else if (error.code == 4) { ... }

        // Image too text-large.
        else if (error.code == 5) { ... }

        // Invalid image type.
        else if (error.code == 6) { ... }

        // Image can be uploaded only to same domain in IE 8 and IE 9.
        else if (error.code == 7) { ... }

        // Response contains the original server response to the request if available.
      });
  });
</script>

upload_image.php

<?php
    // Allowed extentions.
    $allowedExts = array("gif", "jpeg", "jpg", "png", "blob");

    // 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(strtolower($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));
    }
?>

Answer 1

Here is the solution to making it work on your localhost using the SDK for php. (I am using WAMP). Thanks to cmorrissey in the comments above for making me look into the sdk.

Download the SDK files here: https://www.froala.com/wysiwyg-editor/docs/sdks/php

Follow these instructions: https://www.froala.com/wysiwyg-editor/docs/sdks/php/image-server-upload

But I will show you the code and mention a few points that were the issue for me.

Put this javascript at the bottom of the page where your textarea is:

<script>
  $(function() {
    $('.selector').froalaEditor({
      // Set the image upload URL.
      imageUploadURL: '/mywebsite/upload_image.php'
    })
  });
</script>

Please note that your "imageUploadURL:" (upload_image.php) path points to the root of your local server. Eg. wherever "http://localhost" points to. So in my case I had my website in a subfolder of the root, so I would put "/mywebsite/upload_image.php" (which is actually located in C:\wamp64\www\mywebsite).

In the upload_image.php file:

<?php

// Include the editor SDK.
require 'froala/sdk/lib/FroalaEditor.php';

// Store the image.
try {
  $response = FroalaEditor_Image::upload('/mywebsite/img/uploads/');
  echo stripslashes(json_encode($response));
}
catch (Exception $e) {
  http_response_code(404);
}

?>

As you can see I copied the sdk "lib" folder (you downloaded above) toa subfolder I created called "froala/sdk/". You can put it wherever you want.

Another important quick note is a typo they did. In their example php code, they tell you the file is called "froala_editor.php", when it actually is named "FroalaEditor.php" in the downloaded files. This was one of the issues I had.

Everything should work now. You'll just have to modify the paths when you upload it to your webserver.