Display image dropped before user submits form

[michaelryancaputo]

I'm using a submission form which fires $upload.upload(), however, i would like to display the image that is dropped when the user adds an image. I've tried a few things, but doesn't seem to be possible. Any suggestions?

[danialfarid]

If you just want it for HTML5 browsers you can do:

<li ng-repeat="src in dataUrls">
    <img src="src">
</li>

$scope.onFileSelect = function($files) {
    for (var i = 0; i < $files.length; i++) {
        var fileReader = new FileReader();
        fileReader.readAsDataURL($files[i]);

        function setPreview(fileReader, index) {
            fileReader.onload = function(e) {
                $scope.dataUrls[index] = e.target.result;
            }
        }
        setPreview(fileReader, i);
    }...

mentioned here

For non-HTML5 I need to write a shim for FileReader so it is not available yet but should be easy to do if you want to submit a pull request.

[danialfarid]

The demo page now shows the preview of images for HTML5 browsers.
Version 1.1.10

[michaelryancaputo]

Thanks Danial!

[alonisser]

thanks! is the preview shim implemented?

[danialfarid]

You can use any other shim to achieve that. This plugin is mainly just for upload and showing preview is not really angularjs specific. You can use this:
https://github.com/Jahdrien/FileReader

[danialfarid]

Just to give you an update. The FileReader api is gonna be supported in the next release of FileAPI around February 14. Once it is released I will integrate it with angular-file-upload so FileReader will be supported cross browser with the FileAPI polyfill.
Then I can write a directive or service for the preview as well.

[alonisser]

wow! great, I'll for the update

Twitter:@alonisser https://twitter.com/alonisser
LinkedIn Profile http://www.linkedin.com/in/alonisser
Facebook https://www.facebook.com/alonisser
_Tech blog:_4p-tech.co.il/blog
_Personal Blog:_degeladom.wordpress.com
Tel:972-54-6734469

On Mon, Dec 30, 2013 at 9:57 AM, danialfarid notifications@github.comwrote:

Just to give you an update. The FileReader api is gonna be supported in
the next release of FileAPI around February 14. Once it is released I will
integrate it with angular-file-upload so FileReader will be supported cross
browser with the FileAPI polyfill.
Then I can write a directive or service for the preview as well.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/64#issuecomment-31336368
.