Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

.NET Core Framework

Image Upload

The following code example illustrates how to handle image upload on your server using .Net Core Framework 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 does 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
{
  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);
    }
  }
}
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_394492077" 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_1440205443" 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_491395512" 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>