New Froala Editor v5.0.0 is here – Learn More
Froala Documentation
- Froala Docs
- /
- Server Integrations
- /
- PHP
- /
- File Upload
PHP
File Upload
The following sections describe how to handle file uploads on your server using PHP as a server-side language. For information on the upload workflow refer to the file upload documentation.
Frontend
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 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
upload_file.php file handles the upload part. It has basic file format validations that can be easily extended.
TThe uploads directory must be set to a valid location before making uploads. The path can be any folder that is accessible and writable.
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/uploads/name_of_file"}.
<?php
try {
// File Route.
$fileRoute = "/uploads/";
$fieldname = "file";
// Get filename.
$filename = explode(".", $_FILES[$fieldname]["name"]);
// Validate uploaded files.
// Do not use $_FILES["file"]["type"] as it can be easily forged.
$finfo = finfo_open(FILEINFO_MIME_TYPE);
// Get temp file name.
$tmpName = $_FILES[$fieldname]["tmp_name"];
// Get mime type. You must include fileinfo PHP extension.
$mimeType = finfo_file($finfo, $tmpName);
// Get extension.
$extension = end($filename);
// Allowed extensions.
$allowedExts = array("txt", "pdf", "doc","json","html");
// Allowed mime types.
$allowedMimeTypes = array("text/plain", "application/msword", "application/x-pdf", "application/pdf", "application/json","text/html");
// Validate file.
if (!in_array(strtolower($mimeType), $allowedMimeTypes) || !in_array(strtolower($extension), $allowedExts)) {
throw new \Exception("File does not meet the validation.");
}
// Generate new random name.
$name = sha1(microtime()) . "." . $extension;
$fullNamePath = dirname(__FILE__) . $fileRoute . $name;
// Check server protocol and load resources accordingly.
if (isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] != "off") {
$protocol = "https://";
} else {
$protocol = "http://";
}
// Save file in the uploads folder.
move_uploaded_file($tmpName, $fullNamePath);
// Generate response.
$response = new \StdClass;
$response->link = $protocol.$_SERVER["HTTP_HOST"].dirname($_SERVER["PHP_SELF"]).$fileRoute . $name;
// Send response.
echo stripslashes(json_encode($response));
} catch (Exception $e) {
// Send error response.
echo $e->getMessage();
http_response_code(404);
}
?>
Additional Resources
- Building a Support System Using Laravel PHP Framework and Froala HTML Editor Software – Part 1
- Building a Support System Using Laravel PHP Framework and Froala HTML Editor Software – Part 2
- Building a Support System Using Laravel PHP Framework and Froala HTML Editor Software – Part 3
- How To Use WYSIWYG Editor In PHP
Do you think we can improve this article? Let us know.
