Link to home
Create AccountLog in
Avatar of Mark Klein
Mark KleinFlag for United States of America

asked on

Preview images before database load

My application needs to allow users to load an image into a SQL Server db. I want to give the user the opportunity to preview the image, and perhaps rotate it, before storage.  With the usual controls I capture the image, but have no place to put it for the preview and rotate operations. The image load control captures the file name without the local path, so I don't know how to work with the image on the local machine.  My hosting service (goDaddy) doesn't make it easy to create a writable temp directory for temp storage. I could write it to Sql Server and then preview, perhaps to a temp table, but that seems to defeat the purpose of preview before load.  It's my second best solution.

What I would really like to do is save the image file in memory, manipulate it (rotate it) in memory, and then store in its proper db home.  How do I do that?  

Below is the code-behind I'm using now to collect and manipulate the image, which works on my local machine but not on the web:
  Protected Sub displayImageButton_Click(sender As Object, e As System.EventArgs) Handles displayImageButton.Click
        displayImageButton.Visible = False
        EquipmentImage.Visible = True
        ImageDescriptionTextBox.Visible = True
        ImageTitleTextBox.Visible = True
        LoadFileButton.Visible = True
        continueButton.Visible = True
        btnClearImageAdd.Visible = True
        btnRetSellerCntrl.Visible = False
        UploadStatusLabel.Visible = True

        'now that the controls are visible, start working
        'this code collects the image file from the local file system

        Dim fileOK As Boolean = False
        If ImageFileUpload.HasFile Then
            'check there exists an uploaded file and it is of proper type
            Dim fileExtension As String
            fileExtension = System.IO.Path. _
                GetExtension(ImageFileUpload.FileName).ToLower()
            Dim allowedExtensions As String() = _
                {".jpg", ".jpeg", ".png", ".gif", ".pdf"}
            For i As Integer = 0 To allowedExtensions.Length - 1
                If fileExtension = allowedExtensions(i) Then
                    fileOK = True
                End If
            Next
            Session("fileType") = fileExtension

            If fileOK Then
                'display capture status to user
                UploadStatusLabel.Visible = True
                Try
                    UploadStatusLabel.Text = "File captured"
                Catch ex As Exception
                    UploadStatusLabel.Text = "File could not be captured."
                End Try
            Else
                UploadStatusLabel.Text = "Cannot accept files of this type."
            End If

            Dim fileName As String = ImageFileUpload.PostedFile.FileName
            Dim imageType = ImageFileUpload.PostedFile.ContentType
            Session("imageType") = imageType
            Session("filename") = fileName

            'get the length of the newly captured file
            Dim intLength As Integer = Convert.ToInt32(ImageFileUpload.PostedFile.InputStream.Length)
            Session("length") = intLength

            'show image for confirmation
            Dim path As String = Server.MapPath("~/uploadedimages/") + Session("FileName")
            Session("tempfilePath") = path
            ImageFileUpload.SaveAs(path)
            EquipmentImage.ImageUrl = "~/uploadedimages/" & Session("FileName")

            'allow user to rotate image before loading into db by showing the Rotate button
            btnRotateImage.Visible = True

        End If
    End Sub

Open in new window


And here is my working code to load the previewed image into the db:
   Protected Sub LoadFileButton_Click(sender As Object, e As System.EventArgs) Handles LoadFileButton.Click
        DBSaveLbl.Visible = True

        'collect the necessary input parameters
        Dim imageTitle As String = ImageTitleTextBox.Text
        Session("imageTitle") = imageTitle
        Dim imageDescription As String = ImageDescriptionTextBox.Text
        Session("imageDescription") = imageDescription

        Dim equipmentId As Integer = Session("keyID")
        Dim intLength As Integer = Session("length")
        Dim imageUploadDate As DateTime = DateTime.Now
        Dim filename As String = Session("filename")
        Dim imageType As String = Session("imageType")

        'create the byte array of length equal to file size to store the file/image
        'use the inputStream.Read method to load the image into the array
        'ImageFileUpload.PostedFile.InputStream.Read(arrContent, 0, intLength)

        Dim tempFilePath = Session("tempFilePath")
        Dim fi As FileInfo = New FileInfo(tempFilePath)

        'the Preview button (displayImageButton) forces user to call up the image
        'because this Load button doesn't show until Preview is clicked
        'the image may also have been rotated, but it is still back in the temp directory on the server

        'set up the ByteArray where the image data will go
        Dim arrContent As Byte()
        ReDim arrContent(intLength)

        'now we call the function to convert it to a byte array, before loading into Sql Server db
        Dim ImageToConvert As System.Drawing.Image = System.Drawing.Image.FromFile(tempFilePath)

        Dim Ret As Byte()

        Try
            Using ms As New MemoryStream()
                ImageToConvert.Save(ms, ImageFormat.Jpeg)
                Ret = ms.ToArray()
            End Using
        Catch generatedExceptionName As Exception
            Throw
        End Try

        arrContent = Ret
        Dim strImageType As String = Session("filetype")

        'call function to actually do the work
        If Doc2SQLServer.ImagesIntoDB(equipmentId, imageDescription, arrContent, imageTitle, imageUploadDate, filename, strImageType, intLength) = True Then

            'set up messages to tell user if file was successfully uploaded
            DBSaveLbl.Visible = True
            DBSaveLbl.Text = "Image uploaded successfully."
        Else
            DBSaveLbl.Text = "An error occured while uploading Image... Please try again."
        End If
    End Sub

Open in new window

Avatar of Easwaran Paramasivam
Easwaran Paramasivam
Flag of India image

ASKER CERTIFIED SOLUTION
Avatar of Mark Klein
Mark Klein
Flag of United States of America image

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
Avatar of Mark Klein

ASKER

Had to do this myself