Does anyone have some code on how to create a link that will download an image from your database. I don't need to pull an image in a page I just want an icon that when I click on a link it will bring a pop up that say save as.
I was going to implement this on my grid bellow:
@{
//Created by Yves Guyon Ves 1.0
Page.Title = "Macomb County Michigan";
var db = Database.Open("Classifieds");
var query = "SELECT DISTINCT Name FROM PHOTOTEST ORDER BY NAME";
var names = db.Query(query);
query = "SELECT FileId, Name, Picture, email, Location, Photographer, Comments, show, Namex, Time FROM PhotoTest Inner JOIN Display ON Display.Id = PhotoTest.Show WHERE Location LIKE @0 AND NAME LIKE @1 ORDER BY Time DESC";
var name1 = "%" + Request["name"] + "%";
var location1 = "%" + Request["location"] + "%";
var data = db.Query(query, location1, name1);
var columns = new []{"FileId","Name", "picture","email","Location","Photographer","Comments","Namex", "Time"};
var grid = new WebGrid(data, columnNames: columns, rowsPerPage: 8);
}
<!DOCTYPE html>
<form method="post">
location: <input type="text" name="location" value="@Request["location"]" />
Name: <select name="name">
<option></option>
@foreach(var item in names){
<option @(Request["name"] == item.Name ? " selected=\"selected\"" : "")>@item.Name</option>
}
</select>
<input type="submit"/> <div id="grid">
@grid.GetHtml(
tableStyle : "grid",
alternatingRowStyle : "alternate",
headerStyle : "header",
columns: grid.Columns(
grid.Column("FileId", "ID"),
grid.Column("Name", "Name"),
grid.Column("email", "E-mail"),
grid.Column("Location"),
grid.Column("Photographer"),
grid.Column("Thumbnail", format:@<img src="download4.cshtml?FileId=@item.FileId" alt="" />),
grid.Column("Comments"),
grid.Column(columnName: "Time",
header: "Date Posted",
format: @<text>@item.Time.ToString("D")</text>),
grid.Column(columnName: "DatePosted",
header: "Display Image", format:@<a href="GridNew.cshtml?id=@item.FileId">@item.Namex</a>),
grid.Column( format:@<a href="DeleteGallery.cshtml?id=@item.FileId">Delete</a>)
)
)
</div>
</form>
@section script{
<script type="text/javascript">
$(function(){
$('th a, tfoot a').live('click', function() {
$('form').attr('action', $(this).attr('href')).submit();
return false;
});
});
</script>
}
This will show File Save/Open dialog on the browser. If you want to show the image inline to the browser window, remove the "attachment;" from the content disposition header.
As innological says, you need a "handler", but you do not need to implment IHttpHandler. You can do this with a simple cshtml file, which it appears you are already doing to obtain the thumbnail:
If you want to force the Open/Save dialogue, you should set the ContentType to "application/octet-stream". The sample above assumes that the file name has been passed in the query string eg:
<a href="~/download/?img=@item.Name">Download</a>
and it locates the file in a folder called images. If you pass an ID from a database instead, you obviously need to add code to get the file name and then locate the physical file or stream it from the database if you are storing binary data there.
yguyon
Member
7 Points
23 Posts
Image download link
Jan 26, 2013 09:55 PM|LINK
Does anyone have some code on how to create a link that will download an image from your database. I don't need to pull an image in a page I just want an icon that when I click on a link it will bring a pop up that say save as.
I was going to implement this on my grid bellow:
@{ //Created by Yves Guyon Ves 1.0 Page.Title = "Macomb County Michigan"; var db = Database.Open("Classifieds"); var query = "SELECT DISTINCT Name FROM PHOTOTEST ORDER BY NAME"; var names = db.Query(query); query = "SELECT FileId, Name, Picture, email, Location, Photographer, Comments, show, Namex, Time FROM PhotoTest Inner JOIN Display ON Display.Id = PhotoTest.Show WHERE Location LIKE @0 AND NAME LIKE @1 ORDER BY Time DESC"; var name1 = "%" + Request["name"] + "%"; var location1 = "%" + Request["location"] + "%"; var data = db.Query(query, location1, name1); var columns = new []{"FileId","Name", "picture","email","Location","Photographer","Comments","Namex", "Time"}; var grid = new WebGrid(data, columnNames: columns, rowsPerPage: 8); } <!DOCTYPE html> <form method="post"> location: <input type="text" name="location" value="@Request["location"]" /> Name: <select name="name"> <option></option> @foreach(var item in names){ <option @(Request["name"] == item.Name ? " selected=\"selected\"" : "")>@item.Name</option> } </select> <input type="submit"/> <div id="grid"> @grid.GetHtml( tableStyle : "grid", alternatingRowStyle : "alternate", headerStyle : "header", columns: grid.Columns( grid.Column("FileId", "ID"), grid.Column("Name", "Name"), grid.Column("email", "E-mail"), grid.Column("Location"), grid.Column("Photographer"), grid.Column("Thumbnail", format:@<img src="download4.cshtml?FileId=@item.FileId" alt="" />), grid.Column("Comments"), grid.Column(columnName: "Time", header: "Date Posted", format: @<text>@item.Time.ToString("D")</text>), grid.Column(columnName: "DatePosted", header: "Display Image", format:@<a href="GridNew.cshtml?id=@item.FileId">@item.Namex</a>), grid.Column( format:@<a href="DeleteGallery.cshtml?id=@item.FileId">Delete</a>) ) ) </div> </form> @section script{ <script type="text/javascript"> $(function(){ $('th a, tfoot a').live('click', function() { $('form').attr('action', $(this).attr('href')).submit(); return false; }); }); </script> }innological
Member
142 Points
24 Posts
Re: Image download link
Jan 27, 2013 04:13 AM|LINK
You need to implement IHttpHandler interface to do this.
For e.g. let us assume that you have your images in a database table called images
Images:
Id: Some identifier
Name: MyImage.png (nvarchar(256))
Mime: image/png (nvarchar(32))
Data: Image raw data (varbinary(max))
Response.Clear(); Response.AppendHeader("content-disposition", "attachment; filename=" + imageFileName); Response.ContentLength = imageBinaryData.Length; Response.ContentType = imageMime; Response.Write(imageBinaryData); Response.Flush(); Response.End();This will show File Save/Open dialog on the browser. If you want to show the image inline to the browser window, remove the "attachment;" from the content disposition header.
Once you have the handler registered, you can use a url like http://yourdomain.com/YourHandler.axd?id=yourimageid
to download the image.
DotCastle Team
http://www.dotcastle.com
Note: Please mark this post as ANSWER if it addresses your question/issue
Mikesdotnett...
All-Star
154927 Points
19867 Posts
Moderator
MVP
Re: Image download link
Jan 27, 2013 08:06 AM|LINK
As innological says, you need a "handler", but you do not need to implment IHttpHandler. You can do this with a simple cshtml file, which it appears you are already doing to obtain the thumbnail:
@{ Layout = null; var file = Server.MapPath("~/images/" + Request["img"]); Response.AppendHeader("content-disposition", "attachment; filename=" + Request["img"]); Response.ContentType = "application/octet-steam"; Response.TransmitFile(file); }If you want to force the Open/Save dialogue, you should set the ContentType to "application/octet-stream". The sample above assumes that the file name has been passed in the query string eg:
and it locates the file in a folder called images. If you pass an ID from a database instead, you obviously need to add code to get the file name and then locate the physical file or stream it from the database if you are storing binary data there.
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter