Skip to content

Instantly share code, notes, and snippets.

@florinpopescu

florinpopescu/file_upload.php

Last active March 2, 2022 03:56
Show Gist options
  • Save florinpopescu/3e9098b139351c29f3d1ace8032b9d7e to your computer and use it in GitHub Desktop.
Save florinpopescu/3e9098b139351c29f3d1ace8032b9d7e to your computer and use it in GitHub Desktop.
Download ZIP
Froala WYSIWYG Editor - PHP integration example
Raw
file_upload.php
<?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');
// Allowed mime types.
$allowedMimeTypes = array('text/plain', 'application/msword', 'application/x-pdf', 'application/pdf');
// 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 = $_SERVER['DOCUMENT_ROOT'] . $fileRoute . $name;
// Save file in the uploads folder.
move_uploaded_file($tmpName, $fullNamePath);
// Generate response.
$response = new \StdClass;
$response->link = $fileRoute . $name;
// Send response.
echo stripslashes(json_encode($response));
} catch (Exception $e) {
// Send error response.
echo $e->getMessage();
http_response_code(404);
}
?>
Raw
image_upload.php
<?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 = $_SERVER['DOCUMENT_ROOT'] . $fileRoute . $name;
// Save file in the uploads folder.
move_uploaded_file($tmpName, $fullNamePath);
// Generate response.
$response = new \StdClass;
$response->link = $fileRoute . $name;
// Send response.
echo stripslashes(json_encode($response));
} catch (Exception $e) {
// Send error response.
echo $e->getMessage();
http_response_code(404);
}
?>
Raw
index.php
<?php
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"./>
<script src="./jquery/jquery.min.js"></script>
<!-- Include Font Awesome. -->
<link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Include Froala Editor styles -->
<link rel="stylesheet" href="./wysiwyg-editor/css/froala_editor.min.css" />
<link rel="stylesheet" href="./wysiwyg-editor/css/froala_style.min.css" />
<!-- Include Froala Editor Plugins styles -->
<link rel="stylesheet" href="./wysiwyg-editor/css/plugins/char_counter.css">
<link rel="stylesheet" href="./wysiwyg-editor/css/plugins/code_view.css">
<link rel="stylesheet" href="./wysiwyg-editor/css/plugins/colors.css">
<link rel="stylesheet" href="./wysiwyg-editor/css/plugins/emoticons.css">
<link rel="stylesheet" href="./wysiwyg-editor/css/plugins/file.css">
<link rel="stylesheet" href="./wysiwyg-editor/css/plugins/fullscreen.css">
<link rel="stylesheet" href="./wysiwyg-editor/css/plugins/image_manager.css">
<link rel="stylesheet" href="./wysiwyg-editor/css/plugins/image.css">
<link rel="stylesheet" href="./wysiwyg-editor/css/plugins/line_breaker.css">
<link rel="stylesheet" href="./wysiwyg-editor/css/plugins/table.css">
<link rel="stylesheet" href="./wysiwyg-editor/css/plugins/video.css">
<!-- Include Froala Editor -->
<script src="./wysiwyg-editor/js/froala_editor.min.js"></script>
<!-- Include Froala Editor Plugins -->
<script src="./wysiwyg-editor/js/plugins/align.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/char_counter.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/code_beautifier.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/code_view.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/colors.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/emoticons.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/entities.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/file.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/font_family.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/font_size.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/fullscreen.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/image.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/image_manager.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/inline_style.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/line_breaker.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/link.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/lists.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/paragraph_format.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/paragraph_style.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/quote.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/save.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/table.min.js"></script>
<script src="./wysiwyg-editor/js/plugins/video.min.js"></script>
<!-- End Froala -->
</head>
<body>
<h2>File/Image upload example.</h2>
<form>
<textarea id="edit" name="content"></textarea>
</form>
<script>
$(function() {
$('#edit').froalaEditor({
imageUploadURL: './upload_image.php',
imageUploadParams: {
id: 'my_editor'
},
fileUploadURL: './upload_file.php',
fileUploadParams: {
id: 'my_editor'
},
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment