Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

.NET Core Framework

Video Upload

The following code example illustrates how to handle video upload on your server using .Net Core Framework as a server-side language. For step by step explanation of the upload flow see video upload concept.

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>
  3. On the body section include the Editor JS files and define the area for the editor.

  4.     <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>
        
  5. Initialize the editor and set the video upload URL

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

HomeController.cs is the default controller used to define the upload action. The uploads directory is created automatically if it does not exist under wwwroot/upload/. The root directory must be writable, otherwise the upload directory will not be created.

HomeController manages the request and the upload part. 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/upload/name_of_file"}.

The following example shows the functions you should define in this file:

public class HomeController : Controller
  {
  private readonly IHostingEnvironment _hostingEnvironment;
  
  public HomeController(IHostingEnvironment hostingEnvironment)
  {
  _hostingEnvironment = hostingEnvironment;
  }
  
  [HttpPost("UploadFiles")]
  [Produces("application/json")]
  public async Task<IActionResult> Post(List<IFormFile> files)
  {
  // Get the file from the POST request
  var theFile = HttpContext.Request.Form.Files.GetFile("file");
  
  // Get the server path, wwwroot
  string webRootPath = _hostingEnvironment.WebRootPath;
  
  // Building the path to the uploads directory
  var fileRoute = Path.Combine(webRootPath, "uploads");
  
  // Get the mime type
  var mimeType = HttpContext.Request.Form.Files.GetFile("file").ContentType;
  
  // Get File Extension
  string extension = System.IO.Path.GetExtension(theFile.FileName);
  
  // Generate Random name.
  string name = Guid.NewGuid().ToString().Substring(0, 8) + extension;
  
  // Build the full path inclunding the file name
  string link = Path.Combine(fileRoute, name);
  
  // Create directory if it dose not exist.
  FileInfo dir = new FileInfo(fileRoute);
  dir.Directory.Create();
  
  // Basic validation on mime types and file extension
  string[] videoMimetypes = { "video/mp4", "video/webm", "video/ogg" };
  string[] videoExt = { ".mp4", ".webm", ".ogg" };
  
  try
  {
  if (Array.IndexOf(videoMimetypes, mimeType) >= 0 && (Array.IndexOf(videoExt, extension) >= 0))
  {
  // Copy contents to memory stream.
  Stream stream;
  stream = new MemoryStream();
  theFile.CopyTo(stream);
  stream.Position = 0;
  String serverPath = link;
  
  // Save the file
  using (FileStream writerFileStream = System.IO.File.Create(serverPath))
  {
  await stream.CopyToAsync(writerFileStream);
  writerFileStream.Dispose();
  }
  
  // Return the file path as json
  Hashtable videoUrl = new Hashtable();
  videoUrl.Add("link", "/uploads/" + name);
  
  return Json(videoUrl);
  }
  throw new ArgumentException("The video did not pass the validation");
  }
  
  catch (ArgumentException ex)
  {
  return Json(ex.Message);
  }
  }
  }
  

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

Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1036528806" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_229553859" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_368670091" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>