Video Concept

Upload Video

For testing purposes, the Froala Rich Text Editor by default stores the videos temporarily as a Blob in the browser memory. While integrating the editor, you should upload them to your own server for privacy reasons, permanent storage and full control over them.

In this case you have to handle the video upload and storage using a server-side language yourself. This article is meant to help you understand how the editor's video upload works.

Upload Flow

1. Include the video plugin file.

   Video is a plugin for the editor and the video.min.js file must be included before being able to use it.

   
   

2. Set the editor's video upload options.

   When uploading videos, you can customize up to 6 parameters and 5 events:
   • videoUploadParam is the name of the parameter that contains the video file information in the upload request. The default value is "file" but you can change it to whatever name you want.
   • videoUploadURL is the URL where the upload request is being made.
   • videoUploadParams are additional params that are passed in the upload request to the server.
   • videoUploadMethod is the HTTP request type.
   • videoMaxSize is the maximum video size that can be uploaded.
   • videoAllowedTypes is an array with the video types allowed to be uploaded.
   • video.beforeUpload event is triggered before starting the upload request and it can be used to change the upload params or cancel the action.
   • video.uploaded event is triggered after a successfully video upload request, but before inserting the video in the editor.
   • video.inserted event is triggered after inserting the video into the editor.
   • video.replaced event is triggered after replacing the video into the editor.
   • video.error event is triggered if any errors occur during the upload process.

   
   

3. AJAX request from editor to the videoUploadURL link.

   When an video is inserted into the WYSIWYG HTML editor, a HTTP request is automatically done to the server.

   
   

4. The server processes the HTTP request.

   The server has to process the upload request, save the video and return a JSON containing a link to the uploaded video. The returned JSON needs to look like: { "link": "path/to/video.mp4" }

   If you need help with the server side video upload process please check out the Froala SDKs.

   
   

5. The editor loads the video in browser.

   When the request finishes, the editor will load the video. If the returned hashmap does not follow the right structure or the video cannot be loaded, video.error event is triggered.

The following snippet highlights how to initialize the Froala WYSIWYG HTML editor in order to upload videos.

Copy

<script>
  new FroalaEditor('.selector', {
    // Set the video upload parameter.
    videoUploadParam: 'video_param',

    // Set the video upload URL.
    videoUploadURL: '/upload_video',

    // Additional upload params.
    videoUploadParams: {id: 'my_editor'},

    // Set request type.
    videoUploadMethod: 'POST',

    // Set max video size to 50MB.
    videoMaxSize: 50 * 1024 * 1024,

    // Allow to upload MP4, WEBM and OGG
    videoAllowedTypes: ['webm', 'jpg', 'ogg'],

    events: {
      'video.beforeUpload': function (videos) {
        // Return false if you want to stop the video upload.
      },
      'video.uploaded': function (response) {
        // Video was uploaded to the server.
      },
      'video.inserted': function ($img, response) {
        // Video was inserted in the editor.
      },
      'video.replaced': function ($img, response) {
        // Video was replaced in the editor.
      },
      'video.error': function (error, response) {
        // Bad link.
        if (error.code == 1) { ... }

        // No link in upload response.
        else if (error.code == 2) { ... }

        // Error during video upload.
        else if (error.code == 3) { ... }

        // Parsing response failed.
        else if (error.code == 4) { ... }

        // Video too text-large.
        else if (error.code == 5) { ... }

        // Invalid video type.
        else if (error.code == 6) { ... }

        // Video 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.
      }
    }
  });
</script>