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.
- Visual Studio
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.
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.
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:
- Calls the Open File Dialog Box. This box allows you to browse for files in any available location in your computer.
- 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
- 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
- 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:
- we put the transfer path and the filename together.
- 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.
- check if the file already exist in the folder where we are going to move it.
- If it does not already exist then it won’t be move, if it does not already exist, then we move it.
- 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.
The final output would look something like this:
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.