Use uploadfs and gridfs with meteor + angular | Simple steps for image upload in meteor + angular

uploadfs

 we are going to discuss image or file upload in meteor with angular. image uploading is easy in the meteor. we will use uploadfs for image uploading. Uploadfs manage all things like file uploading, downloading, storing and copying etc. Uploadfs also use for file or image synchronization. we will use gridFS storage adapter. we can also crop images and set the size of any image. we will create a simple collection for file or image upload. Before start meteor + angular, we should have knowledge of angular.

steps for upload images

1- add uploadFS by run following command. uploadFS use for manage files.

 we need to install uploadFS for manage uploading, downloading, set the size of images and crop images. uploadFS is a popular package for file or image uploading. 

    meteor add jalik:ufs

2- add gridFS by run following command

gridFS is storage adapter for storing images or file into MongoDB. we create a collection using gridFS.

   meteor add jalik:ufs-gridfs

3- create a file in models folder (ex- images.model.js) and add following code in this file.

create a images collection 

   var imageStore = new FS.Store.GridFS("images");
       Images = new FS.Collection("images", {
       stores: [imageStore]
 });

4 - create a HTML file for uploading image by input field (ex- add-image.html)

add input tag for bind directory with imageread. And submit button for submitting an image.

     <div class="imageUpload">
         <input type="file" imageread="image" ng-model="Image.image" />
         <button type="button" ng-click="addImage(Image)">Submit</button>
   </div>

5- create a file for the directive. this directive use for read the image content(ex- imageDirectory.js)

     angular.module('ImageApp')
        .directive("imageread", [function () {
          return {
            scope: {
                   imageread: "="
            },
        link: function(scope,element, attributes){
             $('.button-collapse').sideNav();
            element.bind("change", function (event) {
               scope.$apply(function () {
                 scope.imageread = event.target.files[0];
           });
        })
     }};
}]);

this directive uses for reading image and binds it with an imageread variable.

6- add a file for controller and save image into images collection(imageController.js)

   angular.module('ImageApp')
     .controller('ImageCtrl', ['$scope', '$reactive', function ($scope, $reactive) {
                $scope.addImage= (imageObj)=>{
                       Images.insert(imageObj.image, function (err, object) {
                        if (!err) {                     
                      imageObj.image= "/cfs/files/images/" + object._id;
                          // call method for saving URL for access image
                            vm.call("saveImageUrl", imageObj, (error, result) =>{
                               if(!error){
                                      console.log('URL save successfully');
                                }
                           })
                        }
                   });
                }

         }])


if you have any query regarding this post please ask using the comment box.

check the steps for install and start with meteor angular

Hope you found it helpful.

Leave a Reply

Your email address will not be published. Required fields are marked *