Need some help with uploading multiple files

[Ventech_IT]

Hi Guys and Gals,

Im busy developing a small website for a client but i've hit a little snag, currently when i create a new "property" entry i can upload one picture with it that kind of defeats the purpose because i need to showcase the "property". how would I go about creating a album for a new property and then upload all the images with one upload field. Then how would I retrieve all the pictures in my view?

My current function for the upload looks like this:

function new_contractor(){
        $this->check_is_validated();
        $data = array('error' => '');
        $config = array(
            'upload_path' => './data/images/contractors/',
            'allowed_types' => 'png|jpg|jpeg',
            'max_size' => '204800',
            'encrypt_name' => true
        );

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

        if(!$this->upload->do_upload()) {
            $data['error'] = $this->upload->display_errors();
            $data['title'] = 'Create a new Contractor';
            $data['content'] = 'create_new_contractor';
            $this->load->view('templates/dashboard/template', $data);
        } else {
            $upload_data = $this->upload->data();
            $data=array(
                'contractor_name' => $this->security->xss_clean($_POST['contractor_name']),
                'contractor_email' =>  $this->security->xss_clean($_POST['contractor_email']),
                'contractor_logo' =>  $upload_data['file_name'],
                'contractor_description' => $this->security->xss_clean($_POST['post']),
                'contractor_number' => $this->security->xss_clean($_POST['contractor_number']),
                'contractor_address' => $this->security->xss_clean($_POST['contractor_address']),
                'contractor_website' => $this->security->xss_clean($_POST['contractor_website']),
                'active_contractor' => 1
            );
            $this->Contractor_m->insert_contractor($data);
            redirect(base_url().'admin/contractors');
        }
    }

please could someone show me a small demo?

[pritaeas]

upload all the images with one upload field

I'd suggest using a tool like plUpload or dropzone for this.

[Ventech_IT]

Hi i tried dropzone.js but i can't get it to work on a singel element, I don't want to make the entire form a dropzone just the images tab
but i tried many tutorials and just can't get it to work, any other way of doing this?

You use "multiple" attribute on file input. Haven't we been here before V?

From what I can see, you're still trying to insert Contractor details as well as Property images at the same time?
This doesn't make much sense to me. If you have a contractor, then I'm assuming that they need to be logged in to upload images for a property. Not sure how you're doing it.

I'm assuming that you have a set up something like this:

Properties: id | address1 | address2 | city | zipcode | contractor_id
Property_Images: id | filename | location | property_id
Contractors: id | name | email ...

If not, then show us your tables so we can at least guess.

[Ventech_IT]

Thanks for the reply, basically only one guy logs in to the site and is then presented with a dashboard from there he clicks on properties and then is presented with propert administration screen, from there he clicks on "create a new property" he is redirected to the property creation screen and is presented with a tabable panel the second tab's name is images where i have to add all the images for a property.

So i have to configure all of these form elemets first then post it to the database with all the images attached this is the problem im having reading the data into the database works fine but i don't know how to upload multiple files to the database and then in the view retrieve all the images associated with the property.

Sorry V, but without any punctuation, those long sentences have lost me completely.
Where are the images within upload data - i.e. $_FILES ?

[Ventech_IT]

Lol okay sorry about that!

Let's try again, I have a form that spans over a tabbed panel box. The first tab houses the property information, the second tab houses the upload form for the images of the property and the last tab has the property facilities on it. Now i want to fill in all the form elements and choose the pictures that should be associated with the property and upload them to my database.

After the upload, when i retrieve the property i want all it's info and images that are associated with it to be displayed. how would i do that?

Hmmm. I'm assuming that a contractor has to be logged in before posting a property. So I really can't see why you're littering the form with the contractor personal info. This should be a totally separate form should it not?
Not sure why the images would need to go on a separate tab, but hey, your choice. As the tab is nothing more than a show/hide visual trick, having a tab is really nothing more than a fancy heading.

I'm still lost as to what you're actually stuck with. You post images and data together - data comes from $_POST, images come from $_FILES.

[Ventech_IT]

Okay don't worry i came right, now i one more question my upload i working and all files get uploaded and associated with the tables.

Now let's say a table entry has 5 images how can i make one of those images a cover photo for that entry?

Now let's say a table entry has 5 images how can i make one of those images a cover photo for that entry?

Show your markup (form/s),
Show your relevant Database tables.

This is getting more obscure by the post. Do you want to know how to change your DB tables(s). Change the form html? To write the view? To pass the data from the form to the controller to the model? To pass the data from the model to the view? What?

[Ventech_IT]

Okay here is my create property function:

    function create_property()
    {
        $this->check_is_validated();
        $data['error'] = array('error' => '');
        $files = $_FILES;
        $prop = array(
            'property_name' => $this->input->post('property_name'),
            'property_slug' => $this->input->post('property_slug'),
            'property_type' => $this->input->post('property_type'),
            'property_state' => $this->input->post('property_state'),
            'property_price' => $this->input->post('property_price'),
            'property_address' => $this->input->post('property_address'),
            'property_description' => $this->input->post('property_description'),
            'active' => 1
        );

        $cap = $this->db->insert('property', $prop);
        $id = $this->db->insert_id();

        if ($cap > 0) {

            $count = count($_FILES['userfile']['name']);
            for ($i = 0; $i < $count; $i++) {
                $_FILES['userfile']['name'] = $files['userfile']['name'][$i];
                $_FILES['userfile']['type'] = $files['userfile']['type'][$i];
                $_FILES['userfile']['tmp_name'] = $files['userfile']['tmp_name'][$i];
                $_FILES['userfile']['size'] = $files['userfile']['size'][$i];
                $_FILES['userfile']['error'] = $files['userfile']['error'][$i];

                $this->upload->initialize($this->setup_upload_option());
                if ($this->upload->do_upload() == FALSE) {
                    $data['error'] = $this->upload->display_errors();
                    $data['title'] = 'Create a New Property';
                    $data['content'] = 'admin' . '/property/create_new_property';
                    $this->load->view('templates/dashboard/template', $data);
                } else {
                    $upload_data = $this->upload->data();
                    $data = array(
                        'image_id' => $id,
                        'image_name' => $upload_data['orig_name'],
                        'image_size' => $upload_data['file_size'],
                        'image_ext' => $upload_data['file_ext'],
                        'full_path' => $upload_data['file_path']
                    );
                    $this->db->insert('property_images', $data);
                }
            }
            redirect(base_url() . 'admin/properties');
        }
    }

And my tables are as follows:

property_images /
        /ID
        /image_id
        /image_name
        /image_size
        /image_ext
        /full_path

 property/
         /ID
         /property_name
         /property_slug
         /property_type
         /property_state
         /property_price
         /property_address
         /property_description
         /date_created
         /active

and here is the view in it's current form

        <div class="row">
            <?php if (count($result) == 0) {
                echo "<p class='text-center'>Oops, there are currently no items to display, please check back later!</p>";
            } else {
                foreach ($result as $item) {
                    ?>
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="property-container">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <div class="property-image">
                                        <img src="<?php ?>"  class="img-responsive">
                                    </div>
                                        <div class="property-price">
                                            <h4><?php echo $item['property_type'] ?></h4>
                                            <span>R<?php echo $item['property_price'] ?></span>
                                        </div>
                                        <div class="property-status">
                                            <span><?php echo $item['property_state']?></span>
                                        </div>
                                    </div>
                                    <div class="property-features">
                                        <span><i class="fa fa-home"></i> 5,000 m<sup>2</sup></span>
                                        <span><i class="fa fa-bed"></i> 2 Bed</span>
                                        <span><i class="fa fa-male"></i> 2 Bath</span>
                                    </div>
                                    <div class="property-content">
                                        <h3><a href="#"><?php echo $item['property_name'] ?></a>
                                            <small><?php echo $item['property_address'] ?></small>
                                        </h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php
                }
            }
            ?>
        </div>

so when my upload is complete i want to only use one image from all the uploaded as the thumb for the image to display in my view
so when i click on the property name i go to the detail page and all images are there.

Great thanks for that. But I still don't see the tabbed form that you're using to upload.

You will need a way of choosing a main pic. If you're using "multiple" attribute single file input.
This can't really be done from the form prior to submission unless you use some modern browser jiggery-pokery, e.g. FileReader(), and dynamically add radiobuttons for each one. That's just an idea I've got floating around at the moment.

<input type="file" name="images" multiple />

So an alternative would be to upload all images and then have an Edit Form to select the image to thumbnail. That isn't very nice though - having to come back to add more info.

Yet another alternative would be to have a number of individual file inputs - more could be added dynamically by javascript if required.
You could set the first file input to be the thumbnail one. So like:

Main image: <input type="file" name="thumb" />
Additional image: <input type="file" name="additional[]" />
Additional image: <input type="file" name="additional[]" />
Additional image: <input type="file" name="additional[]" />

If you're wondering how to store this info, well you could have an additional field in the property_images table:

property_images /
        /ID
        /image_id
        /image_name
        /image_size
        /image_ext
        /full_path
        /thumbnail (tinyint: 0 = false or 1 = true)

These are just a few random thoughts.