- Back to Docs
- Install and Configure
- Image
- Server Upload
- Server Delete
- S3 Upload
- Resize
- Validation
- Image Manager
- Simple Server
- File
- Server Upload
- Server Delete
- S3 Upload
- Validation
- References
- Image
- File
- S3
.NET File Server Upload
How it works
- You specify the upload options when the rich text editor is initialized on client side.
- When an file is inserted, the javascript editor automatically makes an AJAX request to the server.
- Once the request hits the server, it stores the file and sends back to the client the link to the uploaded file.
Initialize the javascript editor
To get started, the rich text editor needs to have the fileUploadURL
option set as the URL where you want to have the files uploaded. Additionally, you can set other options related to the way the files are being uploaded and what data your server receives: fileUploadParam
, fileUploadParams
, fileUploadMethod
, fileMaxSize
, fileAllowedTypes
.
<script> $(function() { $('.selector').froalaEditor({ // 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 is designed to automatically detect the uploaded file, so you just 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);
For the uploaded file to be stored correctly, the server should have the rights to write in the uploads folder. Additionally, you should check that the uploaded file is public accessible in browser so it can be displayed to your users.
Return the path to the uploaded file
If the save action is completed successfully, the SDK is generating an FileResponse
object with the absolute path to the uploaded file, so your server just have to return it back to the client side.
return Json(response);
Complete Example
<script> $(function() { $('.selector').froalaEditor({ // 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); } } } }