Kārlis Janisels Kārlis Janisels - 1 year ago 67
PHP Question

How to display uploaded picture immediately inside submition form (CodeIgniter)?

I want to create form where users can add products to database. They have to upload picture and choose couple of options from select boxes. So far I have my controller and view working fine - I validate both the upload and select boxes, set values to select boxes if some error accoured.

However, I want my users to be able to see uploaded picture and do some manipulations if necessary (rotate, crop - I am pretty sure that I know how to do that so it is not the question here) before submitting hole form.

The desired steps would look something like this:

  1. There is button "upload picture" OR picture gets uploaded automatically. (if there is button I have to change validation settings for upload)

  2. Picture is dynamically displayed to user ( have some ideas how to do it but I can not test them because of missing first step)

  3. User does some manipulation

  4. If user exits before submitting I delete uploaded picture (pretty sure I can handle this one)

Here is my code so far

public function create()
$this->load->helper(array('form', 'url'));

$this->form_validation->set_rules('health', 'Health', 'required');
$this->form_validation->set_rules('manufacturer', 'Manufacturer', 'required');
if (empty($_FILES['product']['name']))
$this->form_validation->set_rules('product', 'Document', 'required');

$data['manufacturer'] = $this->input->get('manufacturer');

if ($this->form_validation->run() === FALSE)
$data['head'] = $this->load->view('templates/head', NULL, TRUE);
$data['navmenu'] = $this->load->view('templates/navmenu', NULL, TRUE);
$this->load->view('products/create', $data);
$user_id = $this->tank_auth->get_user_id();

$config['upload_path'] = './uploads/';
$config['allowed_types'] = 'gif|jpg|png';
$config['file_name'] = $user_id;
$config['max_size'] = 100;
$config['max_width'] = 1024;
$config['max_height'] = 768;

$this->load->library('upload', $config);

if ( ! $this->upload->do_upload('product'))
$error = array('error' => $this->upload->display_errors());

$this->load->view('products/create', $error);
$id = $this->db->insert_id();
$image_data = $this->upload->data();
$image['image_url'] = $image_data['file_name'];
$this->db->where ('product_id', $id);
$this->db->update('products', $image);

and view:

<?php echo form_open_multipart('products/create'); ?>

<input type="file" name="product" size="20" />
<?php echo form_error('product'); ?><br />
<br /><br />

<label for="health">Health</label>
<select name="health">
<option disabled selected value> -- select a health option -- </option>
<option value="new">New</option>
<option value="used">Used</option>
<?php echo form_error('health'); ?><br />

<label for="manufacturer">Manufacturer</label>
<select name="manufacturer" >
<option disabled selected value> -- select an manufacturer -- </option>
<option value="manufacturer1" <?php echo set_select('manufacturer','manufacturer1', ( !empty($manufacturer) && $manufacturer == "manufacturer1" ? TRUE : FALSE )); ?> >Manufacturer1</option>
<option value="manufacturer2" <?php echo set_select('manufacturer','manufacturer2', ( !empty($manufacturer) && $manufacturer == "manufacturer2" ? TRUE : FALSE )); ?> >Manufacturer2</option>
<option value="manufacturer3" <?php echo set_select('manufacturer','manufacturer3', ( !empty($manufacturer) && $manufacturer == "manufacturer3" ? TRUE : FALSE )); ?> >Manufacturer3</option>
<option value="manufacturer4" <?php echo set_select('manufacturer','manufacturer4', ( !empty($manufacturer) && $manufacturer == "manufacturer4" ? TRUE : FALSE )); ?> >Manufacturer4</option>
<?php echo form_error('manufacturer'); ?><br />

<input type="submit" name="submit" value="Create product item" />

Sorry If code is unclean in some places - it`s in development proceses. I have tried to split form into two but really lost in controllers code. General idea, pseidocode - anything that would get me on right track would be great!

Answer Source

Use Jquery To Do This

function ShowImage(input) {

if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#imgpreview').attr('src', e.target.result);




    <input type='file' id="imgupload" />
    <img id="imgpreview" src="#" alt="your image" />
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download