I'm using the following snippet of code in an MVC Action to return an image in an HTML image tag:
byte[] bytes = System.IO.File.ReadAllBytes(fileLocation);
string fileType = "application/octet-stream";
FileContentResult fcr = new FileContentResult(bytes, fileType);
fcr.FileDownloadName = fileName;
return fcr;
The image tag's src attribute looks like this: src="/MyController/MyAction/fileInfo"
It works and the image displays in the web page. However, if I try and open the image by itself in a browser the browser asks me what image viewer I should use to open this resources. If the image is statically linked off the site then the browser will open the image.
What do I need to change in that code to make the browser open this image?
(I've tried a few different content-result-types and also a few different file-types but haven't found the right combo yet.)
You have to set the mime type of the response to the appropriate image type (ex: image/jpeg) instead of application/octet-stream.
Related
I need to create a pdf preview that should be displayed on a web page as an image. The pdf file is just a simple report build on almost plain HTML. Essentially I had a problem with displaying checkboxes, now I replaced them with pics of checkboxes but the issue remains the same.
Here how I create the pdf report from my HTML view with help of groovy and grails:
def html = htmlRenderService.getReport(info)
ByteArrayOutputStream out = new ByteArrayOutputStream()
HtmlImageGenerator htmlImageGenerator = new HtmlImageGenerator()
htmlImageGenerator.loadHtml(html)
BufferedImage bi = htmlImageGenerator.bufferedImage
ImageIO.write(bi, "PNG", out)
byte[] bytes = out.toByteArray()
String base64bytes = encoder.encodeToString(bytes)
String src = "data:image/png;base64," + base64bytes
out.flush()
def getReport(Info info) {
return groovyPageRenderer.render(view: REPORT_VIEW,
model: [info: info])
}
Then I send the src string to my view and render it as:<img src="${src}" alt=""/>
Then my checkbox pic looks like this: <div style="/*style stuff*/ background-image: url(data:image/png;base64,LINK_TO_THE_IMAGE"></div>
In the end, I received a picture of my pdf report rendered pretty well displaying as an image on my page, BUT without checkboxes. Here is the picture of one part of it:
And here is the same part but from the pdf document which I rendered all the same way, but just downloaded directed from my webapp:
Here is an example where I combined both options(input checkbox and image checkbox) and rendered it as an image:
So what could cause this issue? Thank you in advance.
UPDATE: I came across today to this comment under another issue with HtmlImageGenerator:
HtmlImageGenerator seems to use a JEditorPane for rendering the HTML. Swing HTML support does not extend to the ability to render data images. It might be possible by digging into the HTMLEditorKit and changing the image loading element to support data images, but then you'd need to find a way to get HtmlImageGenerator to use the altered editor pane.
Seems that HtmlImageGenerator doesn't work well with images inside HTML files, but it's still unclear why it doesn't render checkbox inputs as well.
Without seeing the code you end up with after page load, check the chrome dev tools panel to see if the image has actually loaded correctly to the page which will tell you it's at least accessible to use. Then check if the url is output correctly to the div as the background-image. If it looks correct and there aren't related errors in the console, it is likely a css setting.
With background images, your container will need to contain content or else you will need to specify:
width
height
a display setting
background-position, and a
background-size
If you can upload more info, I might be able to be more specific.
Are there any ways to open byte[] type image in browser by only using
Image To Open
For example I can open Image in browse if I know a path in a file system:
Image To Open
But what if I only have byte[] array and content type of image (retrieved from db). Are there any ways to fill href attribute with a data I have to fulfill my needs ?
yea u gotta base64 encrypt your bytearray
and then set the href like so:
data:image/jpg;base64,yourbase64encryptedstring
I want make display word file in pop window using mvc 4 razor. the file has been taken from specific path and the file already stored in my project.
If you need a popup with smaller size than the full-screen window, you could try with some javascript:
fileDownloadLink variable is your download link, pointing to the Action method in your controller
The second and third arguments are explained in MDN reference for window.open function here MDN: Window.open
window.open(fileDownloadLink, 'insertPopupNameHere', 'width=400,height=400')
Otherwise you can just use an anchor tag with atribute target="_blank" (this will just open new tab in most browsers).
Preview File
The code for your action method:
//Insert your mime type here, if you know it
var fileType = "application/octet-stream";
if (inline)
{
var showInlineHeader = new System.Net.Mime.ContentDisposition
{
// for example foo.bak
FileName = result.FileName,
// always prompt the user for downloading, set to true if you want
// the browser to try to show the file inline
Inline = inline,
};
Response.AppendHeader("Content-Disposition", showInlineHeader.ToString());
return File(result.Content, fileType);
}
I have added to my method the if statement in order to directly download files that I don't want to be previewed.
Original answer for forcing preview if availabale, taken from Returning a file to View/Download in MVC
I have a scenario where I would need to navigate to my own custom html page, when the any request fails. The issue I am facing is I have a background Image which I need to display with the custom html page.
I have implemented the code as follows:
CustomHtmlDoc = "<html><head></head><body background=\"{0}\"; oncontextmenu='return false;'><br><br></br></br><hr><h4 style='font-family:Footlight MT Light;color:red;font-size:20px;'>" + "ErrorMessage" + "</h4><h4 style='font-family:Footlight MT Light;color:red;font-size:25px;'>Please Verify the Configured URL from Dashboard Configuration</h4> <hr></body></html>";
string CustomHtmlDocument = string.Format(CustomHtmlDoc,AppDomain.CurrentDomain.BaseDirectory + "AdministrationUIBrowser\\AdministrationUIBrowserFactory\\ErrorBackground.png");
WebBrowserControlView.DocumentText = CustomHtmlDocument;
I am able to get the error page as background when I try to run the scenario locally. But at the deployed end, I am just getting blank screen with only content without any background Image. Mine is a WPF application.
The DocumentText implementation in Windows Forms does not implement IMoniker and the loaded document will have a base address of about:blank, thus your page cannot find the background image.
You can use a base element to specify the base location for relative urls, or implement a url moniker. There is a sample on implementing a url moniker at http://www.codeproject.com/KB/miscctrl/csEXWB.aspx. Search LoadHtmlIntoBrowser(string html, string sBaseUrl) on the page.
Maybe you can use a Base64 encoded image. Check this service out. i've tested it and it works like a charm.
Hope it helps.
try 100% sure
(Image current folder)
this.webBrowser1.DocumentText =
#"<b>This is an image:</b> <img src='" +
System.IO.Path.GetDirectoryName(Application.ExecutablePath)
+"/ErrorBackground.png'>";
i am wondering if there is a way to make a direct download link for image ?
When i do something like this:
It opens the image in the browser or in new tab. I want when user click on that link to download the image instantly. Is there a way to do this with HTML/CSS or with ASP.NET MVC 3 ?
My page is something like tumblr blog with several images on the main page and "Download HQ" button next to each.
Add HTTP Header:
Content-Disposition: attachment; filename=<file name.ext>
Where is the filename you want to appear in SaveAs dialog (like finances.xls or mortgage.pdf) - without < and > symbols.
Heres an example of this in MVC framework:
public ActionResult Download()
{
var document = ...
var cd = new System.Net.Mime.ContentDisposition
{
// for example foo.bak
FileName = document.FileName,
// always prompt the user for downloading, set to true if you want
// the browser to try to show the file inline
Inline = false,
};
Response.AppendHeader("Content-Disposition", cd.ToString());
return File(document.Data, document.ContentType);
}
You will need server side scripting to make the link downloadable, you need to set the header to
Content-Disposition:attachment;filename=some.jpg
And then read the content of the image and flush it to response object.
here is an example for asp.net
Example