Téléchargement de fichier via extjs

Version imprimable

Bonjour,

J'ai été sur le site de sencha et j'ai pris l'exemple concernant le téléchargement de fichier mais je n'ai pas réussi à le faire fonctionner.
Voici mon code extjs :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
Ext.define("PFLGestion.view.WinImporter", {
    extend: 'Ext.window.Window',
 
    require :[
        'Ext.form.field.File',
        'Ext.form.field.Number',
        'Ext.form.Panel',
        'Ext.window.MessageBox'
    ],
 
 
    xtype: 'WinImporter',
    title: 'Importer des donn‚ées',
    modal: true,
    layout: 'fit',
 
 
    initComponent: function() {
        var me = this;
 
        var msg = function(title, msg) {
            Ext.Msg.show({
                title: title,
                msg: msg,
                minWidth: 200,
                modal: true,
                icon: Ext.Msg.INFO,
                buttons: Ext.Msg.OK
            });
        };
        var tpl = new Ext.XTemplate(
                'File processed on the server.<br />',
                'Name: {fileName}<br />',
                'Size: {fileSize:fileSize}'
            );
 
        var myform = Ext.create('Ext.form.Panel', {
            width: 500,
            frame: true,
            bodyPadding: '10 10 0',
 
            defaults: {
                anchor: '100%',
                allowBlank: false,
                msgTarget: 'side',
                labelWidth: 50
            },
 
            items: [{
                xtype: 'textfield',
                fieldLabel: 'Name'
            },{
                xtype: 'filefield',
                id: 'form-file',
                emptyText: 'Select an image',
                fieldLabel: 'File',
                name: 'File-path',
                buttonText: '',
                buttonConfig: {
                    iconCls: 'upload-icon'
                }
            }],
 
            buttons: [{
                text: 'Save',
                handler: function(){
                    var form = this.up('form').getForm();
                    if(form.isValid()){
                        console.log (form);
                        form.submit({
                            method: 'POST',
                            url: 'resources/data/file-upload.php',
                            waitMsg: 'Uploading your file...',
                            success: function(fp, o) {
                                msg('Success', tpl.apply(o.result));
                            }
                        });
                    }
                }
            },{
                text: 'Reset',
                handler: function() {
                    this.up('form').getForm().reset();
                }
            }]
        });
 
        me.form = myform;
 
        me.items = [me.form];
 
        me.callParent();
 
   }
 
});

mon code PHP:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
    $returnResponse = $_REQUEST['returnResponse'];
    sleep(1);
    if ($returnResponse != "") {
        header('HTTP/1.0 '.$returnResponse.' Server status', true, $returnResponse);
        echo '{success:false, message:"Faked error from server", errors:{"file-path":"The server returned this"}}';
    } else {
 
        $file = $_FILES['File-path'];
 
        $fileName = $_FILES['File-path']['name'];
        $tmpName  = $_FILES['File-path']['tmp_name'];
        $fileSize = $_FILES['File-path']['size'];
        $fileType = $_FILES['File-path']['type'];
        $fp      = fopen($tmpName, 'r');
        $content = fread($fp, filesize($tmpName));
        $content = addslashes($content);
        fclose($fp);
 
 
 
        $fileName = $file['name'];
        $fileSize = $file['size'];
        if (!$fileSize) {
            $fileSize = $_SERVER['CONTENT_LENGTH'];
        }
 
        echo json_encode(array(
            "success" => true,
            "fileName" => $fileName,
            "fileSize" => $fileSize
        ));
    }
?>

Je n'ai pas mis de fichier html. Lorsque je choisi un fichier, pas de problème, success est à True, mais je ne trouve nul part mon fichier télécharger. Dans le fichier de log, j'ai une erreur :
[:error] [pid 6980:tid 1768] [client 127.0.0.1:55070] PHP Notice: Undefined index: returnResponse in D:\\Aither\\Www\\PFLGestion\\resources\\data\\file-upload.php on line 2, referer: http://localhost/pflgestion/

ça ne fait pas longtemps que j'ai débuter avec extjs, et mes notions de PHP sont assez faibles. Je ne comprends pas ce qui se passe.

Merci d'avance pour votre aide.

Il faudrait tester en enlevant pour l'instant le test sur returnResponse

Voici donc le code PHP résultant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php   
 
        $file = $_FILES['File-path'];
 
        $fileName = $_FILES['File-path']['name'];
        $tmpName  = $_FILES['File-path']['tmp_name'];
        $fileSize = $_FILES['File-path']['size'];
        $fileType = $_FILES['File-path']['type'];
        $fp      = fopen($tmpName, 'r');
        $content = fread($fp, filesize($tmpName));
        $content = addslashes($content);
        fclose($fp);
 
 
 
        $fileName = $file['name'];
        $fileSize = $file['size'];
        if (!$fileSize) {
            $fileSize = $_SERVER['CONTENT_LENGTH'];
        }
 
        echo json_encode(array(
            "success" => true,
            "fileName" => $fileName,
            "fileSize" => $fileSize
        ));
?>

Ça permettra de voir si le fichier a bien été récupéré et si les valeurs sont bien retournées.
Le script PHP pourra être sécurisé dans un second temps.

11/05/2015, 14h42
flaria

Merci pour votre aide.

J'ai testé votre code PHP. j’obtiens la même réponse. {"success":true,"fileName":"aide.txt","fileSize":5640} par contre, je n'ai plus d'erreur dans le fichier de log d'Apach.

Je ne trouve pas mon fichier aide.txt. Vu que je n'ai donné aucun chemin de destination, j'ai supposé que le fichier serait enregistrer au même endroit où est enregistrer mon code PHP. j'ai surement tord?
11/05/2015, 15h04
namavic

Le document doit être dans le répertoire TMP de votre système.
Vous pouvez le placer où vous le souhaitez en utilisant la fonction PHP : move_uploaded_file()
http://php.net/manual/fr/function.mo...oaded-file.php
11/05/2015, 15h59
flaria

Merci pour votre aide! effectivement il était dans temp, mais tellement éphémère que lorsque j'allais voir disparu!!! en rajoutant move_uploaded_file($tmp_name, "$uploads_dir/$name"); J'ai pu l'enregistrer où je voulais!
Merci encore!