Preview docx, PPTX, and XLSX files in angular before transferring them to the server

Is there a way to preview a doc file before uploading it? I can successfully view pdf, png, and jpg files in an iframe using their base64 data. But for Doc, Docx, PPTX, and XLSX files, I am unable to display them in the iframe.

<input type="file" #file placeholder="Choose file" (change)="uploadFile(file)">
<iframe [src]="base64File"></iframe>

uploadFile(file) {
 let reader = new FileReader();
    reader.readAsDataURL(data.files[0]); 
    reader.onload = (_event) => { 
  this.base64File= this._sanitizer.bypassSecurityTrustResourceUrl(reader.result);
}

I have tried using ngx-doc-viewer, but it does not support viewing files with base64 data - only file paths. Since I cannot access the file path from the local hard drive during upload, angular restricts me from using that path even if I manage to obtain it.

javascriptangulartypescript

Answer №1

Dealing with a similar issue, I discovered that the iframe tag is typically used to display HTML documents. To resolve this problem, I incorporated ng-doc-viewer, an NPM package designed to download files and enable previewing functionality. You can easily install this package by running the command (npm i ngx-doc-viewer).

To implement NgxDocViewerModule into your root module, utilize the following code snippet:

<ngx-doc-viewer [url]="baseimg" viewer="url" style="width:80vh;height:80vh;">

For additional information, please visit: https://www.npmjs.com/package/ngx-doc-viewer

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

"Create a responsive mobile navigation bar that stretches to 100% of the window height,

I've encountered an issue with the mobile version of my website. When users scroll to view content, clicking on an icon triggers a slide-in navigation bar from the left side and sets the body to have overflow: hidden;, effectively preventing further s ...

javascriptcssmobilenavigationbar

Using the Angular translate filter within a ternary operator

I am currently working on translating my project into a different language. To do this, I have implemented the Angular Translate library and uploaded an external JSON file containing all the translations. Here is an example of how it looks: { "hello_wor ...

javascriptangularjsangular-translate

Adding information into a separate row via JavaScript

When using XMLHttpRequest to retrieve data from a custom URL, specifically mocki.io and fake JSON, I am encountering an issue where all data elements (element.name and element.city) are being placed in one table row. Ideally, I would like each pair of name ...

javascripthtmlajaxxmlhttprequest

Displaying error message dynamically using ajax

I am looking to customize the way error messages are displayed on my form. Instead of having one generic div above the whole form, I want the error messages to appear next to each input field. <div id="response"><!--This section will show error ...

javascriptphpjqueryhtmlcss

Unusual Methods in Vue.js: Exploring Odd Behavior

In my application, I have a single data variable called message, as well as a method in the methods section that performs cryptographic algorithms. Below is the code snippet: export default { data: () => ({ message: "" }), methods: { clic ...

javascriptvue.jswebpack

Testing a component in Angular 2 that utilizes the router-outlet functionality

I recently set up an angular 2 project using angular-cli. As part of the setup, I created a separate AppRoutingModule that exports RouterModule and added it to the imports array in AppModule. Additionally, I have the appComponent which was generated by an ...

javascriptangulartestingangular2-routingkarma-runner

Issues arise when utilizing external scripts alongside <Link> components in ReactJS, resulting in them becoming unresponsive

I'm experiencing some difficulties with an external script when using <Link to="/">. The script is included in the main layout file index.js as componentDidMount () { const tripadvisorLeft = document.createElement("script"); tripadvisorLef ...

javascriptreactjsgatsby

What is the best way to duplicate input fields without causing any issues with unique IDs?

My challenge involves an input form connected to an element that dynamically changes the properties of its children. I am seeking a solution to duplicate or clone this element along with its input form. Currently, I am utilizing element.cloneNode(true) to ...

javascripthtmlcss

Tips on integrating jQuery into html2canvas:

$('#button').on('click', function() { var element = $("#html-content-holder"); // global variable var getCanvas; // global variable html2canvas(element, { onrendered: function(canvas) { getCanvas = canvas; } }); ...

javascriptjqueryhtml2canvas

The Discord.js bot is unable to send messages in embedded format

I created a Discord bot using discord.js with multiple commands, including three commands with embed forms. One command, "help", works perfectly fine, but the other two are not functioning properly. All of them have the same main code structure, specifical ...

javascriptnode.jsdiscorddiscord.js

Using External APIs in React: A Guide

Recently, I created a React app using the npm module 'create-react-app' I ran into an issue where I needed to call an external API from api.example.com, but found that Axios was making requests to localhost instead of the external API. Here is ...

javascriptreactjsaxios

During the for loop, a string variable with the prefix "undefined" is

I'm currently working with a drop-down menu where I use the .Change() function to trigger a specific action. This action involves obtaining data using the getJSON method and then creating an array string for an mp3 file based on that data. The code b ...

javascriptjquery

When the input value is changed programmatically, the onchange event does not execute as expected

Having trouble updating the content of my dataTable when using JS script to change the quantity value. Here is a snippet from my code. <h:inputText id="counterFeatures" value="#{myBean.quantity}"> <f:ajax event="change" render="myDataTable" ...

javascriptajaxjsf

Encountering issues with Dependency Injection for ngMaterial

I'm in the process of creating an application that utilizes both dirPagination and AngularJS material. Unfortunately, I'm facing issues when trying to add the ngMaterial dependency to my application. While the angularUtils.directives.dirPaginatio ...

javascriptangularjsangularjs-1.6angularjs-material

Create a Seamless Scroll to Anchor Effect with JQuery and a Fixed Navigation Bar

I'm encountering an issue with smooth scrolling on a webpage that has a sticky header. When I click on a navigation link to scroll to a specific section using scrollTop: href.offset().top - 100, the page doesn't behave as expected. It seems to bo ...

javascriptjquerycsshtml

Showing data in json format using Angular

I have designed a data table that showcases a list of individuals along with their information. However, when I click on the datatable, it keeps opening a chat box displaying the details of the last person clicked, overriding all other chat boxes. 1. Is t ...

javascriptjqueryjsonangularjs

What are the ideal strategies for handling asynchronous calls in Vuex?

Currently, I am exploring Vuex and have come across the concepts of using Actions instead of Mutations when dealing with asynchronous code. I find myself pondering whether it is more beneficial to handle all the asynchronous logic within the action itself ...

javascriptvue.jsvuex

What could be the source of the "Uncaught Error: write after end" error occurring in my test cases?

Below is the code I am working with: var Promise = require('bluebird'); Promise.longStackTraces(); var path = require('path'); var fs = Promise.promisifyAll(require('fs-extra')); var clone = require('nodegit').Clone ...

javascriptnode.jspromisemocha.jschai

Preventing Flash of Unstyled Content in ElectronJS Browser Windows

Upon creating a new BrowserWindow and utilizing loadURL to incorporate an html file within the renderer, there is a brief instance where unstyled content is displayed for approximately half a second before the css is loaded. window.loadURL('file://&a ...

javascriptcsselectron

Creating intricate HTML components using jQuery/Javascript

My current challenge involves receiving data from JSON and dynamically displaying it on a web page within complex HTML structures, such as tables with lists. Every time new JSON data is received, I need my HTML elements to be dynamically regenerated. For ...

javascriptjqueryhtml