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.