- 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 Image Manager
How it works
- Specify image load options when the editor is initialized on the client side.
- When the Image Manger modal displays, the editor makes a request to the server to load the images.
- Once the request reaches the server, it returns a list with the images to display in the editor.
- The editor processes the server response and renders the images in its interface.
initialize the editor
First, set the imageManagerLoadURL
and imageManagerDeleteURL
options, this allows the editor to interact with the server to load and delete images listed on the Image Manager.
Next, you can set other options related to the interaction between the server and the editor: imageManagerLoadMethod
, imageManagerLoadParams
, imageManagerPreloader
, imageManagerDeleteParams
.
<script>
new FroalaEditor('.selector', {
// Set the image upload URL.
imageManagerLoadURL: '/FroalaApi/LoadImages',
// Set the image delete URL.
imageManagerDeleteURL: '/FroalaApi/DeleteImage'
})
</script>
Receive the load request
The server implementation is responsible for receiving the request and handling it appropriately. The editor's .NET SDK can load all the images inside a specified folder using the FroalaEditor.Image.List
method.
Note: The path of the folder from where the images are loaded is relative to the root of the project.
string uploadPath = "/Public/";
object response = FroalaEditor.Image.List(System.Web.HttpContext.Current, uploadPath);
Receive the delete request
The server should listen for any delete request and process it accordingly. The initialization step makes the image path available in the HttpContext
global variable. The FroalaEditor.Image.Delete
method from the .NET SDK expects the path of the image to remove from disk.
FroalaEditor.File.Delete("/Public/" + HttpContext.Request.Form["src"]);
Complete Example
<script>
new FroalaEditor('.selector', {
// Set the image upload URL.
imageManagerLoadURL: '/FroalaApi/LoadImages',
// Set the image delete URL.
imageManagerDeleteURL: '/FroalaApi/DeleteImage'
})
</script>
using System;
using System.Web.Mvc;
namespace demo.Controllers
{
public class FroalaApiController : Controller
{
public ActionResult LoadImages()
{
string uploadPath = "/Public/";
try
{
return Json(FroalaEditor.Image.List(System.Web.HttpContext.Current, uploadPath));
}
catch (Exception e)
{
return Json(e);
}
}
public ActionResult DeleteImage()
{
try
{
FroalaEditor.Image.Delete("/Public/" + HttpContext.Request.Form["src"]);
}
catch (Exception e)
{
return Json(e);
}
return Json(true);
}
}
}
Do you think we can improve this article? Let us know.