Can't upload image to local server with Froala editor
<p>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.</p>

<p>Documentation:
<a href="https://www.froala.com/wysiwyg-editor/docs/concepts/image/upload" rel="nofollow noreferrer">https://www.froala.com/wysiwyg-editor/docs/concepts/image/upload</a></p>

<p>There's also this method, but I'm not sure where to put the php: <a href="https://www.froala.com/wysiwyg-editor/docs/sdks/php/image-server-upload" rel="nofollow noreferrer">https://www.froala.com/wysiwyg-editor/docs/sdks/php/image-server-upload</a></p>

<h2>MY CODE</h2>

<p>("fedit" is the class I use for my textarea.)</p>

<p>Javascript:</p>

<pre><code>&lt;script&gt;
  $(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.
      });
  });
&lt;/script&gt;
</code></pre>

<p>upload_image.php</p>

<pre><code>&lt;?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"))
    &amp;&amp; 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-&gt;link = "/uploads/" . $name;
        echo stripslashes(json_encode($response));
    }
?&gt;
</code></pre>