Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I'm a beginner in angularjs.

I try to upload an image with angularjs, initially i uploaded an image with node.js and FS module, now I have to translate everything in angularjs.

I tried to use FS in angularjs but I failed.

After some research, I found the module of Danial Farid angular-file-upload, And i tried to use it but it's not working with my website.

So I tried again to use FS because.

This is my controller to add article :

$http.post('/addArticle',  {
                titre   : $scope.article.titre,
                euro: $scope.article.euro,
                 description: $scope.article.description,
                email: $scope.article.email,
                categorie: $scope.article.categorie,
                sous: $scope.article.sous,
                photoproduit: $scope.article.photoproduit,

                })

My model :

exports.addArticle = function(req, res){

var newproduct = new Articles();
newproduct.Titre = req.body.titre;
newproduct.euro = req.body.euro;
    newproduct.Description = req.body.description;
newproduct.email = req.user.email;
newproduct.Categorie = req.body.categorie;
newproduct.Sous = req.body.sous;

newproduct.image.data = fs.readFileSync(req.files.photoproduit.path);                                                                                                                                           
console.log(req.files.photoproduit.path);                                                                                                                                                                       
newproduct.image.contentType = 'image/jpg';                                                                                                                                                              





if (!newproduct.euro)
    newproduct.euro = 0;
else if (!newproduct.Bitcoin)
    newproduct.Bitcoin = 0;
else if (!newproduct.Litecoin)
    newproduct.Litecoin = 0;

newproduct.save (function (err, r){
    if (err) { throw err;}
    console.log('product added');
});

res.json(req.session);

}

My view :

<div class="container">
        <form  ng-controller="articles" enctype="multipart/form-data">
            <h2 align="center">Ajouter un article à votre boutique</h2>
            <div class="row">
                <div class="col-lg-4 thumbnail" align="center">
                        <label for="inputImage">Choisir des images</label>
                        {{message}}

<input id="inputImage" type="file" accept="image/*" image="image" ng-model="article.photoproduit"/>
                        <img ng-show="image" ng-src="{{image.url}}" type="{{image.file.type}}"/><hr>


                        <button type="reset" class="btn btn-primary">Effacer les photos</button>
                </div>
                <div class="col-lg-8 thumbnail">
                        <div class="col-lg-3">
                                <h3>Titre</h3>
                                <h3>Prix</h3>
                                        <h3>Catégorie</h3>
                                        <h3>Sous-catégorie</h3>
                                    <h3>Description</h3>
                        </div>
                        <div class="col-lg-9"><br />
                                <input type="text" class="form-control" ng-model="article.titre" name="titre" placeholder="Titre" required style="margin-top:-3px;" autocomplete="off" autofocus />
                                <div class="row">
                                <div class="col-lg-4">
                                        <input type="text" class="form-control" ng-model="article.euro" name="euro" placeholder="Euro" required style="margin-top:12px;" autocomplete="off" required />
                                </div>
                                </div>
                        </div>
                                    <!--<input type="text" class="form-control" ng-model="article.categorie" name="categorie" placeholder="Catégorie" style="margin-top:12px;" />-->
                                    <select name="catégorie" class="form-control" ng-model="article.categorie" value="Catégorie" style="margin-top:12px;" required>
                                        <option ng-click='recupererCategorie("Véhicule")'>Véhicule</option>
                                                <option ng-click='recupererCategorie("Musique")'>Musique</option>
                                                <option ng-click='recupererCategorie("Informatique")'>Informatique</option>
                                                <option ng-click='recupererCategorie("Livres")'>Livres</option>
                                                <option ng-click='recupererCategorie("Logiciels")'>Logiciels</option>
                                                <option ng-click='recupererCategorie("Téléphonie")'>Téléphonie</option>
                                                <option ng-click='recupererCategorie("Sports")'>Sports</option>
                                                <option ng-click='recupererCategorie("Vétements")'>Vétements</option>
                                    </select>
<!--<input type="text" class="form-control" ng-model="article.sous" name="sous" placeholder="Sous-catégorie" style="margin-top:12px;" />-->
                                        <select name="sous" class="form-control" ng-model="article.sous" value="Sous" style="margin-top:12px;" required>
                                        <option ng-repeat="sous in sousC | filter: { Categorie: cat }">{{sous.Sous}}</option>
                                    </select>
                                        <textarea id="ContactMessage" class="form-control" rows="7" cols="30" ng-model="article.description"  name="description" placeholder="Description du produit" requir\
ed style="margin-top:15px;resize:none;"></textarea><br>
                        </div>
                        <div class="col-lg-12" ng-if="messageErreur">
                                <div class="alert alert-danger">
                                                {{messageErreur}}
                                        </div>
                                </div>
                </div>
        </div>
        <div align="center">
                <input type="submit" ng-click="addArticle(image)" class="btn btn-success" value="Valider">
                <a href="/profil/{{ myMain.getUser().username }}" class="btn btn-danger">Annuler</a>
            </div>
        </form>
</div>

Sometimes the product was addes without image, sometimes I have an error message in the terminal "cannot call the method of undefined path".

Can you help me to find a solution for upload image with FS in angularjs or to try with an other module.

Thanks a lot.

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.