How to save and retrieve images using vb.net

Lately I have only been just talking about web development stuff. Php, jquery, and html5 to be exact.
Only this time that I’m going to write something on vb.net again.
What were going to do this time is to create an simple application that can save and retrieve images from a specific folder.

 

Requirements

  • Visual Studio
  • Wampserver

 

Procedure

First we have to create the table that were going to work with. Its up to you to build the database where you’re going to place this table.

CREATE TABLE IF NOT EXISTS `vbnetimages` (
  `item_name` varchar(150) NOT NULL,
  `filename` varchar(200) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Next, we build the interface that will be used by the user to upload images.

image

The image explains it all. You just have to drag these things to the canvas:

  • Label – description
  • Textbox – container for the original file path
  • Button – saves the filename to the database
  • Open File Dialog Box – for browsing the images to be uploaded.

Before we proceed, I think it would be better to explain the scenario:
First the user clicks on the textbox, which then opens up the open file dialog box. The user browses for an image then selects it. The textbox will be filled with the file path for that selected image. After the user has decided that this will be the image, he then clicks on the save button to transfer the selected image to a predefined location.

Moving on.

First, declare the global variables that will be used throughout this simple application

Dim MoveLocation As String
Dim TransferPath = "C:\images\"
Dim imgAdres As String
Dim fileName

Double click on the textbox then change the event to ‘click’. The following code goes inside of that click event.

 OpenFileDialog1.ShowDialog()

 imgAdres = OpenFileDialog1.FileName
 fileName = System.IO.Path.GetFileName(imgAdres)
TextBox1.Text = imgAdres

Here’s a breakdown of the code from the first line to the 4th:

  1. Calls the Open File Dialog Box. This box allows you to browse for files in any available location in your computer.
  2. Assign the full path of the image to a variable called imgAddress. The full path of the image will look something like this: c:\wamp\images\abc.gif
  3. Assign the image file name to a variable called fileName. This time we used a system method called GetFileName. Which requires one argument and that is the file path. Calling this method yields a filename like: abc.gif
  4. As a visual representation, we just assigned the file path to the value of the textbox.

 

Next, double click on the save button and use the following codes:

 MoveLocation = TransferPath + fileName

        If System.IO.File.Exists(imgAdres) = True Then
            If System.IO.File.Exists(MoveLocation) = False Then
                System.IO.File.Move(imgAdres, MoveLocation)
                AutosizeImage(MoveLocation, PictureBox1)

            End If
        End If

Here’s a breakdown:

  1. we put the transfer path and the filename together.
  2. check if the file really exist in the address that we have specified. We stored that address in the variable imgAdres that’s why we used it as the argument.
  3. check if the file already exist in the folder where we are going to move it.
  4. If it does not already exist then it won’t be move, if it does not already exist, then we move it.
  5. Finally, we called the AutoSizeImage function. Which you can find in the link below. What it does is to resize an image to fit in a picturebox. The function only needs 2 arguments, the actual location of the image, and the picturebox where you want to display the image.

http://dotnet-snippets.com/dns/vbnet-resize-image-to-fit-in-picturebox-SID213.aspx

The final output would look something like this:

image

 

Conclusion
You have just learned how to transfer a file to a specific folder in your system. And how to use the open file dialog box to browse for files.

Yes this tutorial is incomplete because I didn’t show you how to save and retrieve the image location using the table that we created earlier. And that is why I’m going to leave that as a homework for you.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: