how to submit image and user data as whole??

[shany0786]

Question is not new but i can't make it work.I have registration form along with user registration form i also have a upload picture options.These are views

// view for user data

      <form action="<?php echo base_url('Camping_register/register') ?>" method="post">
                        <h2>Camping <span class="red"><strong>Rent Details</strong></span></h2>
                        <label for="business_name">Business Name</label>
                        <input type="text" id="business_name" name="business_name" placeholder="enter your business name">
                        <label for="rental_description">Rental Description</label>
                        <textarea type="text" id="rental_description" name="rental_description"></textarea>
                        <button type="submit" name="submit">REGISTER</button>
                        <?php
                        $message = $this->session->flashdata('msg');
                        if($message){
                        echo '<div id="error_text">' . '<strong>'.$message .'</strong>'. '</div>';
                        }   
                        ?>



                </div>
            </div>
        </div>

//view for image upload

        <div class="register-container container">
            <div class="row">
                <div class="iphone span5">
                    <h4>Select files from your computer(For Camping)</h4>

             <div class = "upload-image-messages"></div>

          <?php echo form_open_multipart('upload/do_upload', array('class' => 'upload-image-form'));?>
            <div class="form-inline">
              <div class="form-group">
                <input type="file" name="uploadfile[]" accept = "image/*" multiple = "multiple" size="20" /> <br />
              </div>
              <button type="submit" value="upload" class="btn btn-sm btn-primary" name="submit">Upload files</button>
            </div>
                     <script>                   
        jQuery(document).ready(function($) {

            var options = {
                beforeSend: function(){
                    // Replace this with your loading gif image
                    $(".upload-image-messages").html('<p><img src = "<?php echo base_url() ?>img/images.png" class = "loader" /></p>');
                },
                complete: function(response){
                    // Output AJAX response to the div container
                    $(".upload-image-messages").html(response.responseText);
                    $('html, body').animate({scrollTop: $(".upload-image-messages").offset().top-100}, 150);

                }
            }; 
            // Submit the form
            $(".upload-image-form").ajaxForm(options); 

            return false;

        });
        </script>

          </form>

as we can see i have different controllers.
So i need when user click on register all the data along with image name is saved in database.I don't want to add upload button along with image form.

this is my image upload.php controller
http://pastebin.com/JcxpwTGv

We can find many tutorials form uploading user data or only images but no where we can find for submitting form as whole.

[diafol]

Ajax upload of images is tricky and partially supported on older browsers, however it can be done and I showed the technique in a recent post:

https://www.daniweb.com/programming/web-development/threads/499723/open-new-form-on-button-click-in-another-form#post2185143

Hope it helps. Come back with any questions.

[shany0786]

thnks but I don't have problem in uploading the image or user data to database but i want when user clicks on register [images+user data ]submitt altogether.

I find many tutorials for form uploading user data or only images but no where we can find for submitting form as whole.

[diafol]

You can do your multipart form with normal inputs as well as the file inputs.

<?php echo form_open_multipart('upload/do_upload', array('class' => 'upload-image-form'));?>
    <h2>Camping <span class="red"><strong>Rent Details</strong></span></h2>
    <label for="business_name">Business Name</label>
    <input type="text" id="business_name" name="business_name" placeholder="enter your business name">
    <label for="rental_description">Rental Description</label>
    <textarea type="text" id="rental_description" name="rental_description"></textarea>
    <div class="form-inline">
          <div class="form-group">
            <input type="file" name="uploadfile[]" accept = "image/*" multiple = "multiple" size="20" /> <br />
          </div>
    <button type="submit" class="btn btn-sm btn-primary" name="submit">REGISTER</button>
    </div> 
</form>

Place your js scripts just before the </body> tag. Of course you will need to send all data to one file (action). So you pick them (files and data) up there. Not knowing which framework you're using, can't say more than that.

[shany0786]

I am using codeigniter is it illegal to use $this->input->post("uploadfile"); for file upload it always give me null when i click on register button

[diafol]

$businessName = $this->input->post('business_name');

The uploaded files can be gotten by $_FILES superglobal and parsed yourself or I think CI has an upload library that you can use to extract info from the file.
Once you have the name, you can use it along with the other data from the post vars to place into an INSERT query.

See http://stackoverflow.com/questions/20113832/multiple-files-upload-in-codeigniter

[diafol]

Bit confused with this post. You are running 2 different queries? Assuming you have something like:

users: id | username | password ...
userimages: id | filepath | user_id ...

So after you insert the reg info to the users table, you get the last inserted id and use that to insert image data into the userimages table. After all, you are using 'multiple', so I'm assuming that the registrant can upload many files during registration submission.