Question

I’m building a web application for my friend. He wants this application to be “desktop-like” application which he means no page refresh “at all”. So, I decided to build this application using CodeIgniter, jQuery, jQuery UI and MySQL. This application main window contains several tabs, each tab has its own content div.

All of the page request, form submission, action and else are handle by jQuery to retrieve data. Then, these data will be sent to the specific controller to handle and response with the appropriate view

For example of form submission …

//JavaScript
$('#submitButton').live('click',function(){
    var data = $('#form').serialize();
    $.post('someController/someMethod', data, function(data){
        $('#someTargetDiv').html(data);
    })
})

//Controller
function someMethod(){
    var data1 = $this->input->post('data1');
    var data2 = $this->input->post('data2');
    var data3 = $this->input->post('data3');
    var data4 = $this->input->post('data4');

    /* some data handling code */

    $this->load->view('someView',data);
}

But, the problem is I can’t upload the file to the controller.
1.) If I alert “$(‘input[type=file]’).val()”, the result will be “Drive:/fakePath/fileName.extension”.
2.) If I alert “$(‘#form’).serialize(), the result will be “name=value1&lastName=value2&…” but no file input included)

I read the manual of CodeIgniter do_upload() function.
I assume (If I’m not misunderstanding) that I have to submit the file to controller.
But for my application which has no form submission, how can I do this file upload.
Since all I got now is the fake path of the file location. (Which I got from scenario 1. above)

The only solution that I can think is to open a new window to upload the file (seperate from main application window). This window can be navigate (refresh, submit form) and contains file upload form. Once the upload is done, close that window.

But, is it possible to do all this upload thing within the main application window and stick with my friend’s requirement (no navigation, no refresh, no form submit, no white page while waiting)

A code example will be great help. But, some keyword for google is fine too.
Thanks in advance for every single help, advise or even criticize.

P.S. Feel free to comment my application design too. I’m not sure this is the best way to build a desktop-like web application or not.

Answer 1

With jquery.post(), the data is actually submitted to the controller page – just like if you clicked “submit”. The problem is, file uploads can not (yet) be processed with javascript (only exception is ff 4, i think).

The best solution I found for a coherent user experience is this plugin: http://jquery.malsup.com/form/

It seamlessy handles the upload via iframe and it’s pretty lightweight. Just use its function instead of post and you’ll be fine.