.NET WebForms

Image Upload

The following sections describe how to handle image uploads on your server using .NET WebForms as a server-side language. For information on the upload workflow refer to the file upload documentation.

Frontend

Add the following to Default.aspx

On the head section include the Editor style.

<!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>

On the body section include the Editor JS files and define the area for the editor.

<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>

Initialize the editor and set the image upload URL

  <script>
    new FroalaEditor('#edit', {
      // Set the image upload URL.
      fileUploadURL: '/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 upload.aspx handles the request and the upload action. The uploads directory is created automatically if it does not exist under "project_root"/Files/. The root directory must be writable, otherwise the upload directory will not be created.

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 upload.aspx:

public partial class Upload : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.Files["file"] != null)
        {
            HttpPostedFile 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);
  
                    // Generate random name.
                    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" };
  
                    // Basic validation for mime type
                    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 upload errors.
                    }
                }
            }
            catch (Exception ex)
            {
                // Handle errors
            }
        }
    }
  
    // 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.

.NET WebForms

Image Upload

Frontend

Backend

Ready to dive in? Explore our plans