Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

.NET WebForms

Video Upload

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

Frontend

This can be pasted in your Default.aspx

  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

upload.aspx handles the request and the upload action. The uploads directory is created automatically if it does not exist under "project_root"/Files/. The root directory must be writable, otherwise the upload directory will not be created.

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

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

The following example shows the functions you should define in upload.aspx:

public partial class Upload : Page
  {
  protected void Page_Load(object sender, EventArgs e)
  {
  if (Request.Files["file"] != null)
  {
  HttpPostedFile MyFile = Request.Files["file"];
  
  // Setting location to upload files
  string TargetLocation = Server.MapPath("~/Files/");
  try
  {
  if (MyFile.ContentLength > 0)
  {
  // Get File Extension
  string Extension = Path.GetExtension(MyFile.FileName);
  
  //Determining file name. You can format it as you wish.
  string FileName = Path.GetFileName(MyFile.FileName);
  
  // Generate random name.
  FileName = Guid.NewGuid().ToString().Substring(0, 8);
  
  // Determining file size.
  int FileSize = MyFile.ContentLength;
  
  // Creating a byte array corresponding to file size.
  byte[] FileByteArray = new byte[FileSize];
  
  // Basic validation for file extension
  string [] AllowedExtension = { ".mp4", ".webm", ".ogg" };
  
  // Basic validation for mime type
  string[] AllowedMimeType = { "video/mp4", "video/webm", "video/ogg" };
  
  if (AllowedExtension.Contains(Extension) && AllowedMimeType.Contains(MimeMapping.GetMimeMapping(MyFile.FileName)))
  {
  // Posted file is being pushed into byte array.
  MyFile.InputStream.Read(FileByteArray, 0, FileSize);
  
  // Uploading properly formatted file to server.
  MyFile.SaveAs(TargetLocation + FileName + Extension);
  
  string json = "";
  Hashtable resp = new Hashtable();
  string urlPath = MapURL(TargetLocation) + FileName + Extension;
  
  // Make the response an json object
  resp.Add("link", urlPath);
  json = JsonConvert.SerializeObject(resp);
  
  // Clear and send the response back to the browser.
  Response.Clear();
  Response.ContentType = "application/json; charset=utf-8";
  Response.Write(json);
  Response.End();
  }
  else {
  // Handle upload errors.
  }
  }
  }
  
  catch (Exception ex)
  {
  // Handle errors
  }
  }
  }
  
  // Convert file path to url
  // http://stackoverflow.com/questions/16007/how-do-i-convert-a-file-path-to-a-url-in-asp-net
  private string MapURL(string path)
  {
  string appPath = Server.MapPath("/").ToLower();
  return string.Format("/{0}", path.ToLower().Replace(appPath, "").Replace(@"\", "/"));
  }
  }
  

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_1725080247" 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_922818599" 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_2032034221" 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>