Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

.NET WebForms

File Upload

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

Frontend

This can be pasted in your Default.aspx

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <!-- Include external CSS. -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">

  <!-- Include Editor style. -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_style.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <!-- Include external JS libs. -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>

  <!-- Include Editor JS files. -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]//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. -->
  <script>
    $(function() {
      $('#edit').froalaEditor({
        // Set the file upload URL.
        fileUploadURL: '/Upload',

        fileUploadParams: {
          id: 'my_editor'
        }
      })
    });
  </script>
</body>
</html>

Backend

Upload.aspx file handles the request and the upload part. The uploads directory will be automatically created if it dose not exist under "project_root"/Files/. The project root directory must be write available otherwise the Files folder will not be created.

Inside the Upload file the following functions need to be defined. After processing the uploaded file, if it passes the validation, the server will respond with a JSON object containing a link to the uploaded file.

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

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 = { ".txt", ".pdf", ".doc", ".json", ".html" };

          // Basic validation for mime type
          string[] AllowedMimeType = { "text/plain", "application/msword", "application/x-pdf", "application/pdf", "application/json","text/html" };

          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(@"\", "/"));
  }
}
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_548660942" 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_344964045" 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_1060350531" 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>