How to save images to a folder with its original name?

Mayank Jani

Hello members,

Greetings of the day....

I am working on a C# WinApp. I am preparing my picture album uploading and viewing app. I have two queries...

1. How to save the image with its original name?

my code line for doing so is... pbImages.Image.Save(@"D:\Images\MyAlbums\Picture.jpg");

obviously, it will save the image with name 'Picture' but the problem is when I save another image it overwrites the first image and gives the same name 'Picture' to the second image.

Is there any way to copy the name at the time of selecting the image from OpenFileDialog box and give it to the image when saved? or any other way to save pictures as P1, P2, P3... so on whichever is easier.

2.How to maintain the picture quality when retriving the image to picture box?

I use ListView to see all the saved images with help of ImageView, when i select an image from ListView to load into the PictureBox, it gets blurred. I do not know why it happens... I have checked to change the color depth but no change happned.

let me tell you one thing, I reduce the picture size according to the size of the picture box. when I see the image in normal way (i.e. in Windows Photo Viewer) it appears good but when load in picture box, it gets blurred.

Please help me .

Thanks a lot

Mayank Jani.

22 Replies

Know the answer? Post it — somebody with the same question will find it here.

Amit Gupta7y ago
Accepted answer
Replace that line with the below one (it doesn't support on older versions) Image.FromFile(selectedFileName).Save(string.Format(@"{0}\{1}_1{2}",parent, fNameWE,ext);
Mayank Jani7y ago
Hey My Dear Friend,

it's Donnnneeeeee. I do not understand some syntexes but it works.
just one alteration I have to make that the image was not being loaded with 'SelectedIndexChanged' but when I put the same code in 'Click' event, it worked.

THAAANNNKKKKK YOOOOUUUUUUU VERY MUCH
Mayank Jani7y ago
Hey Amit,
I believe you're right buddy, but it is also right that I do not get the result. Please see the screen shots, I have explained the problems in it.

Please note that I might not understand what you are trying to explain becase you are a professional programmer and I learnt it only basic level and now learning from the net on trial and error basis. It might happen that I miss a very small and obvious point which is very infront of me. I understand that it is tedious to pin-point everything.

I really appreciate your petience and thank you.
Amit Gupta7y ago
My Dear Friend
private void lvThumbs_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (lvThumbs.SelectedItems.Count == 0)
                return;

            var index = lvThumbs.SelectedItems[0].Index;
            pbImage.Image = Image.FromFile(_files[index].FullName);

        }
The highlighted line loads the picture from the original file and not from the thumbnail. I think you are working with wrong old code which obviously gives your the blurry image.
my picture box is 600x400 so, at the time of saving any picture beyond this size will resized to my picture box
DO NOT resize to a limited size of 600x400, let the user see the original size of the image, so it will be more clear to user and save most of the memory when you do resizer the mage everytime to load into the picturebox.

Moreover, if you look at your form design, it has a fixed size, what will happen when the user resizes the form? User has a very bad experience in that.

I need something that loads picture from the folder as per selection from the list view with original size. so, saved picture is 600x400 and picture box is also 600x400 so, picture will be clear. but how...?
What happened when the image size is lower. Don't consider for resizing and showing it to user. It will have a bad impact on UX as resizing took a bit of time and user will get irritated when your program is slower for just navigating image.

However, the directory for loading and saving image is SAME. Why allowing user to save on the same directory if it already exists. Makes sense?

Hope you got the point.

Good Luck
Amit Kumar7y ago
Hi,
Save images to a folder with its original name use the below code.

For more detail refer:

http://www.msdotnet.co.in/2014/11/how-to-save-images-in-websites-folder.html
try
        {
            // get file name
            string file_name = Path.GetFileName(FileUpload1.PostedFile.FileName);
            //Check whether image size 51200 byte or 50 kb
            long size_img = FileUpload1.PostedFile.InputStream.Length;

            if (size_img <= 51200)
            {
                //save the images in msdotnet_images path folder
                FileUpload1.SaveAs(Server.MapPath("msdotnet_images/" + file_name));
                Label1.Text = "Image successfully added in msdotnet_images folder";
                // Now Save the file name and image path in sql database

           SqlCommand cmd = new SqlCommand("insert into student values(@name,@path)", con);
                cmd.Parameters.AddWithValue("name", file_name);
                cmd.Parameters.AddWithValue("path", "msdotnet_images/" + file_name);
                cmd.ExecuteNonQuery();
                Label1.Text = "Image name and path inserted in database successfully ";
                Response.Redirect("default.aspx");
            }

            else
            {
                Label1.Text = "Please Upload image size less than equal to 50 kB ";
            }

        }
        catch (Exception ex)
        {
            Label1.Text = ex.Message;
        }
        finally
        {
            con.Close();
        }
This will help you.
Mayank Jani7y ago
1. I get all the images from the folder to the list view. suppose, there are 25 images in the folder. so, all the images will be loaded into the list view. the user will click on any image (Thumbnail) and the image will be loaded into the picture box. the user will select another image and the same will be loaded and so on. it's like FilmStrip view in Windows XP. you can see small images horizontally and by selecting any image from it shows as big image above.
2. yes, you're right. my intension is to set the picture according to my picture box size regardless the original size of a picture. my picture box is 600x400 so, at the time of saving any picture beyond this size will resized to my picture box. it's okay not to resize a picture but I just wanted to learn how to resize a picture programmatically. if I choose no SizeMode, then picture goes out of the box and that looks weired.

Now, as I understood that, 1. I save picture in a perticular folder. 2. at the time of form load, the pictures of the folder loads into list view. my code (imageList1.ImageSize = new Size(100, 100);) reduces the picture size to 100x100. 3. selecting the picture (Thumbnail) from the list view loads the selected image to the picture box NOT FROM THE FOLDER BUT, FROM THE LIST VIEW and so it shows blurr.
I need something that loads picture from the folder as per selection from the list view with original size. so, saved picture is 600x400 and picture box is also 600x400 so, picture will be clear. but how...?
Amit Gupta7y ago
Have you executed the exe of the code modified by me? It was tested and works properly. Can you explain what's not working with that code
Mayank Jani7y ago
Yes, it's my code and that is not working as I want it to work.
About your code... after comments removed.

private void lvThumbs_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (lvThumbs.SelectedItems.Count == 0)
                return;

            var index = lvThumbs.SelectedItems[0].Index;
            pbImage.Image = Image.FromFile(_files[index].FullName);

        }

does not load image into picturebox.
Amit Gupta7y ago
@Mayank That's not the code which was modified by me, it seems your older code. The modified code fetches the image from the folder itself(original). Look it carefully.
Mayank Jani7y ago
Hii
Sorry, that won't work because at the time of form load, the code for fetching images to the list view is... (partial code...)

lvThumbs.View = View.LargeIcon;
imageList1.ImageSize = new Size(100, 100);
lvThumbs.LargeImageList = this.imageList1;

this reduces the size of the image to 100 X 100 to view as thumbnail. then, when click on the thumbnail to view it on picture box, which is 600 X 400 in size, the code is...

if (lvThumbs.SelectedItems.Count == 0)
return;

Int32 item = lvThumbs.SelectedIndices[0];
Image img = imageList1.Images[item];
pbImage.Image = img;

so, it takes the thumbnail and puts into the picture box with the same size of 100 X 100 and so the picture gets blurred. If I change the SizeMode to AutoSize, it surely shows the clear picture but in 600 X 400 area. so, pictures shows in upper left corner with 100 x 100 size.

Can it be done like, by selecting the picture from list view (thumbnail) will get the original picture directly from the folder and put into the picture box? OR the pictures will load into the list view with their original size but the icon size is small, medium or large? OR you say what else can be done?

Thanks
Amit Gupta7y ago
I had loaded the image into the picturebox from the original filename and not from listview. You can adjust its SizeMode to AutoSize to get the clear picture.
Mayank Jani7y ago
Hiii Amit,
Thanks for your support buddy but, I barely understand the professional codes. I always try to keep my codes very simple and sometimes it leads me to a lengthy coding.
anyway, I have done it by the way, please see the screen shot I've attached. you will easily understand it. Now I can save pictures with its names.
please help me toward my last and main problem. How to load image from list view to picture box by clicking on a picture? presently, it loads from list view as thumbnail and gets blurred.
You suggested me to load the picture direct from the folder as it is saved. How can I select a picture in list view and got the same fetch from the folder and load?

Thanks
Amit Gupta7y ago
Hi

I had made some changes to the code.

Note: As you are using a very older version of VS (seems vs2005). I recommend you to upgrade to the latest stable release. If the project is failed to open in your system then copy Form1.cs to your project file and replace it,

"To solve a particular problem, you need to find the solution in chunks"

Good Luck
Mayank Jani7y ago
Hii Amit
please find the attachment of the code...

Thanks
Amit Gupta7y ago
Kindly share your code, what you have done so far so that I can make changes to that.
Mayank Jani7y ago
Hii Amit,

Really sorry, I do not understand what you are trying to say... (1. Select files from open file dialog and load those files array into an array (e.g List))

let's go step by step, first please let me know how to save an image file to a folder with it's original name so that will not overwrite.

1.I have a button which opens the file dialog box.
2.I select an image (e.g. cat.jpg) and it loads into a picture box.
3.I click a button to save the image to... pbImages.Image.Save(@"D:\Images\MyAlbums \Picture.jpg"); and it saves with name Picture.jpg instead of cat.jpg. if I remove the 'Picture.jpg' from the path, it thorws an error 'A generic error occurred in GDI+.'
4.When I save another image it overwirtes the previously saved image with new one by the same name Picture.jpg.

Please show me how to solve this problem. If I'm not wrong, it should be something like... to save the file name (cat.jpg) in some variable and put the variable instead of Picture.jpg in the path. but I do not know how to assign image name to what variable??

Hope you understand what I want to say...

Thanks once again for your patience.

Mayank
Amit Gupta7y ago
1. Select files from open file dialog and load those files array into an array (e.g List) 2. Load your thumbnail into listview from that array. 3. When user selects the image from listview then get the selectedindex property and get the image filename and load that image into the picturebox accordingly. Do let me know if you require any clarification.
Mayank Jani7y ago
Hii Amit,

for your suggestion (What you can do is.. load the image...) I understood that when I click on a thumbnail in the ListView, it adds the same thumbnail in the PictureBox and so the image is blurred...(wow.. Thanks :)) buttttt my design is I put left side a list view and a picture box on the right so when the form loads all the pictures in the source folder shows in the listview and when selected it shows in the picture box. so, how to load picture into the picture box directly from the folder accordingly I choose it from the list view??

and (The reason of image getting blurred is...) the second problem will be cured when the picture will be loaded directly from the folder but I know how to do it with text records from datatable but how to do with image from folder.

Would you please help me in this...?

Thanks
Amit Gupta7y ago
What you can do is.. load the image into the picturebox from their original file not from the listbox's thumbnail because it will not give you the excellent result and your image will always got blurred. Good Luck
Amit Gupta7y ago
The reason of image getting blurred is you are resizing it to fit your picturebox. You can choose Zoom/None or try different enum that suits the best, I don't recommend stretching the image.
Mayank Jani7y ago
Hiii Amit,
thanks for your reply...
1.(A) there is a ListView in my window which shows all the pictures as thumbnail fetched from source folder. (B) I save pictures with a button, when clicked, opens a FileDialog window, I choose a picture and it loads into a picture box. then clicking 'save' button to got it saved in a folder. (C) on the other hand, when the form loads, in the form load event I have write code for load all the pictures in the folder to the ListView. (D) when I click on any thumbnail, it shows in the same picture box.
2. Yes, you're right. I want to resize the picture before save it in a folder. I am thinking to save the space. that's it. my picture box is 600X400 in size and if I choose SizeMode as stretched, it will fit to the screen regardless its original size. but this is an experiment i am doing that to reduce the size of picture exactly to the picturebox when retrieved. all pictures are of same size.
Amit Gupta7y ago
1. How you are showing images in picturebox (I mean, you had took the filename to show one by one in picturebox), you can get that filename and save it accordingly. 2. No need to resize the images according to picturebox, there would be a property named SizeMode in picturebox, you can choose that whichever enum suits your needs