Get binary information without relying on the use of arraybuffer

I have a specific resource that I am utilizing:

function _arrayBufferToBase64(buffer) {
    var binary = '';
    var bytes = new Uint8Array(buffer);
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[ i ]);
    }
    return window.btoa(binary);
}

var API = $resource(server + 'album', {}, {
    get: {
        url: server + 'album/:albumId/photo/:photoId',
        method: 'GET',
        responseType: 'arraybuffer',
        headers: {
            'AuthToken': 'the secret',
           'Accept': 'image/*'
        },
        interceptor: {
            response: function(resp) {              
                return 'data:'+ resp.headers('Content-Type') + ';base64,' + _arrayBufferToBase64(resp.data)};
            }
        }
    }
});

The purpose of this code is to retrieve the binary content of a file from a server and generate a data URI with the base64 data included.

It's worth noting that a simple src tag cannot be used in place of this call since it requires sending authentication headers along with the request.

Although this functionality works smoothly in modern browsers, compatibility with older browsers poses a challenge due to the arraybuffer usage. Hence, my question is: Is there a way to achieve all this without relying on arraybuffers?

I attempted to remove the response type and convert the string in resp.data by following the instructions mentioned here, but unfortunately, it was not successful.

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

What could be causing the React state (array) to be empty within a callback function? Why is it failing to utilize the latest value from the external

I'm facing a challenge that has me stumped. I am attempting to add values to an existing array, but for some reason, the 'state' variable is always empty inside the onmessage callback function. I can't seem to figure out why this is hap ...

angular bootstrap dropdown opening on the left side

I am facing an issue with the angular bootstrap dropdown. I have successfully implemented it, as shown in this link. However, the problem is that the dropdown opens on the right side by default. Is there a way to make it open on the left side instead? Bel ...

I'm not skilled in programming, so I'm not sure what the problem is with the code

While working on my Blogger blog, I encountered the need to add a fixed sidebar ad widget that would float along the screen. After trying multiple codes, I finally found one that worked. However, using the template's built-in variable functions led to ...

Unable to choose anything beyond the initial <td> tag containing dynamic content

Struggling to implement an onclick delete function on dynamically selected elements, but consistently encountering the issue of only selecting the first element each time. // Function for deleting entries $("#timesheet").on('click', &ap ...

Selecting items with checkboxes in a Bootstrap dropdown menu

As I work on customizing a bootstrap dropdown with checkboxes, my goal is to have the label name written on the input dropdown in between ';' whenever a checkbox from the dropdown is selected. This will create a similar result as shown in the upl ...

Dynamic text displayed on an image with hover effect using JavaScript

Currently, I am in the process of developing a website for a coding course that is part of my university curriculum. The project specifications require the use of JavaScript, so I have incorporated it to display text over images when they are hovered over ...

What is the best way to incorporate multiple conditions within a React component?

When working in React, I have the ability to conditionally render any div using the following code snippet: {hasContent && <span>{value}</span> } Recently, I attempted to include two conditions as follows: {hasContent || hasDesc &am ...

The webpage must be designed to be compatible with screen resolutions starting from 800 x 600 pixels and higher, utilizing Angular

I am working on developing a webpage that is specifically designed to work for resolutions of 800 x 600 pixels and higher. Any other resolutions will display the message "This website can only be accessed from desktops." Here is my approach using jQuery: ...

Error encountered on login page: The protocol 'http' does not exist (related to HTML, TypeScript, Angular2, and JavaScript)

Screenshot of the issue: Access the complete project here: Link to a Plunker example of a log-in screen: http://plnkr.co/edit/j69yu9cSIQRL2GJZFCd1?p=preview (The username and password for this example are both set as "test") Snippet with the error in ...

WebSocket functionality in Node.js utilizing the ws module from npm

I am currently working on developing a chat application. The first step involves the user sending their username, and if the name does not already exist, they are logged in. The user can then send a message to another user. However, an issue arises where a ...

Tips for effectively transmitting and managing a JSON object within an ASP.NET MVC controller

I am currently working on a project using ASP.NET MVC 4 and I'm facing an issue with sending a JSON object to a controller that is supposed to accept it. Here is the snippet of javascript and jQuery code I am using: var jsonObject = { "PlantShip ...

Document: include checksum in HTML

I have a set of three files. The file named loader.js is responsible for creating an iframe that loads another file called content.html, which in turn loads content.js. I have made loader.js publicly available so that other users can include it on their ow ...

Launching an HTML document with checkboxes already selected

I am attempting to load my HTML page with checkboxes already checked if they were selected on the previous page. The code I currently have is shown below: {% if job.activism %} checkbox logic goes here {% endif %} <br><input type="checkbox ...

Disable the resizing and responsiveness features in the jQuery Basic Slider

I'm currently utilizing the Basic jQuery Slider from the Basic Slider website, and I am attempting to eliminate the responsive/resize feature. My goal is to keep the slider contained within a centered div without changing its size. However, whenever I ...

Speeding up the loading time of my background images

body { background: url(http://leona-anderson.com/wp-content/uploads/2014/10/finalbackgroundMain.png) fixed; background-size:100% auto; } I have unique background images on each of my sites, but they are large in size and take some time to load due to bein ...

AngularJS directive not registering event after model update

Within my angularjs application, I have implemented an element directive that is equipped with an event listener. This listener is designed to respond to a broadcast event from the controller. app.directive('listItem', function(){ return { ...

Sort through JSON data according to the current page's URL path

The issue at hand Currently, I am faced with the challenge of filtering JSON data and presenting only a specific portion of it on an Angular web page, depending on the URL of that particular page. Delving deeper into the matter Within my dataset, there ...

Looking for matching index in rotated array

Currently, I am working on a design with a reference rectangle (colored in red). Within a rotated container div (#map), I am trying to create a duplicate rectangle (in yellow) that matches the size and position of the original "base" rectangle, regardless ...

"Can someone guide me on where to place the JavaScript code within this Bootstrap snippet when working with CakePHP

I'm currently delving into CakePHP and am eager to incorporate this Bootstrap code snippet from onto my website. I've successfully added the HTML to the .ctp file in the Pages directory and styled it with custom.less, but I hit a roadblock when ...

From Rails to Angular: Implementing act_as_follower in Your Application

My previous app was built on Rails and included the acts_as_follower gem. In Rails, I used code similar to this: <% if current_user.following?(sentence) %> <%= link_to "Unfollow", unfollow_sentence_path(sentence) %> <% else ...