Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

.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 Editor style. -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- Include Editor JS files. -->
<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>

<!-- Initialize the editor. -->
<script>
new FroalaEditor('#edit', {
// Set the image upload URL.
imageUploadURL: '/UploadFiles',

imageUploadParams: {
id: 'my_editor'
}
})
</script>
</body>
</html>

Backend

HomeController.csis 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 action. If the uploaded file passes the validation step, the server responds with a JSON object containing a link to the uploaded file.

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
{
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(@"\", "/"));
}
}

Do you think we can improve this article? Let us know.

Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_199924233" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1122147074" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1710133996" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>