20% Off All Froala Plans
Days
Hours
Minutes
Seconds
x

Froala Editor v4.3 is hereLEARN MORE

Pricing
Get Started
Skip to content
Star

PHP

Video Upload

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

Frontend

Setting up 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>Video upload example.</h2>
    <form>
    <textarea id="edit" name="content"></textarea>
    </form>
    </div>
  3. Initialize the editor and set the video upload URL

    4.     <script>
    new FroalaEditor('#edit', {
    // Set the video upload URL.
    videoUploadURL: '/UploadFiles',
    
    videoUploadParams: {
    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>Video upload example.</h2>
    <form>
    <textarea id="edit" name="content"></textarea>
    </form>
    </div>
    
    
    <script>
    new FroalaEditor('#edit', {
    
    videoUploadURL: '/UploadFiles',
    
    videoUploadParams: {
    id: 'my_editor'
    }
    })
    </script>
    </body>
    </html>

Backend

upload_video.php 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 video passes the validation step, the server responds with a JSON object containing a link to the uploaded video.

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("mp4", "webm", "ogg");
  
  // Allowed mime types.
  $allowedMimeTypes = array("video/mp4", "video/webm", "video/ogg");
  
  // 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);
  }
  ?>

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