Angular JS - $http Post

Naama
Javascript

Bonjour à tous les devoppeurs!

Voila je cherche à uploader une image, au travers d'un input de type file, et a l'enregistrer dans le dossier image de mon application.

pour ce faire, j'ai trouvé sur le net une directive qui recupere le fichier, et un service, qui l'uploade.


var myApp = angular.module('myApp', []);

myApp.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){
        })
        .error(function(){
        });
    }
}]);

myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){

    $scope.uploadFile = function(){
        var file = $scope.myFile;
        var uploadUrl = "/images";
        fileUpload.uploadFileToUrl(file, uploadUrl);
    };

}]);

Pourtant, j'ai une erreur 405
POST http://localhost:8000/images/ 405 (Method Not Allowed)

Je ne comprend pas!
Comment fait on pour uploader une images et la mettre dans un dossier de l'application?

Merci a vous!
Hate de vos reponses! je tourne en rond depuis 2 jours!

13 réponses

antho07

Bonjour,

Erreur 405 retournée par ton serveur.
Qu'utilises-tu comme serveur? Quelle est le code du contrôlleur associé?
Qu'indiquent les logs côté serveur?

Naama
Auteur

Je ne suis pas (encore) pro d'Angular...
J'utilise Node Js pour les requettes a la base de données, mais la je voudrais simplement enregistrer mon image dans un dossier interne avec angular http server... pas possible?

le code complet de mon controller:

'strict mode'
angular.module("myApplication").controller("SchoolCtrl",["$scope","$rootScope", "homeService", "cUserService", "$http", "fileUpload", function($scope,$rootScope,homeService,cUserService, $http, fileUpload){

    function init(){

        $scope.students = [];
        $scope.courses = {};
        $scope.student = {};
        $scope.student.FirstName = "";
        $scope.student.LastName = "";
        $scope.student.Phone = "";
        $scope.student.Email = "";
        $scope.student.Image = "";

        $scope.myFile;

    }

    homeService.getStudentCourses().then(
    function(res){
        $scope.students = res.data;
    },
    function(err){
    }
),

homeService.getCourses().then(
    function(res){
        $scope.courses = res.data;
    },
    function(err){
    }
)

$scope.addStudent = function(){

      var file = $scope.myFile;
        console.log('file is ' );
        console.dir(file);
        var uploadUrl =  "../images/";;

        $scope.student.Image = uploadUrl+file.name;
        fileUpload.uploadFileToUrl(file, uploadUrl);

    homeService.addStudent($scope.student).then(
        function(res){

                 $scope.students[res.data] = $scope.student;
                console.log($scope.students);

        },
        function(err){

        }

    );

}

    return init();
}])

la console du debug de Chrome affiche:

POST http://localhost:8000/images/ 405 (Method Not Allowed)
(anonymous) @ angular.js:12433
sendReq @ angular.js:12178
serverRequest @ angular.js:11930
processQueue @ angular.js:16689
(anonymous) @ angular.js:16733
$eval @ angular.js:18017
$digest @ angular.js:17827
$apply @ angular.js:18125
(anonymous) @ angular.js:26813
defaultHandlerWrapper @ angular.js:3617
eventHandler @

Possibly unhandled rejection: {"data":"","status":405,"config":{"method":"POST","transformResponse":[null],"jsonpCallbackParam":"callback","headers":{"Content-Type":"application/x-www-form-urlencoded","Accept":"application/json, text/plain, /","Authorization":"eb4886ed-0432-06a2-bbb2-53b65c910507"},"url":"../images/","data":{}},"statusText":"Method Not Allowed"}

antho07

Pour moi le problème est côté serveur.
Il semble que tu accèdes à ta ressource avec un POST sauf que cette route n'accepte pas le POST comme verbe HTTP.
Comment as-tu définie le traitement côté serveur? Comment as-tu paramètrer la route, la ressource bref le point d'entrée?

Naama
Auteur

La en faite est ma question! Comment paramétrer tout cela? Puis je le faire avec angular uniquement?
J'ai un serveur Node js (localhost:3200) pour les requêtes à la base de donnée, et mon application angular (localhost:8000) .
Comment paramètrer la route sur mon application angular pour enregistrer mon image dans un dossier interne “/images”?

je m'excuse du manque de connaissance... j'apprend!
je cherche depuis 3 jours un tuto sur le sujet, mais en vain!

Defy

ben avec angular tu ne peut pas enregistrer des images dans un dossier, c'est depuis le server qu'il faut faire ca. il faut donc créer une route en POST coté nodejs qui contiendra les methodes pour sauvegarder les images dans le dossier.

antho07

Je ne sais pas comment faire puisque je ne sais pas ce qui est en place côté serveur.
Qu'as-tu installé côté node?

Naama
Auteur

Merci Defy, Merci Antho07, comment donc créer cette route?
Côté node Js je ne fais rien de très compliqué à part des requêtes à la base de donnée, j'utilise express Router, et body-parser.

Merci infiniment!

antho07

Quel route as-tu mis actuellement sur /images/ ?
On peut avoir le code de ton routeur?

Naama
Auteur

Je n'ai rien reussi à mettre pour le moment... j'ai juste installé le module formidable pour express qui a l'air d'aider à l'upload de fichier, mais je n'ai pas compris comment récupérer mes données avec .

j'ai mon formulaire sous angular, (localhost:8000) avec un input file, dont le fichier est récupéré dans le controller (grace a la directive), mais je ne comprend toujours pas comment en suite envoyé cette image dans mon dossier " images ". (localhost:8000/images)

// node Js - Localhost 3200

var express = require("express");
var router = express.Router();
var formidable = require('formidable');

router.post("/images", function(req,res,next){
    /*Ici code de transfert de mon image ver le dosssier images*/
    console.log("images"); /*m'a permis de verifier que la route fonctionne bien*/
});

module.exports = router;

Encore merci infiniment, je suis vraiment perdue....

antho07

J'essaye de reproduire le truc en local, je te tiens au courant.

antho07

Tu n'as sans doute pas lancer ton serveur correctement.

server.js

var express = require("express");
var app = express();
var router = express.Router();
//var formidable = require('formidable');

router.post("/images/", function(req,res,next){
    /*Ici code de transfert de mon image ver le dosssier images*/
    console.log("images"); /*m'a permis de verifier que la route fonctionne bien*/
});
app.use('/', router);

app.listen(8081);
module.exports = router;

et puis node server.js pour lancer.

Attention j'ai changé le port et commenter forminable pour mon test local.

Naama
Auteur

Si, le serveur fonctionne bien, la route aussi, ce qu'il me manque c'est le morceau de code qui va me permettre de recevoir l'image et de la transferer vers localhost:8000/images (dossier de mon application angular).

Merci beaucoupp!!!!!!

antho07

Le traitement est à faire côté serveur.
Il y a surement mieux à faire mais ceci fonctionne :

var express = require("express");
var app = express();
var router = express.Router();
var formidable = require('formidable');
 var util = require('util');

router.post("/images/", function(req,res,next){
    /*Ici code de transfert de mon image ver le dosssier images*/
    console.log("images"); /*m'a permis de verifier que la route fonctionne bien*/
    var form = new formidable.IncomingForm();
    form.parse(req);

    form.on('fileBegin', function (name, file){
        file.path = file.name;
    });

    form.on('file', function (name, file){
        res.end(util.inspect({code:"OK"}));
    });

});
app.use('/', router);

app.listen(8081);
module.exports = router;