Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

.NET File Server Upload

How it works

  1. Specify upload options when initializing the editor.
  2. On file insertion, the editor automatically makes an AJAX request to the server.
  3. Once the request reaches the server, it stores the file and sends back to the client the link to the uploaded file.

Jump to Complete Example

Initialize the editor

First, set the fileUploadURL option and specify the URL destination for the uploaded files.

Next, set any additional options to configure upload methods and allowed file types: fileUploadParam, fileUploadParams, fileUploadMethod, fileMaxSize, fileAllowedTypes.

<script>
  new FroalaEditor('.selector', {
    // Set the file upload URL.
    fileUploadURL: '/FroalaApi/UploadFile'
  })
</script>

Receive the uploaded file and store it

The server implementation is responsible for receiving the request and handling it appropriately. In .NET, the uploaded file is available in the HttpContext global variable. The .NET editor SDK detects the uploaded file automatically but you have to specify the path where to store it.

Note: The path of the file is relative to the root of the project.

string uploadPath = "/Public/";
object response = FroalaEditor.File.Upload(System.Web.HttpContext.Current, uploadPath);

To store the uploaded file, the server needs write rights on the uploads folder. Additionally, check uploaded files are publicly accessible in the browser.

Return the path to the uploaded file

If the save action is successful, the SDK generates a FileResponse object with the absolute path to the uploaded file, and the server returns the path to the client side.

return Json(response);

Complete Example

<script>
  new FroalaEditor('.selector', {
    // Set the file upload URL.
    fileUploadURL: '/FroalaApi/UploadFile'
  })
</script>
using System;
using System.Web.Mvc;

namespace demo.Controllers
{
    public class FroalaApiController : Controller
    {
        public ActionResult UploadFile()
        {
            string uploadPath = "/Public/";

            try
            {
                return Json(FroalaEditor.File.Upload(System.Web.HttpContext.Current, uploadPath));
            }
            catch (Exception e)
            {
                return Json(e);
            }
        }
    }
}

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

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_459524954" 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_865036483" 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_1133972767" 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>