AngularJs upload fichier zip controleur

Version imprimable

Salut à tous, je suis toujours et toujours en train de réaliser mon application et je vois le bout du tunnel. Il ne me reste 2/3 etapes dont deux où je rencontre de petit soucis au niveau de l'upload. C'est pourça que je viens ici demander de l'aide :D

Premierement, j'ai réalisé un formulaire d'upload pour uploader une archive et cela fonctionne parfaitement mais en dur malheureusement pas moyen de lui mettre un controleur.

voici le bout de code qui fonctionne :

Code:

1
2
3
4
5
6
7
      <form action="/api/upload" method="POST" enctype="multipart/form-data">
                        <div class="fileUpload btnLink">
                            <span>Parcourir</span>
                            <input type="file" id="zipFile" name="zipFile" ng-model="$ctrl.zipFile" class="upload" required>
                        </div>
                        <button type="submit" value="submit"  class="btnLink">Importer</button>
                    </form>

Celui que j'aimerai qui fonctionne :

Code:

1
2
3
4
5
6
7
<form ng-submit="$ctrl.save($ctrl.zipFile)">
                        <div class="fileUpload btnLink">
                            <span>Parcourir</span>
                            <input type="file" id="zipFile" name="zipFile" ng-model="$ctrl.zipFile" class="upload" required>
                        </div>
                        <button type="submit" value="submit"  class="btnLink">Importer</button>
                    </form>

son controleur :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 $ctrl.save = function (zipFile) {
            if ($ctrl.newTemplate.id == null) {
                $ctrl.newTemplate.id = templateid++;
                $ctrl.templates.push($ctrl.newTemplate);
               console.log(zipFile);
                $http({
                    method: 'POST'
                    , url: '/api/upload'
                    , data: {
                         zip: zipFile
                    }
                });
 
            }
            $ctrl.newTemplate = {};
        }

le soucis est qu'il me renvoie une erreur de ce type :
Cannot red property 'path' undefined. J'ai fais un console au niveau de mon zipfile mais il est vide pourquoi ?

Merci pour votre aide

Voici la solution que j'utilise pour uploader mes fichiers sans module additionnel :

Dans la vue :

Code:

1
2
3
4
 
<img src = "{{nouveauMedicament.photo}}" class = "img-responsive" >
<input  class="" type="file" name="file" onchange="angular.element(this).scope().telechargerFichier(this.files)" ></input>// Button qui permet d'uploader
{{infoUpload}}

Dans le controleur de la vue, on écrit cette fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
/* CHARGEMENT D UNE PHOTO SUR LE SERVEUR */
	$scope.telechargerFichier = function(files) {
		var fd = new FormData();
		//Prends le premier fichier selectionné
		fd.append("file", files[0]);
		console.log(files[0].name);
		var uploadUrl = "upload.php";
		$http.post(uploadUrl, fd, {
			withCredentials: true,
			headers: {'Content-Type': undefined },
			transformRequest: angular.identity
		}).success(function(data){ 
				$scope.infoUpload="Fichier téléchargé sur le serveur "; 
				$scope.nouveauMedicament.photo="uploads/"+files[0].name; 
			})
			.error(function(data){
				$scope.infoUpload="Echec du téléchargement sur le serveur";
			});
 
	};

(Dans la fonction call Back de la fonction $http, on affiche la photo uploadée grâce à $scope.nouveauMedicament.photo="uploads/"+files[0].name; (En l'occurence ct un médicament) )

Puis le fichier PHP upload.php qui "dépose" les fichiers sur le serveur, dans le répertoire "uploads" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<?php
 
        if ( !empty( $_FILES ) ) {
 
                $tempPath = $_FILES[ 'file' ][ 'tmp_name' ];
                $uploadPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . 'uploads' . DIRECTORY_SEPARATOR . $_FILES[ 'file' ][ 'name' ];
 
                move_uploaded_file( $tempPath, $uploadPath );
 
                $answer = array( 'answer' => 'File transfer completed' );
                $json = json_encode( $answer );
 
                echo $json;
 
        } else {
 
                echo 'No files';
 
        }
 
        ?>

Note : I'a pas de sécurité paramétrée

01/06/2016, 09h32
Invité

Impeccable ça fonctionne merci pour ton aide !