0


I am uploading multiple images to MongoDB using multer.
My front-end part has been developed using angular Js.
I am able to upload images to MongoDB, but now I want to preview images on the HTML page before uploading them to the database.

HTML Code : 

<div class="col-md-4">
    <div class="input-group">
        <input type="file" name="file" id='file' multiple="multiple" required="required" />
    </div>
</div>


Angular Js Code :

$scope.upload = function () {
            //var file = angular.element(document.querySelector('#file')).prop("files")[0];
                $scope.files = [];
                $scope.uploadedFiles = [];
                $scope.selectedFiles = [];
                console.log('file length :' + angular.element(document.querySelector('#file')).prop("files").length);
                for(var i = 0 ; i < angular.element(document.querySelector('#file')).prop("files").length ; i++){
                  var file = angular.element(document.querySelector('#file')).prop("files")[i];
                  console.log('file Name :' + file);
                  $scope.files.push(file);  
                }
                console.log('Uploaded file :' + $scope.files);
               // $scope.files.push(file);
                $http({
                    method: 'POST',
                    url: '/image/upload',
                    headers: { 'Content-Type': undefined },
                    transformRequest: function (data) {
                        var formData = new FormData();
                        formData.append('model', angular.toJson(data.model));
                        for(var  i = 0 ; i < data.files.length ; i++){
                            formData.append('file', data.files[i]);
                            $scope.uploadedFiles.push(data.files[i]);
                        }
                        console.log('Sending File size :' + data.files.length);
                        //formData.append('file', data.files[0]);
                        return formData;
                    },
                    data: { model: { title: 'hello'}, files: $scope.files }

                }).then(function (res) {

                    console.log(res);
                });
        }



What I 've tried 

 .then(function (res) {
                         $scope.selectedFiles = "/public/images/" + res.data.imagePaths[0];
}



<div>
 Images :{{selectedFiles}}<img ng-src="{{selectedFiles}}">
</div>


I passed selected file to html page, but it's not showing the image.
How can I do that, please help.

Vikasdeep Singh
  • 17,777
  • 9
  • 70
  • 93
mayank bisht
  • 384
  • 4
  • 18
  • `"/public/images/" + res.data.imagePaths[0]` this will never work because this is looking for an image that is located in `/public/images` in your server. Please take a look of [Javascript preview image before upload](https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) – masterpreenz Sep 25 '17 at 06:26

1 Answers1

0

Please check this plunker http://plnkr.co/edit/y5n16v?p=preview , the basic idea is shown below

fileReader.readAsDataUrl($scope.file, $scope)
                      .then(function(result) {
                          $scope.imageSrc = result;
                      });
Rameez Rami
  • 4,039
  • 1
  • 22
  • 30