- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
.NET File Server Upload
How it works
- Specify upload options when initializing the editor.
- On file insertion, the editor automatically makes an AJAX request to the server.
- Once the request reaches the server, it stores the file and sends back to the client the link to the uploaded file.
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.