.NET Core Framework
Image Upload
The following sections describe how to handle image uploads on your server using .Net Core Framework as a server-side language. For information on the image upload workflow refer to the image upload documentation.
Frontend
Setting up the index page.
- On the
headsection include the Editor style. - On the
bodysection include the Editor JS files and define the area for the editor. - Initialize the editor and set the image upload URL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
<div class="sample">
<h2>Image upload example.</h2>
<form>
<textarea id="edit" name="content"></textarea>
</form>
</div>
<script>
new FroalaEditor('#edit', {
// Set the image upload URL.
imageUploadURL: '/UploadFiles',
imageUploadParams: {
id: 'my_editor'
}
})
</script>
</body>
</html>
The full code should look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
<div class="sample">
<h2>image upload example.</h2>
<form>
<textarea id="edit" name="content"></textarea>
</form>
</div>
<script>
new FroalaEditor('#edit', {
imageUploadURL: '/UploadFiles',
imageUploadParams: {
id: 'my_editor'
}
})
</script>
</body>
</html>
The full code should look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
<div class="sample">
<h2>Image upload example.</h2>
<form>
<textarea id="edit" name="content"></textarea>
</form>
</div>
<script>
new FroalaEditor('#edit', {
imageUploadURL: '/UploadFiles',
fileUploadParams: {
id: 'my_editor'
}
})
</script>
</body>
</html>
Backend
In this example HomeController.cs is the default controller used to define the upload action. The uploads directory is created automatically if it does not exist under wwwroot/upload/. The root directory must be writable, otherwise the upload directory will not be created.
HomeController manages the request and the upload part. If the uploaded image passes the validation step, the server responds with a JSON object containing a link to the uploaded image.
e.g.: {"link":"http://server_address/upload/name_of_file"}.
The following example shows the functions you should define in this file:
public class HomeController : Controller
{
private readonly IHostingEnvironment _hostingEnvironment;
public HomeController(IHostingEnvironment hostingEnvironment)
{
_hostingEnvironment = hostingEnvironment;
}
[HttpPost("UploadFiles")]
[Produces("application/json")]
public async Task<IActionResult> Post(List<IFormFile> files)
{
// Get the file from the POST request
var theFile = HttpContext.Request.Form.Files.GetFile("file");
// Get the server path, wwwroot
string webRootPath = _hostingEnvironment.WebRootPath;
// Building the path to the uploads directory
var fileRoute = Path.Combine(webRootPath, "uploads");
// Get the mime type
var mimeType = HttpContext.Request.Form.Files.GetFile("file").ContentType;
// Get File Extension
string extension = System.IO.Path.GetExtension(theFile.FileName);
// Generate Random name.
string name = Guid.NewGuid().ToString().Substring(0, 8) + extension;
// Build the full path inclunding the file name
string link = Path.Combine(fileRoute, name);
// Create directory if it dose not exist.
FileInfo dir = new FileInfo(fileRoute);
dir.Directory.Create();
// Basic validation on mime types and file extension
string[] imageMimetypes = { "image/gif", "image/jpeg", "image/pjpeg", "image/x-png", "image/png", "image/svg+xml" };
string[] imageExt = { ".gif", ".jpeg", ".jpg", ".png", ".svg", ".blob" };
try
{
if (Array.IndexOf(imageMimetypes, mimeType) >= 0 && (Array.IndexOf(imageExt, extension) >= 0))
{
// Copy contents to memory stream.
Stream stream;
stream = new MemoryStream();
theFile.CopyTo(stream);
stream.Position = 0;
String serverPath = link;
// Save the file
using (FileStream writerFileStream = System.IO.File.Create(serverPath))
{
await stream.CopyToAsync(writerFileStream);
writerFileStream.Dispose();
}
// Return the file path as json
Hashtable imageUrl = new Hashtable();
imageUrl.Add("link", "/uploads/" + name);
return Json(imageUrl);
}
throw new ArgumentException("The image did not pass the validation");
}
catch (ArgumentException ex)
{
return Json(ex.Message);
}
}
}
Do you think we can improve this article? Let us know.