Download Image In Current Browser Window Like Google Chrome

Question

With the help of Alvaro Montoro: Here is my Javascript function:

 function imageloadingdown() {
        var url = window.location.href;
        var hiddenIFrameId = 'hiddenDownloader';
        var iframe = document.getElementById(hiddenIFrameId);
        if (iframe === null) {
            iframe = document.createElement('iframe');
            iframe.id = hiddenIFrameId;
            iframe.style.display = 'none';
            document.body.appendChild(iframe);
        }
        iframe.src = url;
    }

Here is my Html code:

 <table>
   <tr data-report_id="5">
    <td>

        <iframe id="hiddenDownloader"/>
    <td>
</tr>
        </table>

Now i have no server side code: Here is the Output: enter image description here

It appends the output in the current page,but i want to download it like google chrome does,as shown in figure below.Kindly help me out.

enter image description here

You could try something like this: http://www.codeproject.com/Articles/55488/File-Download-Using-JavaScript. And have you checked the suggested solutions for similar problems: http://stackoverflow.com/questions/6668776/download-file-through-an-ajax-call-php or http://stackoverflow.com/questions/15092984/how-to-download-a-file-from-a-wcf-service-stream — Alvaro Montoro, Sep 29 '14 at 15:42
@AlvaroMontoro...Thanks,but it is not downloading the image like the image attached,kindly help me, how to do that. — Muhammad Ali, Sep 29 '14 at 15:50
If you don't know the answer,then atleast don't vote down my question — Muhammad Ali, Sep 30 '14 at 12:35
1) I didn't vote down your question. 2) I do have work to do. 3) I gave you 3 links with questions similar to yours (solved!). 4) I don't know the answer directly; but if I work on it I'd probably find it, and it would definitely be a mix of the links I posted previously. 5) What have you tried? So far it looks like you did nothing but ask on StackOverflow and wait for someone to work for free for you. — Alvaro Montoro, Sep 30 '14 at 12:51
@AlvaroMontoro...i did not mention you,that you have down vote me.....i think it little bit misunderstanding — Muhammad Ali, Sep 30 '14 at 13:59

score 0 · Answer 1 · edited May 23 '17 at 10:33

AJAX is not for downloading files. There are multiple options for achieving what you want to do:

Pop up a window with the link to the file in the address (or use window.location. Source: https://stackoverflow.com/a/6668806/3695983).
Have a hidden iframe and change the source to the link of the file you want to download (source: https://stackoverflow.com/a/22455488/3695983).
Create a form and send the information to get the file (instead of using AJAX. Source: https://stackoverflow.com/a/13322848/3695983).

Consider adding these headers to the page that returns the file (source: https://stackoverflow.com/a/9858790/3695983):

Content-Type:'application/force-download'
Content-Disposition:'attachment; filename=the_filename'

That in your case would probably be something like this (I have not tested it, you'll have to do it):

System.Web.HttpContext.Current.Response.ContentType = "application/force-download;";
System.Web.HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment; filename="+ fileInfo.Name);

You can read more about these solutions on the links:

Download file through an ajax call php (I know it's PHP, but the solution applies to any language)
how to force download dialog for a text file on the server?
starting file download with JavaScript

With all the information above you should be more than able to fix the problem. Good luck with the development!

score 0 · Accepted Answer · answered Oct 02 '14 at 10:58

In .aspx your code should be as follows:

 <asp:Button ID="btnDownload" runat="server" Text="Submit"  Style="display: none"  OnClick="btnDownload_Click"/>

In .cs,your code is as follows:

protected void DownloadFile(string fileName)        {

                fileName = hdnFileNameDms.Value;
                string practiceCode = Profile.PracticeCode;
                // string filepath = HttpContext.Current.Server.MapPath(@"~/WEBEHR/DMS/Documents/" + practiceCode + "/" + fileName);
                string filepath = hdnFilePath.Value;
                FileInfo fileinfo = new FileInfo(filepath);

                string webfile = String.Empty;
                string[] stringSeparators = new string[] { "WEBEHR", "webehr" };
                string[] fileurl = filepath.Split(stringSeparators, StringSplitOptions.RemoveEmptyEntries);
                var url = HttpContext.Current.Request.Url.ToString();
                string[] weburls = url.Split(stringSeparators, StringSplitOptions.RemoveEmptyEntries);
                if (fileurl.Length > 1 && weburls.Length > 1)
                {
                    webfile = weburls[0] + "webehr" + fileurl[1];
                }


                if (Request.UserAgent.ToLower().Contains("iphone") || Request.UserAgent.ToLower().Contains("ipad") || Request.UserAgent.ToLower().Contains("mobile"))
                {
                    IpadResponseHelperDMS.Redirect(webfile, "_blank", "menubar=0,width=100,height=100");
                    return;
                }
                Response.ContentType = ReturnExtension(fileinfo.Extension.ToLower());
                Response.AddHeader("Content-Disposition", "attachment; filename=" + fileName.Replace(",", ""));
                Response.AddHeader("Content-Length", fileinfo.Length.ToString());
                Response.BinaryWrite(File.ReadAllBytes(filepath));
                Response.End();
            }

Download Image In Current Browser Window Like Google Chrome

2 Answers2