The function URL.createObjectURL() is failing to work across all browsers

Despite my efforts, I'm feeling tired as none of the solutions seem to work for me.

Here is the HTTP call in Angular that I am struggling with:

$http({
  method: 'GET',
  url: API_URL + 'v1/file/' + candidateId + '/download',
  headers: {
    'authToken': AuthService.getToken(),
  },
  responseType: 'arraybuffer'
})
.then(function onSuccess(response) {
  successCallback(response);
},
function onError(response) {
  errorCallback(response);
});

Within the Success function of this code:

vm.onSuccessDownloadResume = function(response) {
  var blob = new Blob([response.data], {type: response.headers('content-type')});
  var objectUrl = URL.createObjectURL(blob);
  window.open(objectUrl);
};

I have attempted using webkitURL.createObjectURL(blob), which works fine in Chrome, but unfortunately URL.createObject is not functioning at all.

The error message read: URL.createObjectURL() is not a function()

Thank you.

javascriptangularjsurl

Answer №1

Issues regarding compatibility have arisen in connection with createObjectURL, for more information please visit: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

Another area of concern is with the implementation of Blob: https://developer.mozilla.org/en-US/docs/Web/API/BlobBuilder#Browser_compatibility

A similar issue was encountered, and a helpful workaround was found on this Stack Overflow post: Blob constructor browser compatibility

To address the issue, a modified version of the function has been created:

var NewBlob = function(data, datatype)
{
    var out;

    try {
        out = new Blob([data], {type: datatype});
        console.debug("case 1");
    }
    catch (e) {
        window.BlobBuilder = window.BlobBuilder ||
                window.WebKitBlobBuilder ||
                window.MozBlobBuilder ||
                window.MSBlobBuilder;

        if (e.name == 'TypeError' && window.BlobBuilder) {
            var bb = new BlobBuilder();
            bb.append(data);
            out = bb.getBlob(datatype);
            console.debug("case 2");
        }
        else if (e.name == "InvalidStateError") {
            // InvalidStateError (tested on FF13 WinXP)
            out = new Blob([data], {type: datatype});
            console.debug("case 3");
        }
        else {
            // We're screwed, blob constructor unsupported entirely   
            console.debug("Errore");
        }
    }
    return out;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Clicking on a link in HTML with the onclick event

I am looking to create a button that will direct me to a different page. Here is the code snippet I have: <div align="right" ><input type="submit" id="logout" onclick="location.href='/login?dis=yes'" value="Sign Out" ></div>& ...

javascripthtmlonclick

How to use expressjs to fetch an image from a URL and show it on a webpage

I am currently running an image API from my home server, and I am working on creating a cloud-hosted page that will retrieve the image in the backend and display it, adding a layer of abstraction. My goal is to achieve the following: index.js var express ...

javascriptnode.jsexpress

What is preventing me from altering the array one element at a time?

I am working with an array and a class let questions = [ { questionText: '', answerOptions: [], }, ]; class Questions { constructor(questionText,answerOptions) { this.questionText = questionText; this.answerOptio ...

javascriptarraysreactjsobject

Utilize images inputted via an HTML DOM file uploader within p5.js

I'm facing a challenge with allowing users to upload their image file through a DOM file uploader (<input type="file"></input>). Once the image is uploaded, I'm unsure of how to transfer it to JavaScript and process it using p5.js. Ho ...

javascripthtmlcssp5.js

Effortlessly transfer files with Ajax through Box

I attempted to utilize the Box.com API for file uploads according to instructions from https://gist.github.com/seanrose/5570650. However, I encountered the following error message: `XMLHttpRequest cannot load "". No 'Access-Control-Allow-Origin&ap ...

javascriptajaxbox-apiboxboxapiv2

Track the number of times a button is clicked to generate a prominent "Main Event" section

Currently, I am working on a Tourism website that showcases numerous tours. Utilizing WordPress, I have established a custom post type titled Tours. Each tour is equipped with a Book Now button, which has been generated as a custom meta box. This button d ...

javascriptphpjquerywordpress

Modify the color of a div element in React when it is clicked on

My goal is to change the color of each div individually when clicked. However, I am facing an issue where all divs change color at once when only one is clicked. I need help in modifying my code to achieve the desired behavior. Below is the current implem ...

javascripthtmlreactjscolors

Passing context data from a Django template to Angular

As I construct a web application, I am inquiring about the most effective and secure method of transferring a variable from a Django context dictionary to Angular. Given that I have access to a variable within the Django template's context dictionary ...

angularjsdjangoangularjs-ng-initng-init

Accessing content from a different HTML document

I'm currently working on a project using node.js where I need to take input from a text box in an HTML file and store it in an array. However, I'm struggling with how to achieve this. My ultimate aim is to create a chat application, and I believe ...

javascriptjqueryhtmlnode.jsget

Angular directive to delete the last character when a change is made via ngModel

I have 2 input fields where I enter a value and concatenate them into a new one. Here is the HTML code: <div class="form-group"> <label>{{l("FirstName")}}</label> <input #firstNameInput="ngMode ...

javascriptangulartypescript

Tips for remaining on the current page after sending a post request using Express

I have a simple question that I haven't been able to find a satisfactory solution for. I've created a post route using express, like this: app.post('/search', function(req, res){ // Code to extract data from req and save it to the d ...

javascriptexpress

Directive not displaying CSS transition

I've been experimenting with transitions and directives. I have developed a Card directive that is supposed to display a fullscreen clone of itself when clicked. However, the transition does not occur unless I apply the altering CSS class in a timeout ...

angularjsangularjs-directivecss-transitions

Installing v8-profiler on Windows 8 (64 bit) through npm: a step-by-step guide

The v8-profiler module is widely recognized as the go-to tool for identifying memory leaks in node.js applications. However, attempting to install it with npm install v8-profiler results in an error message related to compatibility issues between 32bit an ...

javascriptnode.jsnpm

When adding classes using Angular's ng-class, CSS3 transitions are not activated

After creating a custom modal directive in Angular, I am encountering an issue with the transition animation not working as expected. Within my directive's isolated scope, there is a method called toggleModal() that toggles the modalState between true ...

angularjscss

Using the v-for directive to loop through a list of items and adding a v-autocomplete with

I am facing a challenge with using a dropdown menu within a loop to select the region for each office in my list of offices. The problem lies in passing the index value to the updateRegion method so that I can correctly associate the selected region with t ...

javascriptvue.jsvuetify.js

AngularJS Bootstrap directive not properly displaying template

Utilizing a custom directive to dynamically generate two columns in a row, I have successfully achieved the desired design using Bootstrap. The layout can be viewed in the image linked below. https://i.sstatic.net/MWX8v.png Below is the HTML code: <d ...

angularjsbootstrap-4

Adjust the class based on the model's value in AngularJS

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'} html <div class="variable" ng-repeat="item in items">{{item}} </div> ...

javascriptcssangularjsangularjs-ng-repeat

Rails not receiving JSON data

I am attempting a straightforward ajax call in Rails 4, but encountering issues with retrieving the json response. Below is the script I'm working with: $(document).on "submit", "form[name=upvote-form]", -> form = $(this) $.post "/vote", $(th ...

javascriptruby-on-railsajaxjsonruby-on-rails-4

Retrieving the output from a nested scope within a function

I have a scenario where I am working with a function that has a nested "then" function containing a return statement. My goal is to combine this inner return data with the outer return data. Below is the code snippet: public async getAllWidgets(): Promis ...

javascriptreactjstypescript

What is the most effective way to redirect users accessing from Android devices?

Attempting to send all Android users to a designated page. I attempted this method using php, but uncertain of its reliability. Need assurance that it will work for all possible Android devices. Thoughts on the safety of this approach? <?php $user_ag ...

javascriptphp.htaccesshttp-redirect