ng-file-upload output model only contains $ngfBlobName but file uploads fine

Question

I'm using ng-file-upload to upload images to my web server.

Once the user selects the files I then display them in a carousel, the user can then manually upload them to the server (via a submit button).

Some images are not showing in the carousel. Said images still get uploaded to the server OK and display on the front-end, that is, the images that aren't being displayed in the preview are being uploaded and shown in the image gallery fine (you can see the image).

There is a difference in the models that the ng-file-upload outputs for the images, the images that get shown in the preview successfully contain what one would expect:

 {
"$ngfBlobUrl": "blob:http%3A//localhost%3A4567/50df9cf5-1962-4903-8c82-02c847aadd16",
"$ngfWidth": 719,
"$ngfHeight": 837,
"$ngfDataUrl": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAICAgICAQICAgIDAgIDAwYEAwMDAwcFBQQGCAcJCAgHCAgJCg0LCQoMCggICw8LDA0ODg8OCQsQERA...(the rest has been removed)
 }

The images that don't get shown in the preview but still get successfully uploaded (and shown on the front-end once downloaded) have a model like below (given from ng-file-upload):

 {
    "$ngfName": "P9140214.jpg"
 }

So it makes sense that these don't get previewed as the img tags in the preview HTML use '$ngfBlobUrl' as the image's src attribute.

If I upload the image which is giving an issue to a regular input type="file" and preview it using the FileReader API (converting it to base64..) then it displays just fine.

Has anyone come across anything like this?

If I go into the file system, the problematic image has a few properties that 'the other images' do not, such as:

'Device make', 'Device model', 'Color profile', 'Focal length', 'Red eye', 'F number', 'Exposure program', 'Exposure time'

So on a Mac, i've right-clicked the image and selected 'more info' to see these properties.

How is the server getting the image data for this image?!

Answer 1

What I ended up doing to fix this was add an 'ngf-change' call to the ng-file-upload directive and check for 'ngfBlobUrl' being present.

$scope.filesChanged = function ($files, $file, $event, $rejectedFiles) {
            $files.forEach(function (file) {
                if (!file["$ngfBlobUrl"]) {
                    Upload.dataUrl(file, false).then(function(url){});
                }
            });
        };

This works, the image is now presented to me in the preview, and uploads OK.