New Froala Editor v5.0.0 is here – Learn More
Froala Documentation
- Froala Docs
- /
- Server Integrations
- /
- PHP
- /
- Image Upload
PHP
Image Upload
The following sections describe how to handle image uploads on your server using PHP as a server-side language. For information on the upload workflow refer to the image upload documentation.
Frontend
Setting up 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 image 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>image upload example.</h2>
<form>
<textarea id="edit" name="content"></textarea>
</form>
</div>
<script>
new FroalaEditor('#edit', {
// Set the image upload URL.
imageUploadURL: '/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',
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
upload_image.php handles the upload part. It has basic image format validations that can be easily extended.
The 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 image 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.
$mimeType = finfo_file($finfo, $tmpName);
// Get extension. You must include fileinfo PHP extension.
$extension = end($filename);
// Allowed extensions.
$allowedExts = array(
"gif", "jpeg", "jpg",
"png", "svg", "blob"
);
// Allowed mime types.
$allowedMimeTypes = array(
"image/gif", "image/jpeg", "image/pjpeg",
"image/x-png", "image/png", "image/svg+xml"
);
// Validate image.
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.
