Skip to main content

PHP Upload File Using Ckeditor Example - Itwebtuts

Hii Developer,

In this example,I am going to show you How to do upload custom file with CKEDITOR in PHP application. In this tutorial i explain step by step example code of How to image upload with CKEDITOR php.

php ajax image upload with preview example

You can see simple example of php ckeditor custom image upload using browse button.

Here i give you full example of How to How to do custom file upload with in CKEDITOR step by step like create one file in this file we are integrate CKEDITO and secound another file which we are created for uploadin custom file.

Following The Step:

1)create one index.php file

2)create cstom file uploading file

Step:1 Create one index.php file

Now we have download CKEDITOR in our local PC. then we are create our index.php file and this file we are use CKEDITOR


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Ckeditor File Upload</title>
<script src="http://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea cols="10" id="editor1" name="editor1" rows="10" >
</textarea>
<script>

CKEDITOR.replace( 'editor1', {
height: 300,
filebrowserUploadUrl: "upload.php",

} );
</script>
</body>
</html>

now we are create one photos folder. in this folder we are use in our custom file uploading code. our all custom file which we are uploading from PC to CKEDITOR they all file store in this folder.

Step:2 Create Custom file uploading file

Now we are creating our custome file uploading file look like this "/upload.php".


// Define file upload path
$upload_dir = array(
'img'=> '/photos/',
);

// Allowed image properties
$imgset = array(
'maxsize' => 20000,
'maxwidth' => 1024,
'maxheight' => 800,
'minwidth' => 10,
'minheight' => 10,
'type' => array('bmp', 'gif', 'jpg', 'jpeg', 'png'),
);

// If 0, will OVERWRITE the existing file
define('RENAME_F', 1);

/**
* Set filename
* If the file exists, and RENAME_F is 1, set "img_name_1"
*
* $p = dir-path, $fn=filename to check, $ex=extension $i=index to rename
*/
function setFName($p, $fn, $ex, $i){
if(RENAME_F ==1 && file_exists($p .$fn .$ex)){
return setFName($p, F_NAME .'_'. ($i +1), $ex, ($i +1));
}else{
return $fn .$ex;
}
}

$re = '';
if(isset($_FILES['upload']) && strlen($_FILES['upload']['name']) > 1) {

define('F_NAME', preg_replace('/\.(.+?)$/i', '', basename($_FILES['upload']['name'])));

// Get filename without extension
$sepext = explode('.', strtolower($_FILES['upload']['name']));
$type = end($sepext); /** gets extension **/

// Upload directory
$upload_dir = in_array($type, $imgset['type']) ? $upload_dir['img'] : $upload_dir['audio'];
$upload_dir = trim($upload_dir, '/') .'/';

// Validate file type
if(in_array($type, $imgset['type'])){
// Image width and height
list($width, $height) = getimagesize($_FILES['upload']['tmp_name']);

if(isset($width) && isset($height)) {
if($width > $imgset['maxwidth'] || $height > $imgset['maxheight']){
$re .= '\\n Width x Height = '. $width .' x '. $height .' \\n The maximum Width x Height must be: '. $imgset['maxwidth']. ' x '. $imgset['maxheight'];
}

if($width < $imgset['minwidth'] || $height < $imgset['minheight']){
$re .= '\\n Width x Height = '. $width .' x '. $height .'\\n The minimum Width x Height must be: '. $imgset['minwidth']. ' x '. $imgset['minheight'];
}

if($_FILES['upload']['size'] > $imgset['maxsize']*1000){
$re .= '\\n Maximum file size must be: '. $imgset['maxsize']. ' KB.';
}
}
}else{
$re .= 'The file: '. $_FILES['upload']['name']. ' has not the allowed extension type.';
}

// File upload path
$f_name = setFName($_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir, F_NAME, ".$type", 0);
$uploadpath = $upload_dir . $f_name;

// If no errors, upload the image, else, output the errors
if($re == ''){
if(move_uploaded_file($_FILES['upload']['tmp_name'], $uploadpath)) {
$CKEditorFuncNum = $_GET['CKEditorFuncNum'];
$url = 'http://'.$_SERVER['HTTP_HOST'].'/'.'ckeditor/'. $upload_dir . $f_name;
$msg = F_NAME .'.'. $type .' successfully uploaded: \\n- Size: '. number_format($_FILES['upload']['size']/1024, 2, '.', '') .' KB';
$re = in_array($type, $imgset['type']) ? "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>":'<script>var cke_ob = window.parent.CKEDITOR; for(var ckid in cke_ob.instances) { if(cke_ob.instances[ckid].focusManager.hasFocus) break;} cke_ob.instances[ckid].insertHtml(\' \', \'unfiltered_html\'); alert("'. $msg .'"); var dialog = cke_ob.dialog.getCurrent();dialog.hide();</script>';
}else{
$re = '<script>alert("Unable to upload the file")</script>';
}
}else{
$re = '<script>alert("'. $re .'")</script>';
}
}

// Render HTML output
@header('Content-type: text/html; charset=utf-8');
echo $re;

Now we are ready to run our example.

It will help you...

Comments

Popular posts from this blog

Laravel Scout Algolia Full Text Search Example

Hi Guys Today,I will tell how you can full text search utilizing scout algolia. i will show the example of laravel scout algolia full text search.you can full text search utilizing scout algolia api.it can this example full expound scout algolia full text search. I will show the rudimental step of scout algolia api full text search.if you can utilize full text search for install scout and Algolia api package.we are utilizing algolia api utilizing full text search example in laravel. Here the following steps example laravel full text search Using scout algolia Step 1: Create Laravel Project In this step create laravel project following command. composer create-project --prefer-dist laravel/blog Step 2: Database Configuration After create laravel project , we require to make database configuration, you have to add following details on your .env file. 1.Database Username 1.Database Password 1.Database Name In .env file also available host and port details, you can configu...

Laravel IP Address Using Get Location Example

Hi Dev, Today,I will learn you how to get location useing ip address in laravel. we will show example of laravel ip address using get location. you can easy to get location useing ip address in laravel.In this example, I will useing stevebauman/location packege get location useing ip address in laravel. Many time you will need to get visitor's details for security, spam prevention etc. It's very easy to get visitor ip address and their location in PHP Laravel. Step 1: Install stevebauman/location Now, We will install stevebauman/location package using below command.Require this package with composer. It is recommended to only require the package for development. composer require stevebauman/location Step 2: Add providers and aliases In this step,We will add below providers and aliases in the "config/app.php" file. config/app.php 'providers' => [ .... Stevebauman\Location\LocationServiceProvider::class, ], 'aliases' => [ .... 'Loca...

React Native Flexbox Tutorial With Example

Hi Dev, Today, I will learn you how to create flexbox in react native. You can easily create flexbox in react native. First i will import namespace View , after I will make flexbox using View tag in react native. Here, I will give you full example for simply display flexbox using react native as bellow. Step 1 - Create project In the first step Run the following command for create project. expo init flexbox Step 2 - App.js In this step, You will open App.js file and put the code. import React, { Component } from 'react' import { View, StyleSheet } from 'react-native' const Home = (props) => { return ( <View style = {styles.container}> <View style = {styles.redbox} /> <View style = {styles.greenbox} /> <View style = {styles.corolbox} /> <View style = {styles.purplebox} /> </View> ) } export default Home const styles = StyleSheet.create ({ container: { flexDirection:...