AngularJS image upload preview without directive

Question

I'm uploading files via service:

var addFile = function(files) {
  var deferred = $q.defer();
  var fd = new FormData();
  fd.append("file", files[0]);
  $http.post("/files", fd, {
      ***
    })
    .success(function(data, status, headers, config) {
      ***
    })
    .error(function(err, status) {
      ***
    });
    ***
};

and in controller I have something like:

uplService.addFile($scope.files).then(function(url) {
  $scope.news.Photo = url;
});

and in HTML view:

<input type="file" name="file" onchange="angular.element(this).scope().photoChanged(this.files)" />

before that I uploaded file on-the-go, when I select file it goes directly to server, but now I need to display it in my form when I select it, but upload later, all I see in web is using directives, but how could I organize it without using directives?

take a look at developer.mozilla.org/en-US/docs/Web/API/FileReader for show the file before upload and all in all I prefer using a dedicate module google.it/… — Whisher
– Whisher, Commented Jan 5, 2015 at 8:52
well if you need with example ... start searching based on what you just learned from link — charlietfl
– charlietfl, Commented Jan 5, 2015 at 8:57

murnax · Accepted Answer · 2015-01-05 10:20:33Z

10

Can you try this in your controller to pass your file object here:

$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function(files){
    if (files != null) {
        var file = files[0];
    if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
        $timeout(function() {
            var fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = function(e) {
                $timeout(function(){
                    $scope.thumbnail.dataUrl = e.target.result;
                });
            }
        });
    }
}
};

and on the view

<img ng-show="thumbnail.dataUrl != null" ng-src="{{ thumbnail.dataUrl }}" class="thumb">

demo here

Hope this help

edited Jan 5, 2015 at 10:20

answered Jan 5, 2015 at 9:30

murnax

1,2221 gold badge10 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

arman1991 · Accepted Answer · 2015-01-05 09:28:57Z

9

I read this article, which helped me to solve the problem about uploading the image.

If you want to show your selected file, try this:

<img data-ng-src="data:image/png;base64,{{news.Photo}}" id="photo-id"/>

Explanation:

Your property for image in Model/ViewModel/Class must be an array of bytes, like

public byte[] Photo { get; set; }

The data:image/jpeg;base64 defines the byte array from news.Photo so it can be rendered correctly on the clients browser.

The $scope.news.Photo in your case is just an scoped variable which contains the drawed image with byte created by the byte equivalent in the $scope.uploadFile function from article.

I hope it will be also helpful for you.

edited Jan 5, 2015 at 9:28

answered Jan 5, 2015 at 9:08

arman1991

1,1661 gold badge18 silver badges28 bronze badges

3 Comments

byCoder Over a year ago

{{news.Photo}} - but what to put there? files[0] or what? thank you

byCoder Over a year ago

note, image is located in browser, not on server until i click 'save'

arman1991 Over a year ago

I know that it must be shown before 'save', I updated my answer.

Collectives™ on Stack Overflow

AngularJS image upload preview without directive

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related