Froala Editor v4.2.0 is Here LEARN MORE
It looks like you’re browsing an old version of Froala. Please go to the newer version of our docs for a more updated version.
.NET Web MVC
Image Upload
The following code example illustrates how to handle image upload on your server using .Net Web MVC as a server-side language. For step by step explanation of the upload flow see image upload concept.
Frontend
The main index page.
<!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. --> <!-- If jquery is loaded from CDN make sure that you remove it from _Layout file --> <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>Image upload example.</h2> <form> <textarea id="edit" name="content"></textarea> </form> </div> <!-- Initialize the editor. --> <script> $(function() { $('#edit').froalaEditor({ // Set the image upload URL. imageUploadURL: '/UploadFiles', imageUploadParams: { id: 'my_editor' } }) }); </script> </body> </html>
Backend
HomeController.cs file is the default controller that will be used in this example to define the upload part. The uploads directory will be automatically created if it dose not exist under wwwroot/upload/. The root directory must be write available otherwise the upload directory will not be created.
The HomeController will manage the request and the upload part, so you should define the following functions in this file. After processing the uploaded image, if it passes the validation, the server will respond with a JSON object containing a link to the uploaded image.
E.g.: {"link":"http://server_address/upload/name_of_file"}.
public class HomeController : Controller
{
public ActionResult UploadFiles()
{
if (Request.Files["file"] != null)
{
HttpPostedFileBase 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);
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 = { ".gif", ".jpeg", ".jpg", ".png", ".svg", ".blob" };
string[] AllowedMimeType = { "image/gif", "image/jpeg", "image/pjpeg", "image/x-png", "image/png", "image/svg+xml"};
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 validation errors
}
}
}
catch (Exception ex)
{
// Handle errors
}
}
return View();
}
// 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(@"\", "/"));
}
}