Anyone willing to share what needs to be changed in order to store photos on the disk rather than in the db?

Please advise

Shane L. Hackney

---

Shane L. Hackney

Bump....

No one has any help for me on this?

---

Shane L. Hackney

The photo functionality is mostly hanlded through the code in the code directory, custom image user controls and the imagefetch.ashx. My recommendation would be to retain the table for images, but instead of storing the image in the database, store the path to the image instead. That way, all you should need to modify is the upload code and thumb control. Nowhere else in the site should point at the ashx, so if you tweak it, you should be able to change the image functionality in one central place.

Sam

Does anyone have an example of code I would change to have the pictures save to a file rather than to the DB? 

---

Shane L. Hackney

Don't know if it is the same routine as it is in the personal site starterkit. It will give you the idea how it can be done. I decided i wanted to store only the original picture and a thumbnail. All the other size are created on the fly when requested. As the thumbnails will be requested a lot it is better to store them as files.

public static void AddPhoto(int AlbumID, string Caption, byte[] BytesOriginal) {
	using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["Personal"].ConnectionString)) {
		using (SqlCommand command = new SqlCommand("AddPhoto", connection)) {
		command.CommandType = CommandType.StoredProcedure;
                SqlParameter r = command.Parameters.Add("@ReturnValue", SqlDbType.Int);
                r.Direction = ParameterDirection.ReturnValue;
                command.Parameters.Add(new SqlParameter("@AlbumID", AlbumID));
		command.Parameters.Add(new SqlParameter("@Caption", Caption));
//		command.Parameters.Add(new SqlParameter("@BytesOriginal", BytesOriginal));
//		command.Parameters.Add(new SqlParameter("@BytesFull", ResizeImageFile(BytesOriginal, 600)));
//		command.Parameters.Add(new SqlParameter("@BytesPoster", ResizeImageFile(BytesOriginal, 198)));
//		command.Parameters.Add(new SqlParameter("@BytesThumb", ResizeImageFile(BytesOriginal, 100)));
		connection.Open();
		command.ExecuteNonQuery();
                int PhotoID = (int) command.Parameters["@ReturnValue"].Value;
                string path = HttpContext.Current.Server.MapPath("~/Albums/Album_" + AlbumID.ToString() + "/" + PhotoID.ToString() + ".jpg");
                FileStream f = new FileStream(path, FileMode.Create);
                f.Write(BytesOriginal, 0, BytesOriginal.Length);
                f.Close();
                AddThumbnail(AlbumID, PhotoID, BytesOriginal);
            }
		}

I use the database for ordering and grouping. I also added a @Returnvalue. The stored procedure will return the @@IDENTITY of the new record. With that i can assemble a path. For me it was an Album+Number as a subdirectory in "albums". The returnvalue is the ID of the file. The addThumbnail function is:

    public static void AddThumbnail(int AlbumID, int PhotoID, byte[] BytesOriginal) {
        string path = HttpContext.Current.Server.MapPath("~/Albums/Album_" + AlbumID.ToString() + "/ThumbNails/" + PhotoID.ToString() + ".jpg");
        FileStream f = new FileStream(path, FileMode.Create);
        byte[] ThumbNail = ResizeImageFile(BytesOriginal, 100);
        f.Write(ThumbNail, 0, ThumbNail.Length);
        f.Close();
    }

I hope this helps.

This is not working for me.  No one out there has converted the club site to store images outside of the DB?  If not does anyone have a tutorial on how someone would do this from scratch?  I want to know how to upload a picture to a folder while posting information as to the location of the file in the DB.  How to write the query and how to code it to pull the location form the DB and present the image on a page from a query?  Make sense.  This has been done forever, I just am new to development and I am trying to figure this out with no luck...  Any words of wisdom out there?

---

Shane L. Hackney

Did you try the code i posted? It will store the picture in a file on disk. You do have to give the IISuser permission to create files and subdirectories. It should work fine with only a little code change compared to the original.

Some changes have to be made to the stored procedure. You can see in the code which parameters are not used anymore. Those have to be removed from the stored procedure parameter list.

At the end of the stored procedure you have to return the last identity of the newly created record.

You can do that with

return @@IDENTITY

If you need help with this, just ask. But please be very specific on what part. Sometimes best to do things step by step.

 

How about also adding a way to have the Photo's be pre-rendered so you dont have to refresh the enitre page each time the next button is clicked.

 

---

AngeloA

Ok, I have reviewed this code, and I assume it was written in C#.  I converted it to VB, which is what I am using and I am trying to make sense of it.  The club site is slightly different an that is why I think I am confused.  The club site does not use store procedures as a part of the uploading of images.  From what I can see everything is in the ImageHandling.vb file (as it relates to uploading and storing the file).  Below is the code.  What lines to I begin to look at changing to save the image to the file folder I specify and store the location in the location in the DB.  Thanks for the help...

Imports Microsoft.VisualBasic

Imports System.Data.SqlClient

 

Public Class ImageUtils

 

    'Todo: Change this to use a database query through the middle tier

 

    Public Shared Function uploadImage(ByVal title As String, ByVal albumid As Integer, ByVal data As IO.Stream) As Integer

        Dim origImageData(CInt(data.Length - 1)) As Byte

        data.Read(origImageData, 0, CInt(data.Length))

 

        Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("ClubSiteDB").ConnectionString)

        Dim command As New SqlCommand("INSERT INTO Images (title, origimage, largeimage, thumbimage, album) VALUES ( @title, @origimage, @largeimage, @thumbimage, @albumid); select SCOPE_IDENTITY()", connection)

 

        Dim param0 As New SqlParameter("@title", System.Data.SqlDbType.VarChar, 50)

        param0.Value = title

        command.Parameters.Add(param0)

 

        Dim param1 As New SqlParameter("@origimage", System.Data.SqlDbType.Image)

        param1.Value = origImageData

        command.Parameters.Add(param1)

 

        Dim param2 As New SqlParameter("@largeimage", System.Data.SqlDbType.Image)

        param2.Value = MakeThumb(origImageData, 350)

        command.Parameters.Add(param2)

 

        Dim param3 As New SqlParameter("@thumbimage", System.Data.SqlDbType.Image)

        param3.Value = MakeThumb(origImageData, 69, 69)

        command.Parameters.Add(param3)

 

        Dim param4 As New SqlParameter("@albumid", System.Data.SqlDbType.Int)

        param4.Value = albumid

        command.Parameters.Add(param4)

 

        connection.Open()

 

        Dim result As Object = command.ExecuteScalar()

        connection.Close()

 

        If Not result Is Nothing Then

            Return CInt(result)

        Else

            Return 0

        End If

    End Function

 

 

    Const sizeThumb As Integer = 69

 

    Public Shared Function MakeThumb(ByVal fullsize As Byte()) As Byte()

        Dim iOriginal, iThumb As System.Drawing.Image

        Dim targetH, targetW As Integer

 

        ' Grab Original Image

        iOriginal = System.Drawing.Image.FromStream(New IO.MemoryStream(fullsize))

        ' Find Height and Width for Thumbnail Image

        If (iOriginal.Height > iOriginal.Width) Then

            targetH = sizeThumb

            targetW = CInt(iOriginal.Width * (sizeThumb / iOriginal.Height))

        Else

            targetW = sizeThumb

            targetH = CInt(iOriginal.Height * (sizeThumb / iOriginal.Width))

        End If

        iThumb = iOriginal.GetThumbnailImage(targetW, targetH, Nothing, System.IntPtr.Zero)

        Dim m As New IO.MemoryStream()

        iThumb.Save(m, System.Drawing.Imaging.ImageFormat.Jpeg)

        Return m.GetBuffer()

    End Function

 

 

    Public Shared Function MakeThumb(ByVal fullsize As Byte(), ByVal newwidth As Integer, ByVal newheight As Integer) As Byte()

        Dim iOriginal, iThumb As System.Drawing.Image

        Dim scaleH, scaleW As Double

        Dim srcRect As Drawing.Rectangle

 

 

        ' Grab Original Image

        iOriginal = System.Drawing.Image.FromStream(New IO.MemoryStream(fullsize))

        ' Find Height and Width for Thumbnail Image

 

        scaleH = iOriginal.Height / newheight

        scaleW = iOriginal.Width / newwidth

        If scaleH = scaleW Then

            srcRect.Width = iOriginal.Width

            srcRect.Height = iOriginal.Height

            srcRect.X = 0

            srcRect.Y = 0

        ElseIf (scaleH) > (scaleW) Then

            srcRect.Width = iOriginal.Width

            srcRect.Height = CInt(newheight * scaleW)

            srcRect.X = 0

            srcRect.Y = CInt((iOriginal.Height - srcRect.Height) / 2)

        Else

            srcRect.Width = CInt(newwidth * scaleH)

            srcRect.Height = iOriginal.Height

            srcRect.X = CInt((iOriginal.Width - srcRect.Width) / 2)

            srcRect.Y = 0

        End If

 

        iThumb = New System.Drawing.Bitmap(newwidth, newheight)

        Dim g As Drawing.Graphics = Drawing.Graphics.FromImage(iThumb)

        g.DrawImage(iOriginal, New Drawing.Rectangle(0, 0, newwidth, newheight), srcRect, Drawing.GraphicsUnit.Pixel)

 

        Dim m As New IO.MemoryStream()

        iThumb.Save(m, System.Drawing.Imaging.ImageFormat.Jpeg)

        Return m.GetBuffer()

    End Function

 

    Public Shared Function MakeThumb(ByVal fullsize As Byte(), ByVal maxwidth As Integer) As Byte()

        Dim iOriginal, iThumb As System.Drawing.Image

        Dim scale As Double

 

        ' Grab Original Image

        iOriginal = System.Drawing.Image.FromStream(New IO.MemoryStream(fullsize))

 

        If iOriginal.Width > maxwidth Then

 

            scale = iOriginal.Width / maxwidth

            Dim newheight As Integer = CInt(iOriginal.Height / scale)

 

            iThumb = New System.Drawing.Bitmap(iOriginal, maxwidth, newheight)

            Dim m As New IO.MemoryStream()

            iThumb.Save(m, System.Drawing.Imaging.ImageFormat.Jpeg)

            Return m.GetBuffer()

        Else

            Return fullsize

        End If

    End Function

 

End Class

 

---

Shane L. Hackney

Bump...

Anyone have any ideas?

---

Shane L. Hackney

Well I can't cross post so I have to keep bumping this string until I get an answer.  I am not sure what I need to change to get the club site to save photos to the file system rather than to the db.  I know how do it in simplistic terms.  I did it in a page I added on to list supported links and have it where I can upload their logo to the file system and retrive it from on a different page.  This is the sub I used to do it;

 

    Protected Sub FormView1_ItemUpdated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewUpdatedEventArgs)
        Response.Redirect("links_list.aspx")
    End Sub
    
    Protected Sub FormView1_ItemInserted(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewInsertedEventArgs)
        Dim FileUpload1 As FileUpload = CType(FormView1.FindControl("FileUpload1"), FileUpload)
        Dim nameTextBox As TextBox = CType(FormView1.FindControl("nameTextBox"), TextBox)
        Dim webTextBox As TextBox = CType(FormView1.FindControl("webTextBox"), TextBox)
        Dim descTextBox As TextBox = CType(FormView1.FindControl("descTextBox"), TextBox)
        FileUpload1.SaveAs(Server.MapPath("~\uploads\photos\" & FileUpload1.FileName.ToString()))
        SqlDataSource1.InsertParameters.Add("logo", FileUpload1.FileName.ToString())
        SqlDataSource1.InsertParameters.Add("name", nameTextBox.Text.ToString())
        SqlDataSource1.InsertParameters.Add("website", webTextBox.Text.ToString())
        SqlDataSource1.InsertParameters.Add("description", descTextBox.Text.ToString())
        SqlDataSource1.InsertCommand = "INSERT INTO Links(logo, name, website, description) VALUES (@logo, @name, @website, @description)"
        SqlDataSource1.Insert()
        Response.Redirect("links_list.aspx")
    End Sub

 What throws me of in the code for the clubsite is that it is complicated with the routines that create the thumbnails.  I need help trying to figure this out.  Any advise?

---

Shane L. Hackney

Hiya Shane, it's not something you can fix by changing the code in just one page, maybe that's why no answers so far. This is really crude, but should give you an idea - 

'instead of putting images in db, put null in for param1,2&3
        param3.Value = DBNull
'then after the database insert is done, you get back the return value which is going to be your filename

Dim result As Object = command.ExecuteScalar()
connection.Close()
Dim filename As String
If Not result Is Nothing Then
            filename=result.ToString()

         'now get the images into the file system
         'the original is already in a byte array, get the other two

            Dim foo as Byte() = MakeThumb(origImageData, 69, 69)
            Dim bar as Byte() = MakeThumb(origImageData, 350)

            'now pass them to a method to save to disk which you can write

            SaveFile(foo, filename & ".thumb.jpg")
            SaveFile(bar, filename & ".large.jpg")
            SaveFile(origImageData, filename & ".full.jpg")
            Return CInt(result)
Else ' some db error
            Return 0
End If

The savefile sub you should find easy, basically like Khun Jean said earlier in the thread

public shared sub savefile(BytesOriginal as byte(), filename as string)
                dim path as string = HttpContext.Current.Server.MapPath("~/somefolder/" & filename);
                dim f as Filestream = new FileStream(path, FileMode.Create);
                f.Write(BytesOriginal, 0, BytesOriginal.Length);
                f.Close();
end sub

---

Mark Bracewell
Forums Starter Kit

Thanks, this all makes sense.  I have tried putting it together.  I currently have one question.  When I try to declare each of the parameters (param3.Value = DBNull), I get error;  'DBnull' is a type and not an expression.  Am I suppose to use DBnull or something else like Nothing?

---

Shane L. Hackney

My bad, I just tossed DBNull in there. Inserting a null into the db wasn't going to fly anyhow since the origimage column in the db doesn't allow nulls. A more tidy way to go would be this...

first you need to go to server explorer, to the images table in the club db, right click and open table definition. Change the origimage column to allow nulls (or if you're really wanting to toss the images in the db, you could drop the 3 image columns completely, either way works with the following code).

Then change the insert part of the code to

        Dim command As New SqlCommand("INSERT INTO Images (title, album) VALUES ( @title, @albumid); select SCOPE_IDENTITY()", connection)

        Dim param0 As New SqlParameter("@title", System.Data.SqlDbType.VarChar, 50)
        param0.Value = title
        command.Parameters.Add(param0)

        Dim param1 As New SqlParameter("@albumid", System.Data.SqlDbType.Int)
        param1.Value = albumid
        command.Parameters.Add(param1)

Basically just get rid of those 3 image params altogether.

Sorry about that.

---

Mark Bracewell
Forums Starter Kit

MrLunch, you have been a great help.  Works like a charm.  Now that I have the upload complete, what needs to be done to the imagefetch.ashx file to know what images to pull?

---

Shane L. Hackney

Excellent thread, I am still debating if I really want to remove the images from the DB. I suppose in my case it is not as critical as I am on my own server and not so worried about size limitations.

How about preloading the images into a control so when you are clicking next_image you do not need to refresh the entire page.

 

---

AngeloA

I am open to anything, I just need to figure out how to do something.  I am still trying to build my knowledge, so I am limited to my current abilities...

---

Shane L. Hackney

hackneys:

MrLunch, you have been a great help.  Works like a charm.  Now that I have the upload complete, what needs to be done to the imagefetch.ashx file to know what images to pull?

You've got a few rhings to deal with besides reading rhe file off disk - like deleting the disk files when you hit that 'remove image' button. That should be pretty easy to figure out.
Here's how to send the file from disk - TransmitFile() rocks, you didn't want to stream a byte array anyhow :)
Note I didn't test this code! Also note there's no error handling (sorely missing from the starter kit overall).

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim response As Web.HttpResponse = context.Response
        Dim request As Web.HttpRequest = context.Request
        Dim filename As String
        ' cast from string to int to string here to prevent
        ' hack, since we are going to use 'id' as part of a filename
        Dim id As String = CInt(request.QueryString("ImageID")).ToString()
        Dim size As Integer = CInt(request.QueryString("Size"))
        'static so we don't have to lookup each time
        Static path As String
       
        If String.IsNullOrEmpty(path) Then
            path = HttpContext.Current.Server.MapPath("~/somefolder/")
        EndIf
       
        filename = path
       
        ' figure out the filename
        Select Case size
            Case 0 : filename += id & ".large.jpg"
            Case 1 : filename += id & ".thumb.jpg"
            Case 2 : filename += id & ".full.jpg"
            Case Else : filename += id & ".large.jpg"
        End Select
       
        ' and blammo
        response.ContentType = "image/jpeg"
        response.Cache.SetCacheability(HttpCacheability.Public)
        response.TransmitFile(filename)
        response.End()
       
    End Sub

All that said, I would keep the images in the database for a couple of reasons. Mainly, image files on disc won't scale to multiple web servers, and even if you don't see that happening in your future, your hosting provider might do it, and it's good practice to code for keeps, eh?
If raw speed is the goal, and you don't have a machine with enough memory to cache all the images, then you could leave the images in the db and cache them on disk, like this psuedo-code

request comes in for image 6
try{
   transmitfile(6)
}
catch (notfound) {
   get image 6 from db and write to disk
   write image out
}

when image is deleted from db, also delete any disk cached files

That uses twice the disk space but reduces the db hits and makes the image delivery fast and works for multiple servers too.

---

Mark Bracewell
Forums Starter Kit

aabruzzese:

How about preloading the images into a control so when you are clicking next_image you do not need to refresh the entire page.

I did that with Atlas instead - on a bunch of the places where there is a prev-next or Page 1 2 3 - so that only the part of the page that changes is refreshed. It's drop-dead easy.

I could never get a grip on that preload stuff - javascript makes me want to go wash my hands all the time. :)

---

Mark Bracewell
Forums Starter Kit

As long as we are looking at the imagefetch code - it jumped out at me there's a security problem with it (either version, disk or db). You can point a browser to imagefetch and get any image that is there, regardless of whether it's in a private album or not. So those private albums are really only private on the honor system. Changing 'private' to 'not visible in public list of albums' would be more accurate.

Well, if all the work were already done, what would we do for entertainment? ;-)

---

Mark Bracewell
Forums Starter Kit