A single file viewer in ASP.NET MVC

I’m willing to purchase your product, but I need this basic capability in ASP.NET MVC. User clicks a link, server processes the file as necessary and the file gets displayed in your viewer without any uploading/ navigation capabilities. Simply a viewer for any format you support. I can’t find this simple example anywhere.

@xyz999xyz

Thank you for your interest in our product! Please check Showcases that has an example in ASP.NET MVC. It uses Angular UI application to display output HTML.

You can also check our free online app View documents online | Free GroupDocs Apps as a demonstration, just upload a file and you’ll be redirected to Angular App.

@xyz999xyz

In case you need just simple ASP.NET MVC application please check SampleMvcApp.zip (1.5 MB) that converts and displays files from Files directory.

You can view only the first two pages with the evaluation version of the product. See how to request a temporary license at Temporary License - Purchase - groupdocs.com.

Thank you for your feedback and while I do appreciate it, neither example provides a solution to the request. I am very well aware your software can convert files and display them as HTML. Likewise I’m familiar with the interface to drop/upload a file a file and view it in your Angular UI.

What I’m looking for is a solution to combine the two:

  1. click on a link as in your second example
  2. open it in your viewer as if it were dropped or uploaded in your first example

Seems as though it should be extremely basic to do.

Thank you!

@xyz999xyz

I’m sorry for the delayed response.

Please check the attached sample_app.zip (1.0 MB). It’s updated GroupDocs.Viewer-for-.NET-MVC example with the modifications that were needed to read filepath from query string and open a document. The main changes were made in the Angular App in the app.module.js, app.component.ts, and app.component.html files see changes.zip (5.6 KB) for more details.

To see the list of files please navigate to viewer/browser:

And select a file from the list to view:

You can also change f value in the query string to open another file.

Perfect! Maybe I’m unique, but I would think this is a common usage scenario and a sample you might want to update and highlight.

Thank you!

@xyz999xyz

I do agree with you and it looks like a common case to me too. This feature has been planned and has ID VIEWERNET-3296 in our bug tracker. You’ll be notified in case of any updates.

Okay, next issue. my documents live on Azure and I’d like to access it through a url. therefore, I need to replace

            this.selectFile(this.viewerConfig.filesDirectory + '\\' + file, '', '');

with the appropriate code. Doing some more digging now, but any guidance appreciated.

this file can be used as an example https://keystonecustomhomes2.file.core.windows.net/public/WebImages/pdf-icon.png?st=2021-05-31T21%3A34%3A25Z&se=2099-06-01T21%3A34%3A00Z&sp=rl&sv=2018-03-28&sr=f&sig=uID0LQeBOYhvfpAXZQYNzuzOxFG0gbusVGzGLLXS8Ro%3D

@xyz999xyz

This feature is supported out of the box. What you do need is just specify URL as a file parameter of the query string e.g.
http://localhost:8080/viewer/?file=https%3A%2F%2Fkeystonecustomhomes2.file.core.windows.net%2Fpublic%2FWebImages%2Fpdf-icon.png%3Fst%3D2021-05-31T21%253A34%253A25Z%26se%3D2099-06-01T21%253A34%253A00Z%26sp%3Drl%26sv%3D2018-03-28%26sr%3Df%26sig%3DuID0LQeBOYhvfpAXZQYNzuzOxFG0gbusVGzGLLXS8Ro%253D

The URL should be encoded, in case you’re planning to use ASP.NET MVC to list all of your files the helper method will do it automatically

@Html.ActionLink("From Azure", "Index", "Viewer", new { file = "https://keystonecustomhomes2.file.core.windows.net/public/WebImages/pdf-icon.png?st=2021-05-31T21%3A34%3A25Z&se=2099-06-01T21%3A34%3A00Z&sp=rl&sv=2018-03-28&sr=f&sig=uID0LQeBOYhvfpAXZQYNzuzOxFG0gbusVGzGLLXS8Ro%3D" }, null)

What will happen:

  • The file will be downloaded and saved to the local folder
  • The file will be rendered from the local folder

Thanks again for your help, this works as expected. However I’m quite discouraged, no matter what I do I cannot get this integrated into my application. It only wants to see the primary controller and I can’t get it to load the config the API controller.

Any additional insights would be appreciated.

Screenshot 2021-06-01 222814.png (17.4 KB)

@xyz999xyz

Just want to make sure that we’re on the same page. You do already have ASP.NET MVC application and want to copy code from the showcase to your application, is that right?

Correct, everything is working well at your application but when I transfer it to my MVC application I cannot get it to work

@xyz999xyz

Please check this repository and related commits where I’m creating a web app from a template in Visual Studio and then moving code from the showcase to the new app. Let us know if you still have issues with integrating the Viewer into your app and we’ll try assisting you.

haven’t checked it out yes, but that’s fantastic. I was going to request exactly that, remove all the complexity so we can more clearly see what is going on. I’ll get back to you when I review tomorrow

@xyz999xyz

Sure, let us know in case you have any issues or questions.

Absolutely fantastic. A couple of tweaks to make it work with the URL but fully functional. Impressive support!

@xyz999xyz

You’re welcome!

am I able to load in an TML page directly? for example the following URLs. it’s looking for a file at that path instead of HTML itself. Please advise. Thank you!

https://localhost:44310/Community/CommunityPricing?dev=APs
https://localhost:44310/Viewer?file=%2FCommunity%2FCommunityPricing%3Fdev%3DAPs

if I convert the file to PDF and then try to view it, I see where it gets converted to PNG files, but then I end up with the following

image.png (28.2 KB)

please advise. Thank you!

@xyz999xyz

It looks like loading HTML document from the localhost is not working well. We’ll check this issue. To workaround it you can create a controller action that will be downloading files and saving them into a files directory and then redirecting to the Viewer e.g.

public async Task<ActionResult> Preview(string url)
{
    // Download a file
    var uri = new Uri(url);
    var client = new HttpClient();
    var response = await client.GetAsync(uri);
    var fileName = Path.GetFileName(url);
    var mediaType = response.Content.Headers.ContentType.MediaType;
    var bytes = await response.Content.ReadAsByteArrayAsync();
    
    // Get file type
    var fileType = FileType.FromFilePath(fileName);
    if(fileType == FileType.Unknown)
        fileType = FileType.FromMediaType(mediaType);

    if (fileType != FileType.Unknown)
        fileName = Path.ChangeExtension(fileName, fileType.Extension);

    var filePath = Resources.GetFreeFileName(_filesDir, fileName);

    // Save file to the files directory
    System.IO.File.WriteAllBytes(filePath, bytes);

    // Redirect to Viewer?f=
    return RedirectToAction("Index", routeValues: new {f = Path.GetFileName(filePath) });
}

The complete code example can be found in LocalHtmlPage branch at GitHub.

How do you convert the file to PDF? Could you please share this PDF file?