File upload using EXTJS and PHP

I upload my file using EXTJS and it's saved in the server the problem is that I can't get a success function or even the waitMsg is always running Here is the Code EXTJS code :

 var fp = new Ext.FormPanel({
    fileUpload: true,
    width: 500,
    frame: true,
    title: 'File Upload Form',
    bodyStyle: 'padding: 10px 10px 0 10px;',
    labelWidth: 50,
    defaults: {
        anchor: '95%',
        allowBlank: false,
        msgTarget: 'side'
    },
    items: [{
        xtype: 'fileuploadfield',
        id: 'form-file',
        emptyText: 'Selectionnez un fichier',
        fieldLabel: 'Fichier',
        name: 'photo-path',
        buttonText: 'Parcourir'
    }],
    buttons: [{
        text: 'Ajouter',
        handler: function(){
            if(fp.getForm().isValid()){
     var myUrl = 'php/file-upload.php?idOrganisme=' + idOrganisme + '&demarche=' + demarche;
     //alert(Ext.getCmp('').);
                 fp.getForm().submit({
                     url: myUrl,
                     waitMsg: 'Envoi de votre fichier...',
      success:function(fp,o){
       alert('Sucess');

      }
                 });
            }
        }
    },{
        text: 'Fermer',
        handler: function(){

        }
    }]
});

PHP code :

<?php
 include("connexion.php");

 $server = "http://localhost/wa";
 $idOrganisme = $_GET['idOrganisme'];
 $demarche = $_GET['demarche'];

 $req = $bdd->query('SELECT idDemarche FROM demarche,typeDemarche WHERE
 idOrganisme=' . $idOrganisme . 
 ' AND demarche.idTypeDemarche = typeDemarche.idTypeDemarche 
 AND typeDemarche.typeDemarche="' . $demarche .'"');
 $demarcheArray = $req->fetch();
 $idDemarche = $demarcheArray['idDemarche'];

 $myPath = '../uploads/_' . $idOrganisme . '_' . $idDe开发者_如何转开发marche . '/';

 $target_path = utf8_decode($myPath);
 mkdir($target_path, 0705);
 echo 'OK';
 if(isset($_FILES)){
  echo 'OK';
  $temp_file_name = utf8_decode($_FILES['photo-path']['tmp_name']);
  $original_file_name = utf8_decode($_FILES['photo-path']['name']);

  // Find file extention
  $ext = explode ('.', $original_file_name);
  $ext = $ext [count ($ext) - 1];

  // Remove the extention from the original file name
  $file_name = str_replace ($ext, '', $original_file_name);

  $new_name = $target_path . '[' . utf8_encode($file_name) . $ext;
  chmod($new_name, 705);

  if(move_uploaded_file ($temp_file_name, $new_name)) {
   if($idDemarche!=''){
    $length = strlen($new_name);
    $path = $server . substr($new_name,2,$
    $req = $bdd->prepare('INSERT INTO liens(idDemarche, lien) values(:idDemarche, :lien)');
    $req->execute(array('idDemarche' => intVal($idDemarche), 'lien' => $path));
    echo "OK";
   }
  } 
  else {
   echo "error";
  }
  echo 'message';
 }

?>

Had a similar problem. Found out that you need to set the content type to "text/html" on the page that handles the file upload. :-(

Response.ContentType = "text/html";

If you read the documentation for Ext.data.Connection, you will see that

The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to send the return object, then the Content-Type header must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.

Took me a while to find this, but as I came across your question, someone else might do to with a similar problem!

hopefully this will help them!

You need to return a JSON response for file uploads, in your php code use either:

echo "{success: true}";

or

echo "{success: false}";

For further reference please refer to: http://dev.sencha.com/deploy/dev/docs/source/Action.html#cls-Ext.form.Action.Submit

You can also return custom errors which will help you handle the different states you are using in your code.