HTML 5 PHP CodeIgniter Upload


Hi there! As I am working on a certain project (the Metacritic API is suspended due to a project from my office) I need to create a feature in uploading multiple files. Well, I hate to use jQ multiple upload or creating many fields to upload many files. Thank God there is HTML 5! This post contains the combination of HTML 5 multiple upload and processing using PHP Codeigniter.

So let’s make it simple!

First we have to make the view. The view will mainly contains upload field. In this example I will create two fields. The one that have multiple attribute and the one that don’t.

</pre>
<div>
<div></div>
 <!--?php echo form_upload('img', ''); ?--></div>
<div>
<div></div>
 <!--?php echo form_upload('gallery[]', '', 'multiple=""'); ?--></div>
<pre>

Second, let’s focus on the background process. There is a reason why I put two fields there (the one with multiple and the one without). I want to make the process can manage different situations. So here is the code.

$pathtoDB ='assets/images/' . date("YmdHis"); // create a folder with unique name

$this->load->library('upload'); // remember to load the library outside the loop

if(!file_exists($pathtoDB)){
    @mkdir($pathtoDB,0700,TRUE);
}

foreach ($_FILES as $key => $value) {
    $total_count_of_files = count($_FILES[$key]['name']);
    for($i=0; $i<$total_count_of_files; $i++)     {         if ($total_count_of_files >= 1 && is_array($_FILES[$key]['name'])){ // this part will process the files if they are from multiple field
            $_FILES['file']['name'] = $_FILES[$key]['name'][$i];
            $_FILES['file']['type'] = $_FILES[$key]['type'][$i];
            $_FILES['file']['tmp_name'] = $_FILES[$key]['tmp_name'][$i];
            $_FILES['file']['error'] = $_FILES[$key]['error'][$i];
            $_FILES['file']['size'] = $_FILES[$key]['size'][$i];
        }else{
            $_FILES['file'] = $_FILES[$key]; // this part will process the file from single field
        }

        $config['allowed_types'] = 'gif|jpg|jpeg|png';
        $config['upload_path'] = $pathtoDB;
        $config['max_size'] = '0';
        $config['overwrite'] = FALSE;
        $this->upload->initialize($config);
        if (!$this->upload->do_upload()) // Here I did not refer to a certain field to upload
        {
            $uploaded_info[]  =  array('error_msg' => $this->upload->display_errors());
        }
    }
}

You can place the second code chunk on your controller.

That’s all. Simple and clear I think. 😀 Feel free to comment.

UPDATE: I made a little change to the code above on line 13. It now handles if the multiple upload field only contains one file selected (not many)

File Uploading for CKEditor using CodeIgniter


I know, I know that I haven’t uploaded the source code of my simple project, Blog Manager, yet to github. I have already created the repository, though. This is just a notification update on Blog Manager.

As my boss really planned to make it a wordpress like text editor when adding a post, so I work on CKEditor, a great editor I must say, but quite tiring to create the file browser (it’s just me I think). For now, I have also added the Blog Manager category on this blog, Various Talks.

AS for your information, to create simple upload dialog on CKEditor, you can use the code chunk below for PHP.

PS. I was inspired by this post. So I lazily changed it for CodeIgniter. Yeah because I’d rather change than rethink about the algorithm and read a long example. LOL

public function addphoto($blogID){
	$this->load->model('BlogModel'); // the model that communicate with blog

	$config['upload_path'] = './uploads/';
	$config['allowed_types'] = 'gif|jpg|jpeg|png';
	$config['overwrite'] = FALSE;
	$this->load->library('upload');


	$funcNum = $this->input->get('CKEditorFuncNum'); //$_GET['CKEditorFuncNum']
	$this->upload->initialize($config);
		
	if (!$this->upload->do_upload('upload')){ // upload the file, 'upload' is the name of the field from CKEditor
		 // failed upload
		$message = "Upload failed on blog manager server.";
		$url = '';
	
	}else{ // success copy to wp server
		$upload_result = base_url() . 'uploads/'. $this->upload->data()['file_name'];
		$upload_name = $this->upload->data()['file_name'];

		// after finished uploading, it will receive a URL
		$url = $this->BlogModel->UploadImage($blogID, $upload_result, $upload_name); 

		$message = 'Upload success!';
	}
	echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
}

Feel free to notify me if you’re interested in this.

Be free to visit it in here!