How to show a preview of an uploaded document in ASP.Net MVC 5

Question

I have a form where I take basic Resume information from user and then there is an upload button for Resume upload. Now I want to have a "Detail" page where I can show the details of user inputs for the Resume form. I am able to show all the Model properties except the (uploaded file). Is there some way I can show some sort of preview pane for document uploaded in the Detail page.

ViewModel:

public class ResumeViewModel
{
    [Required(ErrorMessage = "Enter Resume Name.")]
    [Display(Name = "Resume Name")]
    public string ResumeName { get; set; }

    [FileType("pdf|doc|docx|PDF", ErrorMessage = "File type is not valid.")]
    [Required]
    [Display(Name = "Upload Resume")]
    public HttpPostedFileBase UploadedResume { get; set; }
}

Currently, I am able to download the document with below code

   public FileContentResult Download(int? resumeId)
        {
            var temp = _context.Resumes.Where(f => f.ResumeId == resumeId).SingleOrDefault();
            var fileRes = new FileContentResult(temp.Content.ToArray(), temp.ContentType);
            fileRes.FileDownloadName = temp.FileName;
            return fileRes;
        }

But how to display it in some page along with rest of the Model properties?

Refer [this question](https://stackoverflow.com/questions/13869654/net-graphic-libraries-to-display-images-pdf-docx-and-any-other-format-of-ima) for a few options — , Aug 26 '17 at 08:02
@StephenMuecke: Can't I use I frame or something to show small preview window and all. Just wondering. — Unbreakable, Aug 26 '17 at 08:06
I do not want entire webpage to display the doc. Just small scrollable area in web page. — Unbreakable, Aug 26 '17 at 08:08
Might be an option, but why do you want to do this? (you have already effectively sent the document to the client anyway) — , Aug 26 '17 at 08:08
@StephenMuecke: Yes you are right. I thought if it was simply few line of code, I will learn something new. Nevermind, there are plenty of other things to learn too. :) Besides, it's my home project, so it's not a mandatory requirement. — Unbreakable, Aug 26 '17 at 08:10
@StephenMuecke: I found one link,https://stackoverflow.com/questions/6439634/view-pdf-as-part-of-the-page it tells that I need to use `FileStream("c:\\PeterPDF2.pdf",...` ). Can I do something like this. But what shall I put inplace of `c:\\PeterPDF2.pdf` — Unbreakable, Aug 26 '17 at 08:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/152887/discussion-between-unbreakable-and-stephen-muecke). — Unbreakable, Aug 26 '17 at 08:56

score 0 · Answer 1 · answered Aug 26 '17 at 10:01

You can do this with object tag

firstly create a page to view uploadedfile

cshtml

<object data='@Url.Action("GetFile")' type="@Viewbag.Type" width="700" height="700"></object>

and in the FileController

     public ActionResult Index(int? resumeId)
                {               

                  var temp = _context.Resumes.Where(f => f.ResumeId == 
                  resumeId).SingleOrDefault();
                  var fileRes = new FileContentResult(temp.Content.ToArray(), 
                  temp.ContentType);
                  Session["Path"]= temp.FileName;
                  Session["Type"]=temp.ContentType
                  return View();
                }
and Action of File

public ActionResult GetFile()
        {
            if (Session["Path"] != null)
            {
                FileStream fileStream = new          
                FileStream(Session["Path"].ToString(), FileMode.Open, 
                FileAccess.Read);
                ViewBag.Type=Session["Type"]
                return File(fileStream, Session["Type"]);
            }
            return View("NotFound");
        }

How to show a preview of an uploaded document in ASP.Net MVC 5

1 Answers1