40% Off On All Plans + 3 Months of Platinum Support
Days
Hours
Minutes
Seconds
x

New Froala Editor v5.0.0 is here – Learn More

Pricing
Get Started
Skip to content
Froala Documentation

PHP

File Upload

The following sections describe how to handle file uploads on your server using PHP as a server-side language. For information on the upload workflow refer to the file upload documentation.

Frontend

The index page.

  1. On the head section include the Editor style. 

    2. <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
  </head>
  2. On the body section include the Editor JS files and define the area for the editor.

    3. <body>  
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

  <div class="sample">
    <h2>File upload example.</h2>
    <form>
      <textarea id="edit" name="content"></textarea>
    </form>
  </div>
  3. Initialize the editor and set the file upload URL

    4.   <script>
    new FroalaEditor('#edit', {
      // Set the file upload URL.
      fileUploadURL: '/UploadFiles',
      fileUploadParams: {
        id: 'my_editor'
      }
    })
  </script>
</body>
</html>

The full code should look like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

    <div class="sample">
      <h2>File upload example.</h2>
      <form>
        <textarea id="edit" name="content"></textarea>
      </form>
    </div>

    <script>
      new FroalaEditor('#edit', {
        fileUploadURL: '/UploadFiles',
        fileUploadParams: {
          id: 'my_editor'
        }
      })
    </script>
  </body>
</html>

Backend

upload_file.php file handles the upload part. It has basic file format validations that can be easily extended.

TThe uploads directory must be set to a valid location before making uploads. The path can be any folder that is accessible and writable.

If the uploaded file passes the validation step, the server responds with a JSON object containing a link to the uploaded file.

e.g.: {"link":"http://server_address/uploads/name_of_file"}.

<?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. You must include fileinfo PHP extension.
  $mimeType = finfo_file($finfo, $tmpName);

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

  // Allowed extensions.
  $allowedExts = array("txt", "pdf", "doc","json","html");

  // Allowed mime types.
  $allowedMimeTypes = array("text/plain", "application/msword", "application/x-pdf", "application/pdf", "application/json","text/html");

  // Validate file.
  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"]) && $_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->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->getMessage();
  http_response_code(404);
}

?>
Image Upload

Do you think we can improve this article? Let us know.

Ready to dive in? Explore our plans

See plans