AngularJS Téléchargement d'une image avec ng-upload

J'essaie de télécharger un fichier dans AngularJS à l'aide de ng-upload mais je me heurte à des problèmes. Mon html ressemble à ceci:

<div class="create-article" ng-controller="PostCreateCtrl"> <form ng-upload method="post" enctype="multipart/form-data" action="/write" > <fieldset> <label>Category</label> <select name="category_id" class=""> <option value="0">Select A Category</option> <?php foreach($categories as $category): ?> <option value="<?= $category -> category_id; ?>"><?= $category -> category_name; ?></option> <?php endforeach; ?> </select> <label>Title</label> <input type="text" class="title span5" name="post_title" placeholder="A catchy title here..." value="<?= $post -> post_title; ?>" /> <label>Attach Image</label> <input type="file" name="post_image" /> <a href='javascript:void(0)' class="upload-submit: uploadPostImage(contents, completed)" >Crop Image</a> <label>Body</label> <div id="container"> <textarea id="mytextarea" wrap="off" name="post_content" class="span7" placeholder="Content..."><?= $post -> post_content; ?></textarea> </div> <div style='clear:both;'></div> <label>Preview</label> <div id='textarea-preview'></div> </fieldset> <div class="span7" style="margin: 0;"> <input type="submit" class="btn btn-success" value="Create Post" /> <input type="submit" class="btn btn-warning pull-right draft" value="Save as Draft" /> </div> </form> </div>

Et mon contrôleur js ressemble à ceci:

 ClabborApp.controller("PostCreateCtrl", ['$scope', 'PostModel', function($scope, PostModel) { $scope.uploadPostImage = function(contents, completed) { console.log(completed); alert(contents); } }]);

Le problème auquel je suis confronté est lorsque l'image de récolte est frappée et elle exécute uploadPostImage, elle télécharge tout le formulaire. Comportement non désiré, mais je peux le faire fonctionner. Le gros problème est dans la fonction js la fonction uploadPostImage 'contenu' paramètres est toujours indéfini, même lorsque le paramètre 'complet' revient comme vrai.

Le but est de ne charger qu'une image pour la recadrage. Qu'est-ce que je fais mal dans ce processus?

Il y a peu de documentation sur l'angulaire pour télécharger des fichiers. Beaucoup de solutions nécessitent des directives personnalisées d'autres dépendances (jquery in primis … juste pour télécharger un fichier …). Après plusieurs essais, j'ai trouvé cela avec juste angularjs (testé sur v.1.0.6)

Html

 <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>

Angularjs (1.0.6) ne prend pas en charge le modèle ng sur les balises "input-file", donc vous devez le faire de manière native qui passe tous les fichiers (éventuellement) sélectionnés de l'utilisateur.

manette

 $scope.uploadFile = function(files) { var fd = new FormData(); //Take the first selected file fd.append("file", files[0]); $http.post(uploadUrl, fd, { withCredentials: true, headers: {'Content-Type': undefined }, transformRequest: angular.identity }).success( ...all right!... ).error( ..damn!... ); };

La partie fraîche est le type de contenu indéfini et la propriété transformRequest: angular.identity qui donne à $ http la possibilité de choisir le "type de contenu" approprié et de gérer la limite nécessaire lors de la gestion des données multiparties.

Vous pouvez essayer ng-file-upload angularjs plugin.

Il est assez facile de configurer et de traiter les spécificités angularjs. Il prend également en charge la progression, l'annulation, le glisser-déposer et le navigateur croisé.

Html

 <!-- Note: MUST BE PLACED BEFORE angular.js--> <script src="ng-file-upload-shim.min.js"></script> <script src="angular.min.js"></script> <script src="ng-file-upload.min.js"></script> <div ng-controller="MyCtrl"> <input type="file" ngf-select="onFileSelect($files)" multiple> </div>

JS:

 //inject angular file upload directives and service. angular.module('myApp', ['angularFileUpload']); var MyCtrl = [ '$scope', '$upload', function($scope, $upload) { $scope.onFileSelect = function($files) { //$files: an array of files selected, each file has name, size, and type. for (var i = 0; i < $files.length; i++) { var file = $files[i]; $scope.upload = $upload.upload({ url: 'server/upload/url', //upload.php script, node.js route, or servlet url data: {myObj: $scope.myModelObj}, file: file, }).progress(function(evt) { console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total)); }).success(function(data, status, headers, config) { // file is uploaded successfully console.log(data); }); } }; }];

Erreur lors du téléchargement du fichier: "le conteneur n'a pas de traitement de la méthode POST"

 App.service('fileUpload', ['$http', function($http) { this.uploadFileToUrl = function(file, uploadUrl) { console.log("inside upload file service js "); var fd = new FormData(); fd.append('file', file); $http.post(uploadUrl, fd, { transformRequest: angular.identity, headers: { 'Content-Type': undefined } }) .success(function(response) { console.log("file uploaded sucessfully " + response); }) .error(function(error) { console.log("Error while uploading file " + JSON.stringify(error)); }); } }]);

{"Error": {"name": "Error", "status": 404, "message": "Shared class \" container \ "n'a pas de traitement de méthode POST / 5555-1111", "statusCode": 404, " Pile ":" Erreur:

Dans mon cas, les méthodes mentionnées ci-dessus fonctionnent bien avec php, mais lorsque j'essaie de télécharger des fichiers avec ces méthodes dans node.js, j'ai un problème. Donc, au lieu d'utiliser $ http ({.., .., …}), utilisez le jquery ajax normal.

Pour sélectionner un fichier, utilisez ce

 <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this)"/>

Et dans le contrôleur

 $scope.uploadFile = function(element) { var data = new FormData(); data.append('file', $(element)[0].files[0]); jQuery.ajax({ url: 'brand/upload', type:'post', data: data, contentType: false, processData: false, success: function(response) { console.log(response); }, error: function(jqXHR, textStatus, errorMessage) { alert('Error uploading: ' + errorMessage); } }); };