Is it possible to upload a file along with several data via iframe?

Question

I am using codeigniter and Jquery. I have an upload form in my view script. The upload form consist of several text inputs and a file input. The form will popped out when someone click on it's menu link ( I did it with Jquery Modal form). Is it any possible way to simulate an ajax call upon the form submit? so when user click submit, the file would be send to a directory on the server and so the information would be stored in the database.

here's my code: THE VIEW:

<div id="right_column" class="grid_7 omega">
        <section id="music_features">
            <header>
                <hgroup>
                    <h1>Your Playlist</h1>
                    <p>Up to only 3 files allowed for beta version</p>
                </hgroup>
            </header>
            <p id="song_upload_menu"><?php echo anchor('#', 'Upload Song');?></p>
            <article id="song_upload_form">
                <div id="song_upload_info">
                    <?php echo $this->session->flashdata('info'); ?>
                </div>
                <?php echo form_open_multipart('profile/do_upload_song');?>
                <input type="hidden" id="user_id" name="user_id" value="<?php echo $user->id_str;?>" />
                <label for="title">Song Title</label>
                <input type="text" name="title" id="title" size="30" value="<?php echo set_value('title'); ?>"/><br />
                <label for="album"> Album Title </label>
                <input type="text" name="album" id="album" size="30" value="<?php echo set_value('album'); ?>"/><br />
                <label for="artist">Artist</label>
                <input type="text" name="artist" id="artist" size="20" value="<?php echo set_value('artist'); ?>"/><br />
                <input type="file" name="userfile" size="20" /><br />
                <input type="radio" name="license" id="license" value="owner"/>I AM the artist/owner of this song and I have the right for distribution<br />
                <input type="radio" name="license" id="license" value="not owner"/>I AM NOT the artist/owner of this song BUT I have the right for distribution</br>
                <input type="checkbox" name="song_license_agreement"/>By selecting this option, I swear that all information entered is right<br />
                <input type="submit" id="song_upload_submit" value="Upload Your Song"/>
                </form>
            </article>
            <ul id="playlist">
                <!-- your song goes here -->
            </ul>
        </section>

THis is a function in my controller to handle te upload :

function do_upload_song()
    {
        //$file_element_name = 'users_song';

        $config['upload_path'] = './media/';
        $config['allowed_types'] = 'mp3';
        $config['max_size'] = '30720';
        $config['encrypt_name'] = TRUE;

        $this->load->library('upload', $config);
        //set validation rules
        $this->form_validation->set_rules('title', 'Song title', 'trim|required|xss_clean');
        $this->form_validation->set_rules('album', 'Album', 'trim|required|xss_clean');
        $this->form_validation->set_rules('artist', 'Artist', 'required|xss_clean');
        $this->form_validation->set_rules('license', 'License', 'required');
        $this->form_validation->set_rules('song_license_agreement', 'License Agreement', 'required');

        if ($this->form_validation->run() == FALSE)
        {
            $this->session->set_flashdata('info', validation_errors());
            redirect('profile');
        }
        else
        {
            if ( ! $this->upload->do_upload())
            {
                $this->session->set_flashdata('info', $this->upload->display_errors());
                redirect('profile');
            }
            else
            {
                $data = $this->upload->data();
                $add_song = $this->media_model->add_song($data['file_name']);
                if($add_song)
                {
                    $this->session->set_flashdata('info', 'Your song has been uploaded');
                    redirect('profile');
                }
                else
                {
                    unlink($data['full_path']);
                    $this->session->set_flashdata('info', 'Song upload fail');
                    redirect('profile');
                }

            }
            @unlink($_FILES);
        }

    }

And this is my .js

$(document).ready(function(){
$('#song_upload_form').hide();
    $('#song_upload_menu').click(function(e){                             
        $('#song_upload_form').dialog({
                        title: 'Upload the cool track man!',
                        width: 520,
                        show: 'fade',
                        hide: 'fade',
                        modal: true
                        });                       
        e.preventDefault();
    });  
});   

The JS script makes the modal form popped out, but i don't know what to do after that. I just can send the data via ajax. But file is different. I know they cannot be sent via ajax. Many articles I found on the net told me about Iframe, but they only deal with file. I can't find a practical solution to solve my problem which is simulating ajax to send data and file simultaneously . Any advice guys? Thanks

Answer 1

I was just reading about this myself. Look here: http://joekuan.wordpress.com/2009/06/12/ajax-a-simplified-version-of-file-upload-form-using-iframe/

It says you can redirect the form upload to a hidden iframe. Pretty cool. I've yet to try it myself, but you should be able to find all sorts of information about it online.