Reloading an <object> html tag in AugularJS

Issue

I'm working on a web project where it requires a user to upload a pdf file, what I found was when the user deletes a file that they uploaded before and tries to upload a new file, in the preview mode it is still the deleted file that can be seen. The preview page is rendered in an object tag so I'm trying to figure out a way to reload it.

Here's my angular code in the controller:

    var getFile= function () {
        service.getFile()  // c# endpoint
            .then(function (response) {
                var file = new Blob([response.data], { type: 'application/pdf' });
                $scope.fileURL = window.URL.createObjectURL(file);
            })
            .catch(function (fallback) {
                $scope.fileURL = null;
            });
    }

As far as I understand, the normal Angular behavior is whenever the {{fileURL}} changes, the watcher should update the html accordingly. However, in my HTML code below,

<h3>{{fileURL}}</h3>
<div id="pdfFile">
      <object type="application/pdf" data="{{fileURL}}" width="100%" height="1000"></object>
</div>

The {{fileURL}} in gets updated correctly while the {{fileURL}} as the data attribute stays the same. I can confirm that from the backend the correct file data has been transmitted along the way.

I've tried to use jQuery to grab the object tag and set its data attribute directly, what I've found in that approach is that the {{fileURL}}'s value in the controller is different from the one used in the HTML code, but they point to the same file. I think this is due to the fact that those URLs are temporarily generated, so the scope is limited.

I've also tried this:

     var $pdf = $("#pdfFile");
     console.log("Step 1");
     $pdf.empty();
     console.log("Step 2");
     var newObj = '<object type="application/pdf" data="{{fileURL}}" width="100%" height="1000" id="pdfFile"></object>'
     console.log("Step 3");
     $pdf.append(newObj);
     console.log("Step 4");

but this has the same issue as the last approach, it points to an invalid url and just returns me to the home page of my application.

The $route.reload() method is not desirable, and the $scope.apply() method would not work. I'm confused as of why the object tag does not change accordingly and how I should fix this.

Please give me some advice on how to tackle this issue. Thanks in advance.

Solution

I'll erase this if I'm misunderstanding the problem, but have you tried a combination of ng-if (not ng-show) and some kind of switch using a timeout. ng-if will completely remove the object from the dom whereas ng-show only hides it.

<div id="pdfFile">
      <object type="application/pdf"  ng-if="fileURL" data="{{fileURL}}" width="100%" height="1000"></object>
</div>

... then in the controller

Make sure you're injecting the $timeout and $window objects

angular.module('controllers.myController', [])
    .controller('myController', [
    "$scope",
    "$rootScope",
    "$stateParams",
    "$timeout",
    "$window",
    function($scope, $rootScope, $stateParams, $timeout, $window) {
       ....

Then in your code...

.then(function (response) {
                var file = new Blob([response.data], { type: 'application/pdf' });
                $scope.fileURL = null;
                $timeout(() => { $scope.fileURL = $window.URL.createObjectURL(file); }, 500);
            })

Answered By - Kinglish