How to open/display text file content coming from backend in modal window using angular 7 - html

I am new to angular and looking for a solution where I can select a text file from a list of text files coming from back-end using a checkbox and display its content on click of a button let's say [View Content] in modal window or a dialog box.
The meta-data of all files visible is to be displayed in a table at front-end.
The backend API fetching the file details just provide the id,URL,fileName in json format displayed in a table and files are stored in the file repo lets say google drive.
Any working solution link will be helpful to understand the implementation.

Just make a request and get the file by url using angular http client. And then you can use some library to display it according to the file type.
PS: Image can be fetched directly.

Related

How to build Angular HTML template on button click?

I'm trying to create an HTML template to export it as a PDF File, but I'm not sure on how to do this using Angular's engine;
What I need to do basically is to build this template when I click a "Download As PDF" button, and this should take all the information I have in one component and use to create an HTML document which will be exported, but not shown on the screen or anything like that.
Since my actual screen and the format I need to have on the PDF file I'm not able to just use the same component's HTML template, so I'm looking to build the template structure I need when I click on the button.
My current component uses mat-tabs to display information, but in the actual PDF I need each tab to be its own individual section in the page; so I would need to build this new HTML structure only when I want to generate the file
Any ideas how i could do something like this?
Based on your criteria this sounds like it needs to be a whole new component that is created specifically to the format needed for the PDF export. You'd add the correct headers such as content-disposition to have your PDF attachment.
Your next task is to determine how to get your data into that new component that is dedicated to PDF export. If you are already using a Redux/NGRX store in your app then that is probably easy enough to use.
A more common way to share data across components within the same module is to utilize an Angular service. This service is injected into both versions of the component and all important data is saved and retrieved from that service.

How does one hide the URL for a link to a file?

I've got a C#, Kendo MVC, Razor site. There's a Kendo grid where one of the cells has a hyperlink to a pdf file, like this:
File 123
Clicking on the link opens a pdf in a new browser tab. The problem is, the URL is visible in the browser and can be changed to see another file. For example, the user could replace 123 with 456 and see File456.pdf. I need to do two things:
Hide the filename in the URL when the pdf is opened.
Hide the URL when the user hovers over the hyperlink.
Alternatively, I'd take a way to click the link (without the user seeing the URL) and download the file, but I think whether to download or view the file is browser specific.
I would just create an event to send the user back to the controller and handle the opening or download there, but the Kendo grid complicates that and this, as usual, needs to be changed right away. I'll take suggestions on how to manipulate the Kendo row to open a pdf, but I'm hoping there's a simple way to change just hide the URL from the user.
The problem is, the URL is visible in the browser and can be changed to see another file.
In my opinion the correct approach in this case would be not to pretend to hide something from the user, but rather know who your users are and implement authorization on your server. This means that if user A attempts to access file 123 that belongs to user B he gets denied. But if he attempts to access file 124 that belongs to him, then why care that he modified the url in the browser? After all user A accessed his own file. So instead of serving a static file directly, you could put those files into a folder that is not directly accessible and serve them through a controller action that will apply the necessary authorization logic (does the file that the user is trying to access actually belong to him before serving it?).
So my advice in this case for you would be to implement authorization on your server based on the resources that he is trying to access.
If you handle the redirection in JS I think it won't show the url. For example
<p onclick="redirect('http://example.com/Files/File123.pdf')">Click here for PDF</p>
<script>
function redirect(link)
{
window.location = link;
}
</script>

Is there any API for Sublime text's packages site?

Is there any API for Sublime text's package manager? I tried to find it but couldn't find any mention of it anywhere.
Yes, every data-driven page on https://packagecontrol.io can have .json appended to the end to get the raw data. Here are some examples:
https://packagecontrol.io/.json
https://packagecontrol.io/stats.json
https://packagecontrol.io/search/sftp.json
This is how the website is implemented – there is a JSON API and a JS SPA that queries the JSON API and uses Handlebars template to create the page. On initial page load, the JSON is rendered using Handlebars on the server so there is no initial "loading" screen.
For pages that are not data-drive, i.e. documentation pages, you can append .html to get the primary content:
https://packagecontrol.io/installation.html
https://packagecontrol.io/docs/usage.html
Additionally, the whole website it open source at https://github.com/wbond/packagecontrol.io.

How to embed local HTML file to existing GWT page

I have a page that is constructed by GWT, when the page get loaded, I will display some required content in it. And then if user click a certain button on the page, I will send request to server side and server will return me a HTML file(a chart generated by jquery plotting tool) stored in local directory, I need to display this HTML file into the existing GWT page's certain widget.
I tried to use Frame in GWT to link to the local HTML file and display it, it get failed, googled and found it's because of browser security setting.Please share your thought, any idea is appreciated.

I uploaded html file containing embedded image encoded base64. But google couldn't convert this file

As title, I uploaded html file, it contained embedded image encoded by base64. I can correctly see all contents with safari web browser.
I want to convert this html file to Google Document, so I turned on "convert" flag to "YES", in GTLQueryDrive instance.
It seems that conversion is success, but when I try to open converted file, this is just progress control instead of image what should be there. I waited several minutes, but that progress control is never ended.
Also I manually try to convert html file to google document in google docs website using "Export to Google Document", but it didn't work.
Why google can't convert this file to their own format?
Following is html file what I uploaded:
<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QBYRX....">
I think you're expecting too much from the API.
The API deals will upload a single blob of content. As an option (convert=yes) it will open that blob, parse it and convert it to a native Google Doc.
You seem to be expecting the server to realise that there is an embedded content tag, and the server should somehow reach down to the client, find it, and pull it up. That's never going to happen.
The steps you will need to go through are:-
1. Parse the HTML to find any embedded images
2. Upload each image to Drive and store the returned item
3. Grab the url from the item returned in (2)
4. Patch your HTML so the IMG SRC is that in (3)
5. Upload the HTML