Gmail like file upload with jQuery

Question 1

I would like to upload files just like google mail does. I would want to use jQuery and PHP to do it is there anyway of getting the progressbar etc.?

Here I added a video of how google does it. http://dl.getdropbox.com/u/5910/Jing/2009-04-02_1948.swf

No flash, no perl or cgi please..

I guess I can live without the progressbar now I am actually searching for information about jquery plugins or just what things I would need to look at

Question 2

It is weird that people say that gmail doesn't use flash, when you can plainly see the swf file in the gmail interface. Try right clicking on "Attach a file". It is what allows the multiple uploads at once among other things.

Question 3

$("#country").change(function(){
    $('#city').find('option').remove().end(); //clear the city ddl
    var country = $(this).find("option:selected").text();
    alert(country);
    //do the ajax call
    $.ajax({
        url:'getCity.php'
        type:'GET',
        data:{city:country},
        dataType:'json',
        cache:false,
        success:function(data){

        data=JSON.parse(data); //no need if dataType is set to json
         var ddl = document.getElementById('city');                      

         for(var c=0;c<obj.length;c++)
              {              
               var option = document.createElement('option');
               option.value = obj[c];
               option.text  = obj[c];                           
               ddl.appendChild(option);
              }


    },
        error:function(jxhr){
        alert(jxhr.responseText);

    }
    }); 

});

in your getCity.php

$country = $_GET['city'];

//do the db query here

$query  = "your query";
$result = mysql_query($query);
$temp = array();
while ($row = mysql_fetch_assoc($result)) {

 if(empty($temp))
 {
   $temp=array($row['city']);
 }
 else
 {  
   array_push($temp,$row['city']);
 }

}
echo (json_encode($temp));

Question 4

The session information is a resource that can only be used exclusively, and you have not taken this into account.

Specifically, under default settings session_start causes PHP to acquire an exclusive lock on a file that contains the session data. This file is not unlocked until the script exits or session_write_close is called.

In your example, process.php acquires the lock and starts working. In the meantime, progress.php tries to session_start() and cannot (due to the lock). Enough time needs to pass for process.php to complete and exit (thus releasing the lock) before the request for progress information can be satisfied.

A small change you can make that will have immediate effect is to call session_write_close and session_start from within your worker loop:

for ($i=0; $i <= $totalItems; $i++) {
    session_start();
    $_SESSION['currentItem'] = $i;
    $_SESSION['percentComplete'] = round(($i / $totalItems * 100));
    session_write_close();
}

This will allow the two scripts to take turns locking the session storage file, so you will see things working as intended. However, performance will tank (this is a really impolite way to treat the session storage file).

If you had need to do something like this in the real world, it would be necessary to utilize something other than the session data to enable this exchange of information between the PHP scripts (e.g. an in-memory cache like APC or memcached).

Question 5

Yes you can add AliRıza Adıyahşi.

Here is the property to do it:

public HttpPostedFileBase File { get; set; }

Now in you form you should add enctype as Xiaochuan Ma said:

@using (Html.BeginForm("_AddAuthor", "Authors", FormMethod.Post, new { id = "form_author", enctype="multipart/form-data" }))
{
    <div class="editor-label">
        <input type="file" name="file" id="file" />
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.ValidationMessageFor(model => model.Name)
    </div>

    ...

    <div class="submit-field">
        <input type="submit" value="Ekle" class="button_gray" />
    </div>
}

On you Controller action:

[HttpPost]
public ActionResult _AddAuthor(AuthorViewModel viewModel, HttpPostedFileBase file)
{
    if(file!=null)
    {
        viewModel.File=file; //Binding your file to viewModel property
    }
    //Now you can check for model state is valid or not.
    if(ModelState.IsValid)
    {
        //do something
    }
    else
    {
        return View(viewModel);
    }
}

Hope it helps. Is this what you need ?

EDIT

There is nothing additional to do. Its automatically binding to viewModel.

[HttpPost]
public ActionResult _AddAuthor(AuthorViewModel viewModel)
{
      var uploadedfile = viewModel.File;// Here you can get the uploaded file.
      //Now you can check for model state is valid or not.
    if(ModelState.IsValid)
    {
        //do something
    }
    else
    {
        return View(viewModel);
    }
}

This worked for me !

Gmail like file upload with jQuery

Answers

php,ajax,jquery