Develop Reference

Disable auto download of iframe content on iOS Safari

I have a modal that displays a PDF with two option, one to print and one to download.
The download option is using a blob with content-type: application/octet-stream.
The print option is using a blob with content-type: application/pdf.
The download button works perfectly, but when I open the modal in Safari on iOS, the prompt to download is automatically showing and the file is downloaded automatically. It is working on desktop devices and in chrome.
const downloadBlob = new Blob([int8Array], { type: 'data:application/octet-stream;' });
const printBlob = new Blob([int8Array], { type: 'application/pdf;' });
const downloadFileURL = URL.createObjectURL(downloadBlob);
const printFileURL = URL.createObjectURL(printBlob);
When I remove the src attribute from the iframe, the auto download prompt doesn't show. Any ideas how to resolve this?
{fileType === 'application/pdf' ? (
<>
<div id="wrapperDiv" ref={wrapperRef}></div>
<iframe id="documentObject" src={`${fileSrc}#view=fitH`} title={fileName} style={{ display: 'none' }}>
This browser does not support this document type. Please download the document to view it:
</iframe>
</>
Print button:
const element: Window = window.frames;
element[0].focus();
element[0].print();

For printing use:
printPDF(pdfUrl)
{
var w = window.open(pdfUrl);
w.print();
}
For downloading:
downloadPDF(pdfUrl)
{
var anchor = document.createElement('a');
anchor.href = pdfUrl;
anchor.target = '_blank';
anchor.download = "filename.pdf";
anchor.click();
}
Browser support: http://caniuse.com/#feat=download
If the download attribute is not supported, it should fallback to just opening the PDF in a new tab.

Fire javascript function after download asp.net

I have a method in code behind which downloads a file from server to the client. And after that I want to run a javascript function. But it does not work. It works only if the javascript function is in the button click event.
string imageFilePath = Server.MapPath("~/TireLabel.png");
Bitmap bitmap = (Bitmap)Image.FromFile(imageFilePath);//load the image file
Graphics g = Graphics.FromImage(bitmap);
string text = "215/45 R 20";
g.DrawString(text, drawFontArial26Bold, drawBrush, new RectangleF(x, y, width, height), drawFormatCenter);
text = "013";
g.DrawString(text, drawFontArial20Regular, drawBrush, new RectangleF(70, 45, 0, 0), drawFormatRight);
text = "1";
g.DrawString(text, drawFontArial20Regular, drawBrush, new RectangleF(100F, 80, 0, 0), drawFormatRight);
text = "2";
g.DrawString(text, drawFontArial20Regular, drawBrush, new RectangleF(240, 80, 0, 0), drawFormatRight);
Bitmap bit = new Bitmap(bitmap);
bit.Save(Server.MapPath("~/TireLabel.bmp"), System.Drawing.Imaging.ImageFormat.Bmp);
Response.ContentType = "application/jpeg";
Response.AddHeader("content-disposition", "attachment; filename=" + Server.MapPath("~/TireLabel") + ".bmp");
Response.WriteFile(Server.MapPath("~/TireLabel.bmp" + ""));
ClientScript.RegisterStartupScript(GetType(), "key", "runPrint();", true); // THIS does not fire.
//Javascript function
function runPrint() {
var objShell = new ActiveXObject("WScript.Shell");
var strCommand = "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe";
//var strCommand = "C:\\PrintLabel.exe";
objShell.Exec(strCommand);
//objShell.ShellExecute(strCommand, "","","open","1");
}
How I can make the javascript fire.

This is a hard problem, because the browser normally doesn't tell you when a download is finished. Have a look at jQuery.filedownload that allows you to download files through AJAX.
-- Edit --
Here is the code to attach jQuery filedownload to all links with the class "fileDownload":
$(document).on('click', 'a.fileDownload', function() {
$.fileDownload($(this).prop('href'))
.done(function () { alert('File download a success!'); })
.fail(function () { alert('File download failed!'); });
return false; //this is critical to stop the click event which will trigger a normal file download
});
This assumes that the URL to the controller action is given in the href attribute of the link, and this action returns a file with return File().
The response must also contain a cookie /fileDownload to inform jquery.fileDownload that a successful file download has occured.
//jquery.fileDownload uses this cookie to determine that a file download has completed successfully
response.AppendCookie(new HttpCookie("fileDownload", "true") {
Path = "/"
});
-- Edit 2 - Changed source to show simpler example with less dependendies. Use the .done promise to trigger an action after the download was done

set a Blob as the "src" of an iframe

The following code work perfectly in Chrome
<script>
function myFunction() {
var blob = new Blob(['<a id="a"><b id="b">hey!</b></a>'], {type : 'text/html'});
var newurl = window.URL.createObjectURL(blob);
document.getElementById("myFrame").src = newurl;
}
</script>
But it is not working with IE. Can some one please tell me what is wrong here.
The iframe "src" also set to the blob as shown below.
<iframe id="myFrame" src="blob:0827B944-D600-410D-8356-96E71F316FE4"></iframe>
Note:
I went on the window.navigator.msSaveOrOpenBlob(newBlob) path as well but no luck so far.

According to http://caniuse.com/#feat=datauri IE 11 has only got partial support for Data URI's. It states support is limited to images and linked resources like CSS or JS, not HTML files.
Non-base64-encoded SVG data URIs need to be uriencoded to work in IE and Firefox as according to this specification.

An example I did for Blob as a source of iFrame and working great with one important CAUTION / WARNING:
const blobContent = new Blob([getIFrameContent()], {type: "text/html"});
var iFrame = document.createElement("iframe");
iFrame.src = URL.createObjectURL(blobContent);
parent.appendChild(iFrame);
iFrame with Blob is not auto redirect protocol, meaning, having <script src="//domain.com/script.js"</script> inside the iframe head or body won't load the JS script at all even on Chrome 61 (current version).
it doesn't know what to do with source "blob" as protocol. this is a BIG warning here.
Solution: This code will solve the issue, it runs mostly for VPAID ads and working for auto-protocol:
function createIFrame(iframeContent) {
let iFrame = document.createElement("iframe");
iFrame.src = "about:blank";
iFrameContainer.innerHTML = ""; // (optional) Totally Clear it if needed
iFrameContainer.appendChild(iFrame);
let iFrameDoc = iFrame.contentWindow && iFrame.contentWindow.document;
if (!iFrameDoc) {
console.log("iFrame security.");
return;
}
iFrameDoc.write(iframeContent);
iFrameDoc.close();
}

I've run into the same problem with IE. However, I've been able to get the download/save as piece working in IE 10+ using filesaver.js.
function onClick(e) {
var data = { x: 42, s: "hello, world", d: new Date() },
fileName = "my-download.json";
var json = JSON.stringify(data),
blob = new Blob([json], {type: "octet/stream"});
saveAs(blob, fileName);
e.preventDefault();
return false;
};
$('#download').click(onClick);
See http://jsfiddle.net/o0wk71n2/ (based on answer by #kol to JavaScript blob filename without link)

Angularjs/Restangular, how to name file blob for download?

For some reason this seems easier in IE than Chrome/FF:
$scope.download = function() {
Restangular.one(myAPI)
.withHttpConfig({responseType: 'blob'}).customGET().then(function(response) {
//IE10 opens save/open dialog with filename.zip
window.navigator.msSaveOrOpenBlob(response, 'filename.zip');
//Chrome/FF downloads a file with random name
var url = (window.URL || window.webkitURL).createObjectURL(response);
window.location.href = url;
});
};
Is there a way to do something similar to how IE10+ works? That is, I can specify a file name/type (will only be zip)?

As soon as you have your object url you can create an anchor and set the download attribute to the filename you want, set the href to the object url, and then just call click
var myBlob = new Blob(["example"],{type:'text/html'})
var blobURL = (window.URL || window.webkitURL).createObjectURL(myBlob);
var anchor = document.createElement("a");
anchor.download = "myfile.txt";
anchor.href = blobURL;
anchor.click();
Download attribute compatibility

Just use https://www.npmjs.com/package/angular-file-saver
Browser Support table can be seen here: https://github.com/eligrey/FileSaver.js/

Standalone CKFinder: how to only select images in file dialog popup?

I'm using CKFinder in combination with CKEditor, but also as standalone file input image popup window. So when someone clicks the "upload"-button, a new popup window appears in which someone could select an image / file / Flash-file to upload.
For the field "avatar" I need to only select image files. It shouldn't be possible to select another filetype. How can I get this working? In the documentation I can't find very helpful information.
In CKEditor it's possible to only select an image or a file from within the CKFinder-popup, but it looks like the same option has been forgotten in the standalone version of CKFinder.
I need to achieve "ckfinder.html?type=Image", but I don't want to modify ckfinder.js because that will affect also other file popup dialogs in which someone should be able to select even images as files.
I'm including CKFinder like in the popup sample:
var finder = new CKFinder();
finder.basePath = '../'; // The path for the installation of CKFinder (default = "/ckfinder/").
finder.selectActionFunction = SetFileField;
finder.popup();
Thanks in advance for your help!

you should try it,
*
LoadImage
is id of button select file,
picUrl
is id of text link
$('#LoadImage').click(function () {
var finder = new CKFinder();
finder.selectActionFunction = function (fileUrl) {
fileUrl = fileUrl.substring(fileUrl.lastIndexOf("/") + 1);
$('#picUrl').val = (fileUrl);
}
selectFileWithCKFinder('picUrl');
})
function selectFileWithCKFinder(elementId) {
CKFinder.popup({
chooseFiles: true,
width: 800,
height: 600,
onInit: function (finder) {
finder.on('files:choose', function (evt) {
var file = evt.data.files.first();
var output = document.getElementById(elementId);
output.value = file.getUrl();
});
finder.on('file:choose:resizedImage', function (evt) {
var output = document.getElementById(elementId);
output.value = evt.data.resizedUrl;
});
}
});
}