title: Froala / PHP - image upload failure (something went wrong...)
body: <p>Trying to get Froala to upload images to server in PHP environment.  Have followed exactly Froala's example <a href="https://www.froala.com/wysiwyg-editor/docs/server/php/image-upload" rel="nofollow noreferrer">here</a>.</p>
  
  <p>However, when I choose an image file, and submit, the feedback I get is an error message: "Something went wrong.  Please try again".</p>
  
  <p>I have used the exact file/directory names as in the example, but obviously I am missing something.  The directory is "uploads" for image depository.</p>
  
  <p>I have read most of the other Stackoverflow comments and solutions, have tried several of them, read Froala's info, but still have no success.</p>
  
  <p>The code below which I am using is pretty well identical to their example.</p>
  
  <p>THE EDITOR FILE: "index.php"</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
  
    &lt;!-- Include external CSS. --&gt;
    &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css"&gt;
  
    &lt;!-- Include Editor style. --&gt;
    &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_style.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;!-- Include external JS libs. --&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- Include Editor JS files. --&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1//js/froala_editor.pkgd.min.js"&gt;&lt;/script&gt;
    &lt;div class="sample"&gt;
      &lt;h2&gt;File upload example.&lt;/h2&gt;
      &lt;form&gt;
        &lt;textarea id="edit" name="content"&gt;&lt;/textarea&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  
    &lt;!-- Initialize the editor. --&gt;
    &lt;script&gt;
      $(function() {
        $('#edit').froalaEditor({
          // Set the file upload URL.
          imageUploadURL: '/upload_image.php',
  
          imageUploadParams: {
            id: 'my_editor'
          }
        })
      });
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>THE PHP FILE: "upload_image.php"</p>
  
  <pre><code>&lt;?php
  
  try {
    // File Route.
    $fileRoute = "/uploads/";
  
    $fieldname = "file";
  
    // Get filename.
    $filename = explode(".", $_FILES[$fieldname]["name"]);
  
    // Validate uploaded files.
    // Do not use $_FILES["file"]["type"] as it can be easily forged.
    $finfo = finfo_open(FILEINFO_MIME_TYPE);
  
    // Get temp file name.
    $tmpName = $_FILES[$fieldname]["tmp_name"];
  
    // Get mime type.
    $mimeType = finfo_file($finfo, $tmpName);
  
    // Get extension. You must include fileinfo PHP extension.
    $extension = end($filename);
  
    // Allowed extensions.
    $allowedExts = array("gif", "jpeg", "jpg", "png", "svg", "blob");
  
    // Allowed mime types.
    $allowedMimeTypes = array("image/gif", "image/jpeg", "image/pjpeg", "image/x-png", "image/png", "image/svg+xml");
  
    // Validate image.
    if (!in_array(strtolower($mimeType), $allowedMimeTypes) || !in_array(strtolower($extension), $allowedExts)) {
      throw new \Exception("File does not meet the validation.");
    }
  
    // Generate new random name.
    $name = sha1(microtime()) . "." . $extension;
    $fullNamePath = dirname(__FILE__) . $fileRoute . $name;
  
    // Check server protocol and load resources accordingly.
    if (isset($_SERVER["HTTPS"]) &amp;&amp; $_SERVER["HTTPS"] != "off") {
      $protocol = "https://";
    } else {
      $protocol = "http://";
    }
  
    // Save file in the uploads folder.
    move_uploaded_file($tmpName, $fullNamePath);
  
    // Generate response.
    $response = new \StdClass;
    $response-&gt;link = $protocol.$_SERVER["HTTP_HOST"].dirname($_SERVER["PHP_SELF"]).$fileRoute . $name;
  
    // Send response.
    echo stripslashes(json_encode($response));
  
  } catch (Exception $e) {
     // Send error response.
     echo $e-&gt;getMessage();
     http_response_code(404);
  }
  ?&gt;
  </code></pre>