Upload photo with thumbnail preview, using codeigniter - php

Question

How can i make a registration form where i upload an image for my profile picture, and before clicking register, there's a preview of the image that i want to set as the profile picture using CI??
here's my registration form code
register_model.php
<?php
class Register_model extends CI_Model
{
function create_user($photo_name)
{
$new_user_insert_data = array(
'id' => '',
'email' => $this->input->post('email'),
'password' => md5($this->input->post('password')),
'name' => $this->input->post('name'),
'major' => $this->input->post('user_major'),
'year' => $this->input->post('user_year'),
'bio' => $this->input->post('bio'),
'profpic' => $photo_name,
'insta' => $this->input->post('instagram'),
'twitter' => $this->input->post('twitter'),
'facebook' => $this->input->post('facebook'),
'vote_count' => '10',
'vote' => '0',
'gender' => $this->input->post('gender'),
);
$insert = $this->db->insert('user', $new_user_insert_data);
return $insert;
}
}
?>
Here's the view
register.php
<div class="margin-top-87">
<div class="container">
<h1>Register</h1>
<hr>
<div class="row">
<!-- left column -->
<div class="col-md-3">
<div class="text-center">
<img src="//placehold.it/100" class="avatar img-circle" alt="avatar">
<?php
if(!empty($_FILES['userfile'])){
$name_array = array();
$count = count($_FILES['userfile']['size']);
foreach($_FILES as $key => $value)
for ($s=0; $s<=$count-1; $s++)
{
//Original Image Upload - Start
$_FILES['userfile']['name'] = $value['name'][$s];
$_FILES['userfile']['type'] = $value['type'][$s];
$_FILES['userfile']['tmp_name'] = $value['tmp_name'][$s];
$_FILES['userfile']['error'] = $value['error'][$s];
$_FILES['userfile']['size'] = $value['size'][$s];
$config['upload_path'] = './public/images/campaign-images/';
$config['allowed_types'] = 'gif|jpg|jpeg|png|GIF|JPG|JPEG|PNG';
$config['max_size'] = '10000';
//$config['max_width'] = '1024';
//$config['max_height'] = '768';
$CI->load->library('upload', $config);
$CI->upload->do_upload();
$data = $CI->upload->data();
//Original Image Upload - End
//Thumbnail Image Upload - Start
$config['image_library'] = 'gd2';
$config['source_image'] = './public/images/campaign-images/'. $value['name'][$s];
$config['new_image'] = './public/images/campaign-images/thumbs/'.$value['name'][$s];
$config['width'] = 350;
$config['height'] = 250;
//load resize library
$this->load->library('image_lib', $config);
$this->image_lib->resize();
//Thumbnail Image Upload - End
$name_array[] = $data['file_name'];
}
return $name_array;
}
?>
<h6>Please use real photo, not an avatar</h6>
<?php
$data= array
(
'name' => 'userfile',
'type' => 'file',
'class' => 'form-control',
'id' => 'form_register'
);
echo form_upload($data);
?>
</div>
</div>
<!-- edit form column -->
<div class="col-md-9 personal-info">
<div class="alert alert-info fade in">
<strong>Info!</strong> Please fill with real information of yours.
</div>
<?php
if(validation_errors('<p class="error">'!=""))
{?>
<div class="alert alert-danger fade in">
×
<strong>Attention!</strong> <?php echo validation_errors('<p class="error">') ?>
</div><?php
}?>
<h3>Personal info</h3>
<?php $attributes = array('class' => 'form-horizontal', 'role' => 'form', 'id' => 'form_register'); echo form_open('index/create_user',$attributes); ?>
<div class="form-group">
<label class="col-lg-3 control-label">UC Student email :</label>
<div class="col-lg-8">
<?php
$data= array
(
'name' => 'email',
'placeholder' => 'Ciputra student email. Example : email#student.ciputra.ac.id',
'type' => 'email',
'class' => 'form-control',
'required' => 'required'
);
echo form_input($data);
?>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Name :</label>
<div class="col-lg-8">
<?php
$data= array
(
'name' => 'name',
'placeholder' => 'Full name. Example : Front Middle Last',
'type' => 'text',
'class' => 'form-control',
'required' => 'required'
);
echo form_input($data);
?>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Gender :</label>
<div class="col-lg-8">
<div class="ui-select">
<?php
$options = array
(
'' => 'Gender',
'Man' => 'Man',
'Woman' => 'Woman'
);
echo form_dropdown('gender', $options, '', 'class="form-control"');
?>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Major :</label>
<div class="col-lg-8">
<div class="ui-select">
<?php
$options = array
(
'' => 'Insert your major',
'CB' => 'CB',
'FDB' => 'FDB',
'IBM-IC' => 'IBM-IC',
'IBM-RC' => 'IBM-RC',
'IBA' => 'IBA',
'IHTB' => 'IHTB',
'IMT' => 'IMT',
'INA' => 'INA',
'MCM' => 'MCM',
'MIS' => 'MIS',
'PSY' => 'PSY',
'VCD' => 'VCD'
);
echo form_dropdown('user_major', $options, '', 'class="form-control"');
?>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Year :</label>
<div class="col-lg-8">
<div class="ui-select">
<?php
$options = array('' => 'Year joined UC');
for ($i = date('Y'); $i >= 2006; $i--)
{
$options[$i] = $i;
}
echo form_dropdown('user_year', $options, '', 'class="form-control"');
?>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password :</label>
<div class="col-md-8">
<?php
$data= array
(
'name' => 'password',
'placeholder' => 'Password',
'type' => 'password',
'class' => 'form-control',
'required' => 'required',
'maxlength' => '15'
);
echo form_password($data);
?>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm password :</label>
<div class="col-md-8">
<?php
$data= array
(
'name' => 'cpassword',
'placeholder' => 'Confirm Password',
'type' => 'password',
'class' => 'form-control',
'required' => 'required',
'maxlength' => '15'
);
echo form_password($data);
?>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Short Bio :</label>
<div class="col-lg-8">
<?php
$data= array
(
'name' => 'bio',
'placeholder' => 'Short bio (max 128 character)',
'type' => 'text',
'class' => 'form-control',
'maxlength' => '128',
'rows' => '3'
);
echo form_textarea($data);
?>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Facebook :</label>
<div class="col-lg-8">
<?php
$data= array
(
'name' => 'facebook',
'placeholder' => 'Facebook Profile link. Example : facebook.com/name',
'type' => 'url',
'class' => 'form-control',
);
echo form_input($data);
?>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Twitter :</label>
<div class="col-lg-8">
<?php
$data= array
(
'name' => 'twitter',
'placeholder' => 'Twitter Profile link. Example : #name',
'type' => 'url',
'class' => 'form-control',
);
echo form_input($data);
?>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Instagram :</label>
<div class="col-lg-8">
<?php
$data= array
(
'name' => 'instagram',
'placeholder' => 'Instagram Profile link. Example : #name',
'type' => 'url',
'class' => 'form-control',
);
echo form_input($data);
?>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<?php
$data= array
(
'name' => 'register',
'value' => 'Register',
'type' => 'submit',
'class' => 'btn btn-primary',
);
echo form_submit($data);
?>
<span></span>
<?php
$data= array
(
'name' => 'reset',
'value' => 'Clear',
'type' => 'reset',
'class' => 'btn btn-default',
);
echo form_reset($data);
?>
</div>
</div>
</form>
<?php echo form_close(); ?>
</div>
</div>
</div>
<hr>
</div>

Answer 1

The "preview before uploading" thing is a javascript trick that loads the local file into the <img> source. The rest is simple file upload where you check the file types, size, resolution etc.
Here is your answer: Preview an image before it is uploaded