- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
.NET WebForms
File Upload
The following sections describe how to handle file 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. - On the
body
section include the Editor JS files and define the area for the editor. - Initialize the editor and set the file 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>File upload example.</h2>
<form>
<textarea id="edit" name="content"></textarea>
</form>
</div>
<script>
new FroalaEditor('#edit', {
// Set the file upload URL.
fileUploadURL: '/UploadFiles',
fileUploadParams: {
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>File upload example.</h2>
<form>
<textarea id="edit" name="content"></textarea>
</form>
</div>
<script>
new FroalaEditor('#edit', {
fileUploadURL: '/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.
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 = { ".txt", ".pdf", ".doc", ".json", ".html" };
// Basic validation for mime type
string[] AllowedMimeType = { "text/plain", "application/msword", "application/x-pdf", "application/pdf", "application/json","text/html" };
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.