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.

On the head section include the Editor style.

<!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>

On the body section include the Editor JS files and define the area for the editor.

<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>

Initialize the editor and set the file upload URL

  <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);
}

?>

Additional Resources

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

PHP

File Upload

Frontend

Backend

Additional Resources

Ready to dive in? Explore our plans

Froala AI Assistant

How was your chat experience?