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
Related
I am currently developing a website that will dynamically load the page content using ajax triggered by hash changes.
The code looks like this
$("*").delegate("a", "click", function () {
// Trigger Hash Change
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function () {
let newHash = window.location.hash.substring(1);
$("#main-content").load(newHash + " #ajax-content", function (responseTxt, statusTxt, xhr) {
}).hide().fadeIn();
});
Basically what I am working on now is making the URL look "Pretty", I have modified the .htaccess file to remove the .html extension
So a URL that looks like this
www.example.com/about.html
will become this
www.example.com/about
If I navigate the index (home) "www.example.com" page of the website and then navigate from there to the about page, the URL looks fine. "www.example.com#about" since the server does not display the "index" in the URL.
However, if I navigate straight to the about page like this www.example.com/about, then from the about page to another page, for example, the contact page. I get a URL that looks like this www.example.com/about#contact. When it should look like this www.example.com#contact.
My question is what is the best way to handle this? should I use jquery to redirect all to the index page and then add the hash to load the correct content? or is there some way I can not display the unnecessary part of the URL?
I hope my question was clear, I'm new to the server-side stuff involving the .htaccess file. FOr the ajax stuff I was following this tutorial from CSS tricks
https://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/
You can use history.pushState
window.history.pushState("object or string", "Title", "/new-url");
The url will be www.example.com/new-url
in fact you can get history.state after use this method.
console.log(window.history.state)
output should be "object or string"
You can see the docs here.
Remember to use / to override the entire path.
To do what i think that you want, you can just override the url to / and set the hash.
This is probably not the best way to do this, but I have managed to redirect any page to the home page and then replace the / with the hash value so that the site wont end up wit "messy" URLs.
if(window.location.pathname != "/home.html")
{
window.location.replace("home.html" + window.location.pathname.replace("/", "#"));
}
what happens id the user navigates to "*www.example.com/about*" they will actually be sent to the homepage with the #about.html. So the never end up like this "*www.example.com/about#about*"
so I have this problem, Im trying to build a website in which people can give out links which I will then analyze using request-promise.js (so on the server side) . This analysis will try to find embed videos in the given link. If present I want to make that emebed video appear in an iframe on my current page.
So for now Ive managed to get the embed the video, and render it in an EJS template variable , but this means that I have to use res.render('page', variables) and from my understanding that means reloading the page.
What I want to know is if there is a way to do that without reloading the page ?
(my goal is to make the found video appear in a bootstrap modal div that appears after people gave the link and clicked on my upload button that trigers the scrapping of the given link)
Thanks for your help
Pardon me if my question is unclear
You can use an XMLHttpRequest to get the data from the server asynchronously and display/store them on the page without reloading the whole page.
var url = '/get-embed-video/'+link;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState === 4) {
// here get the response from the server
// and display your data
}
}
xmlHttp.open("GET", url, true); // false for synchronous request
xmlHttp.send(null);
I am using CKEditor in a web application in ASP.NET WebPages (Razor).
I spent a number of days trying to figure out how to make and integrate a basic file manager to support uploading images to CKEditor. The documentation in this area is next to useless. Nothing addressed the WebPages environment. Lots of PHP and WebForms and MVC, but nothing specifically for WebPages.
I finally figured out how to do it and am sharing it here.
CK Editor has an attribute that can be added to the .Replace which tells CKEditor to add an "Upload" tab (that had a built-in file browser) to the Image Properties panel:
CKEDITOR.replace('editor1'
, {
filebrowserImageUploadUrl: 'imageUpload2'
}
);
where "imageUpload2" was the name of the cshtml file (imageUpload2.cshtml) that contained the upload logic. Adding that filebrowserImageUploadUrl caused the CKEditor image properties panel to be modified to display (in the newly added "Upload" menu tab) a "Browse" button and a "Send to Server" button.
The "Browse" button activates CKEditor's Built-in file browser patterned after the html input filetype "file"; the "Send To Server" button executes the file manager you coded (see below).
The procedure would be for the user to:
click on the Insert Image icon in the CKEditor menu
Click on the "Upload" tab in the image properties dialog
Click on the "Browse" button to browse folders on the client machine and select ("Open") the desired image file
Click on the "Send to Server" button to execute the file manager's code (imageUpload2.cshtml), saving the image file to the folder specified in the cshtml file and passing the url of the file back to CKEditor.
The code in the file manager is minimal - no bells or whistles:
#{
Layout = null;
var context=HttpContext.Current;
HttpPostedFile uploads = context.Request.Files["upload"];
//get full filename
string file = System.IO.Path.GetFileName(uploads.FileName);
//get extension (including the period)
string ext = System.IO.Path.GetExtension(uploads.FileName);
//CKEditorFuncNum is passed in from the image propoerties panel in CKEditor
string CKEditorFuncNum = context.Request["CKEditorFuncNum"];
//use whatever folder name you prefer - make sure it has read/write permissions on the server
string url = Href("~/imageUploads/" + file);
var message = " .jpg .jpeg .gif .png ".Contains(ext.ToLower())?"":ext+" is invalid file type";
//Save file if it is one of the allowable extensions
if(String.IsNullOrEmpty(message))
{
uploads.SaveAs(context.Server.MapPath(".") + url );
}
//create return javascript to CKEditor (must have <script></script> tags)
var responseFormat = "<script>window.parent.CKEDITOR.tools.callFunction({0}, \"{1}\", \"{2}\");</script>";
var responseText = String.Format(responseFormat, CKEditorFuncNum, url, message);
//send script back to CKEditor image properties popup and close this page
context.Response.Write(responseText);
context.Response.End();
}
I hope this saves someone else the time I wasted trying to figure out what worked.
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'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.