Encountering a 400 Error when Generating a URL from a Blob with Google Doc Viewer in Angular's ngx-doc-viewer Plugin

Utilizing Angular 10 along with the ngx-doc-viewer library: https://www.npmjs.com/package/ngx-doc-viewer.

Encountering the following error: "400. That’s an error.The server cannot process the request because it is malformed. It should not be retried. That’s all we know."

HMTL:

<ngx-doc-viewer [url]="url?.href"[viewer]="google"> </ngx-doc-viewer>

In my component I have:

this.url.href = (window.URL ? URL : webkitURL).createObjectURL(file);
File is a blob that I converted from base64.

This is the url I am encountering the error with:

https://docs.google.com/gview?url=blob%3Ahttp%3A%2F%2Fcompanyurl%2F7d5d56ac-4b09-4ba7-ab7c-8246d5c96aa1&embedded=true

Can Google Doc Viewer / ngx-doc-viewer handle blob URLs?

Answer №1

After conducting some investigation, I discovered that ngx-doc-viewer does not have the capability to support blob URLs or base64. It only accepts publicly accessible URLs. For instance, https://docs.google.com/gview?url=http://africau.edu/images/default/sample.pdf&embedded=true

Here are additional resources that provide more detailed information:

  1. https://github.com/Marcelh1983/angular-document-viewer/issues/85
  2. https://github.com/Marcelh1983/document-viewer/issues/22
  3. https://github.com/Marcelh1983/document-viewer/issues/10

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

Unexpected TypeScript error encountered even after narrowing down the type

Surprisingly, the code snippet below is generating an error, even though the variable a has been narrowed down to type string in the line const b = a. It's worth noting that when I assign a to b, b does not encounter the same issue. function test(a: ...

Having issues with ngbDropdown in Angular 4 from ng-bootstrap?

My dropdown menus are malfunctioning. I attempted to follow advice from this source, where I upgraded to bootstrap 4-alpha, but unfortunately, the issue persists. Here is an excerpt from my package.json file: "@angular/animations": "^4.3.0", ... // ...

Troubleshooting a TypeScript Problem with React Context

In my AppContext.tsx file, I have defined the following import React, { useState, createContext } from "react"; import { Iitem } from "../utils/interfaces"; interface AppContext { showModal: boolean; setShowModal: React.Dispatch< ...

Ensuring typescript req.user in Passport JS is always defined: Best practices

When utilizing Passport JS, the req.user within the route is considered potentially undefined. However, the middleware prior to my route method ensures that this scenario does not occur. How can I convey this information to TypeScript? Object may be &apos ...

How to nullify the valueChanges pipe in Angular RxJS until the observable is resolved

A challenge I am facing is piping the valueChanges from a select element to trigger the appropriate API request and displaying a spinner until the response is received. Additionally, I am trying to utilize publish() and refCount() methods so that I can use ...

determine the color of the pixel at the top left corner of a jpg image

If we were given a specific URL, for instance, "//upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg", how can we use javascript (specifically jQuery or Angular) to obtain the top left coordinates (or any (x,y) coordinates) of this image? Just to clarify, ...

Using React TypeScript: maximize the efficiency of sending multiple JSON objects to the frontend with the useData hook

Currently, I am experimenting with a customized useData hook based on the React Beginner course by CodingWithMosh. This modified hook contains multiple objects within it. In the original course content, all data was stored in the results JSON object. I am ...

Sometimes the downloaded xlsx file may become corrupted

Currently, I am working on developing a project using Angular4 with Typescript. One of the tasks involved creating a blob utilizing the XLSX-populate library. Below is an example showing the code snippet for generating a valid xlsx object: var url = wind ...

Add 'http://' to hrefs that do not have a protocol specified in Angular

I've been trying to come up with a solution to automatically add "http://" to any href links that don't already have it before the link. Here is what I currently have: static correctUrls(input: string): string { // extract all hrefs from the ...

What are the recommended best practices for displaying loading indicators, alerts, and logs in Ionic2?

Seeking the most effective way to handle loadings, alerts, and console logs in Ionic2. Instead of duplicating the following code on every page, I want to be able to call it just once. Here is an example code snippet for showing loading: showLoading() ...

Exploring Angular 2.3 Component Inheritance and the Importanc of Dependency Injection

Is there a way to share dependency injection between child and parent components using the new Angular 2.3 Component Inheritance? For instance, I aim to transfer AlertService down into the parent component while keeping TraingCompanyService in the derived ...

Why is tsconfig.json an essential file in TypeScript development?

As I delved into Angular2 documentation, I stumbled upon the tsconfig.json. I am curious to understand the significance of the parameters listed below: { "compilerOptions": { "target": "es5", "modul ...

What is the best way to retrieve the current path in the app's directory using Next.js?

Exploring the new features of the experimental app folder in Next.js 13, I encountered a change where next/router has been replaced with next/navigation. As a result, I adjusted my code to import the useRouter hook. However, I noticed that the property pat ...

Encountered an error while attempting to upload image to Web API using Angular

I'm encountering an issue when attempting to upload a picture, as I am unable to successfully send the picture file to my backend (.net core) using Angular. Every time I make a post request, I consistently face the Error:HttpErrorResponse error. It se ...

Is it possible to automatically open the Tinymce Comments sidebar without the need for a manual button click?

After successfully implementing the Tinymce comments plugin into our configuration, we have come across a request from our users. They would like the 'showcomments' button to automatically trigger on page load, displaying the sidebar containing t ...

Angular expands the HTML of the parent component

Although this question may be old, I am still struggling to find a straightforward answer and it just doesn't make sense to me. I have a main component with its own HTML and several components that inherit from it. Here is what I am trying to achiev ...

Unable to access the values of the object within the form

I am encountering an issue where I cannot retrieve object values in the form for editing/updating. The specific error message is as follows: ERROR TypeError: Cannot read properties of undefined (reading 'productName') at UpdateProductComponen ...

Dealing with HTTP response errors in an Angular application

Below is the content of my data.json file: [ {"value":1}, {"value":2}, {"value":3}, {"value":3} ] & When using Http to retrieve this data, it works fine. However, if the server is turned off, an error is thrown. I want to display a cu ...

The functionality of matSort is currently malfunctioning

Struggling with sorting data using mat-table and unable to identify the error. Here is a stackblitz example for reference: https://stackblitz.com/edit/angular-lzhpvx Could anyone assist in finding the mistake? ...

What is the substitute for <center> tag in AngularJS?

Error: Template parse errors: 'center' is not a recognized element: 1. If 'center' is supposed to be an Angular component, make sure it is included in this module. 2. To permit any element, add 'NO_ERRORS_SCHEMA' to the ' ...