How to load local file in new tab? - javascript

I am working on angularjs java project. I won't to load local files of all file types (txt, pdf, image files etc.) from my system into new tab on click of button using javascript, angularjs or java code.
I able to load the content of the files but it is not displayed in correct format ie. I won't to load the file in similar format as they are placed on my system.
I would be thankful if anyone could help me in finding the solution.

You can't simply expect your browser to display the file as it is displayed in your local system.
If you try uploading a file and then viewing it, the browser will download the file and technically, you then view the file locally.
There are a few Cloud Storage options such as Box.com and Google Docs that have their own file explorer (that support limited file types). I don't think there is any free library available that does that as it requires quite an effort to support many file types for display in the browser.

This requirement can be achieved by following directive ng-bind-html in angular Js .
Kindly refer the examples and documentation which is given in Angular Js website
$sce is a service that provides Strict Contextual Escaping services to AngularJS.
Check this link for directive documentaion
For viewing pdf use ng-pdfviewer, include ng-pdfviewer.js as JavaScript file, along with pdf.js and pdf.compat.js.
Declare ngPDFViewer as dependency to your module.
You can now use the pdfviewer tag in your HTML source.
Click here for GitHub link for ng-pdfviewer
Use <img ng-src="image.jpg"/> for images

Related

How to export file at specific location in angularjs or javascript?

I am working in angularJs. i used fileSaver.js for export the file. exported file stored in download folder. but i want to export or download selected file to desktop loacation.
So how i achieve this?
is there any other solution with or without filesaver.
is there a way to achieve this solution in javascript?
Short answer: You can’t.
Long answer: Again, you can’t.
I am not sure what you are trying to do here but I am assuming you are writing a script which will enable a browser user to click on one link and get a number of files downloaded, and that too to a local directory. If that were possible, that would represent a great security risk.
The only way to do that is to configure your google chrome to download to a specific folder. Javascript doesn't have access your local disk.

Modifying local files embedded in a Google Chrome Extension using JS

I have been doing a lot of research and have been unable to find an answer to my exact question. I understand that having a google chrome extension that can write to local user files would be a major security breach and thankfully isn't possible. However in my extension is a .json file that is used to make a HTML webpage with links via JavaScript. The JS reads the .json file and inserts the lines of code on the html page. I am attempting to make a user interface that allows them to update and edit the .json file that is inside the extension in order to add new lines of code to the webpage, but have been unable to find anything that could make this work due to security issues. I was thinking that since the file is in the extension users should be able to modify it.
If that was confusing here is a flow of what I want to happen and where it is not working:
Works:
Users clicks on button that takes them to a webpage hosted in the extension -> when page is loaded, the javascript runs -> the JS looks at a .json file in the extension using an XMLHttpRequest, parses the data, and then inserts it into the html -> The user now see's the content that was contained in the .json file on the html page.
Doesn't work:
After this I would like to have an interface that will allow the user to edit this .json file in order to update the page as they see fit, all in the extension itself.
If it was just me using this extension I could simply use the chrome storage api's available, however this is for my team at work, who are wanting to make edits as we need. Which means we will all be editing the same .json file.
Any information regarding this would be very beneficial. Even if it's as simple as it can't be done. Either way manually editing the .json file without a simple UI is much easier than editing the html directly.
Thanks in advance!
Posts/Articles I have looked at regarding this question:
Access Local Files using a Google Chrome Extension
https://developer.chrome.com/extensions/storage
Local file access with javascript
Allow Google Chrome to use XMLHttpRequest to load a URL from a local file

Save Javascript or Replace Javascript File in Chrome Developer Tools

Is there a way to replace a .js file in the website sources with a file on my workstation, or make a modification to a .js file and refresh the website to see the changes?
I am developing client-side JavaScript code against a SharePoint website on a server. I cannot create a local version of the website, so I need to modify the script, save the file to the server, refresh, etc. I do not have direct access to the server, and saving a file in a SP doc library or web part takes a lot of time between edits.
I can make small modifications using the dev tools while breaking on certain lines and applying snippets, but I am hoping for a better way.
Thanks!
If you have access the server that's hosting the file you should be able to replace or modify the JS file. Alternately you can use local hosting tools to test your file and then upload it to the server once you've confirmed it's working.
If you explain what you level of access to your host is we can offer better suggestions.

Running JavaScript code on PDF pages on my domain?

I it possible to run javascript code on for example: mydomain.com/pdf/pdf-example.pdf?
Any ideas how to accomplish this?
My intention is to add live chat code so that we can help customers while they are looking at the PDF
You can use pdf.js to render a PDF file onto a standard HTML page. So instead of linking directly to the PDF file, you would create a new HTML page, where you would embed the pdf.js viewer, as well as any additional custom Javascript. Here is a demo. The downside to pdf.js, is browser support is limited.
Another option is pdfobject, which enables you to embed PDF's within pages. This uses the browsers native PDF viewer for rendering.

access local files through jquery doc viewer

I am writing a small application using backbone, jquery and node. As part of the application, i want to list files on browser. When user clicks on any file, i want to open up a doc viewer window.
I tried some plugins like google doc viewer, jquery plugin etc. But not able to access files on my system.
Is it possible to access local files with available plugin. Do i need to add any headers as part of the request to specify it as doc viewer request.
I am new to jquery and front end technologies. Can someone explains with little patience.

Categories

Resources