Upload Multiple images and create thumbnails of the images.

Hello All;

Just found out that I am not going to be able to use ASP Classic to do what I need to do, so I am going to have to look at possibly asp.net for the solution.

I need a sript that does not include the installation of a com object on the server side.

This is what I am needing pretty badly.

Upload multiple files (like this http://www.codeproject.com/KB/aspnet/FlashUpload.aspx)

Store files name and size to database (SQL Server 2005)
Create Thumbnails of the image(s)

Any idea's on this would be greatly appreciated.
Thank you for your time and effort on completing this annoyed at my provider task.

Carrzkiss
LVL 31
Wayne BarronAuthor, Web DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

masterpassCommented:
you can use jquery for the same

http://www.fyneworks.com/jquery/multiple-file-upload/

http://docs.jquery.com/Tutorials:Multiple_File_Upload_Magic

http://plugins.jquery.com/project/MultiFile/

Every link is having all the steps to keep you moving ..... Hope this helps
0
masterpassCommented:
use this code snippet for generation of the thumbnails ...
private static System.Drawing.Image resizeImage(System.Drawing.Image imgToResize, Size size)
{
    int sourceWidth = imgToResize.Width;
    int sourceHeight = imgToResize.Height;
    float nPercent = 0;
    float nPercentW = 0;
    float nPercentH = 0;

    nPercentW = ((float)size.Width / (float)sourceWidth);
    nPercentH = ((float)size.Height / (float)sourceHeight);

    if (nPercentH < nPercentW)
        nPercent = nPercentH;
    else
        nPercent = nPercentW;

    int destWidth = (int)(sourceWidth * nPercent);
    int destHeight = (int)(sourceHeight * nPercent);

    Bitmap b = new Bitmap(destWidth, destHeight);
    Graphics g = Graphics.FromImage((System.Drawing.Image)b);
    g.InterpolationMode = InterpolationMode.HighQualityBicubic;

    g.DrawImage(imgToResize, 0, 0, destWidth, destHeight);
    g.Dispose();

    return (System.Drawing.Image)b;
}

Open in new window

0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Hello Masterpass.
Thank you for your time and effort in this issue.

I do not do .net, I am a Classic ASP person, so I am at a complete loss as to what exactly is going on here.

Looking at the code above for the Thumbnails, I am not seeing where the code actally makes the image smaller by pixels, just by width and height.
It could be that I just do not understand the code supplied being of .net

What I need is that if someone uploads an images the is say
Size of: 512x468 with a wieght of:  268kb
I need the image to be brought down not only in size but in weight as well.
So that above would end up being:
Size of: 212x168 with a weight of: 68kb

I hope that makes since...?

Please let me know if you code supplied will do this, and if so, can you please provide a demo of how to use it?
I am pretty sure that I will catch on to it, but am right now in uncharted waters here.

Thank you
Carrzkiss
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

masterpassCommented:
carrzkiss,

the code snippet provided above will reduce the size as well as the height and width. we are having the same requirement and this is what we use for the thumbnails. it is effective in reducing the size too..

Regarding how to use this, First you will have to fix on how you are planning to upload the multiple uploads. the fileupload will be coming as a stream and you will have to cast the stream to System.Drawing.Image and supply it to the function. the function will return you a thumbnail image and you can do what ever you want with it.
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
OK.
As for how I will be uploading the files, right now I am still looking.
I checked out the links that you provided above and they seem to have a
Single file input field, that allows multiple upload, of which I am thinking that is what it does.
As the demo's do not function so I am unable to test them out.

So at the moment I am back where I started from.

Now, regarding the Thumbnailer, does this create a seperate image that is of a smaller size "Thumbnail" (or) does it take the only image that is uploaded and convert it?
As I need both a thumb and a big image.
-----------
So, right now as it stands, I am back to square one.
I do have a script that I am using to upload images right now that works right well, for single and multiple images, but when you upload multiple images, the user has several different input fields instead of a single window, which is what I would prefer to have if possible.

The code that I am using is:
www.motobit.com/util/upload/old-upload.asp
It is in ASP Classic, so I am not sure how I would go about implementing the .net code to it.

Would you have any suggestions on that? If I can get your .net code implemented somehow into what I already use, then that would make my weekend less hectic and maybe I can have a decent one for the first time in a long time.

Thanks again.
Carrzkiss
0
masterpassCommented:
Regarding the code I have given, When ever you upload a file you can access the file as a stream. If you want a bigger image and a thumb nail then you can first save the original stream(big image) and then pass on the same stream to produce a smaller image(thumb nail)... That is not an issue

coming to the upload control you are using, I am not quite familiar with the classic asp but If i am right I think you cannot use this code in asp.net. Since I am not familiar with classic asp I cannot guarantee 100% accuracy for my comment. can you just try to make this code work in an aspx page ?(I don't have VS installed in this system, so can't try it out). If you can make it work then I think you can have a decent weekend this time !!!
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
sure, I can test this out as is, but how?
How do I use the code that you have supplied?
Give me a little instruction and I will test it out.

If I can get a asp.net upload script that is good that works out of the box.
Then I can use that in-place of what I have, and then attach this code to it.
But like yourself.
I know asp classic, but cannot use it for generating thumbnails on the server side as the server is not mine.
And ASP.NET is something that I have not really messed with, so in this case, I am jumping in blind trying to get this work.

Thanks once again.
I am going to do some checking for some asp.net upload scripts and see what I can find out while waiting for your reply.
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
I just figured out why I never messed with .net.
Every example that I have run comes with error upon error.
I set the directory as a .NET application, and id did this and I did that.
And I have yet to get any script to run.

I think for the time-being, I am going to use what I have and just allow myself to do uploads for the time-being until I can learn enough about .net to run the mess on my on system before I try to put something that I did not understand live online for others to use and break and I cannot fix.

For the time, I will run the upload script that I posted the link above for.
If you have something that I can test that works for you out-of-the-box
Then I will test it, and maybe you might be able to assist me with the errors.
Until then, I will doing to use what I have, it works for now.

Thanks
Carrzkiss
0
masterpassCommented:
Let's say you are using a fileupload control

<asp:FileUpload ID="ImageFileUpload" runat="server" />
<asp:Button ID="UpdateButton" runat="server" Text="Update" OnClick="UpdateButton_Click" />

Now you will have a button which is used to upload the image.. whne the user clicks on that button you should get the image and save it ....

so In the UpdateButton_Click event will be as follows,
protected void UpdateButton_Click(object sender, EventArgs e)
{
string selectedFile = ImageFileUpload.FileName;
string extension = string.Empty;
extension = System.IO.Path.GetExtension(selectedFile); 
ImageFileUpload.SaveAs(System.IO.Path.Combine("path to save", selectedFile));// to save the actual image 
System.Drawing.Image ImageToSave = resizeImage(System.Drawing.Image.FromStream(ImageFileUpload.FileContent), new Size(130, 150));// supply actual image to the function
ImageToSave.Save(Server.MapPath(System.IO.Path.Combine("path to save", selectedFile)));// the function returns a thumbnail which is saved here 
}

Open in new window

0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
I have being a newby in something, it can be so frustrating at times.

OK.
So, with the provided script above.
I do not understand what to do with it.

I understand what the code outside of the code box does, I have seen such code in previos post here on EE so I have gotten myself familuar with the runat="server"
And other elements of the code(s).
But, that is about as far as I have gotten.

The code that is in the codebox provided, where (or) in other words.
How would I go about using it?

I hate doing this, but this is how I have taught people on EE with dealing with learning
ASP Classic with SQL coding.
Is that I provide a short working example and then help to answer questions and walk them through the issues that they may come across.
Not everyone agree's with this type of action on EE, but then again, I am not everyone.
I have learned a lot here on EE in the past, and I tend to share my knowledge with all that need it after me.

So. To you MasterPass
Could you provide a working code example (I understand it is difficult with the Upload issues and having the control to do it and so forth) But, that is the only way that I am going to learn how to do this.
This is how I learned with ASP Classic, examples and know I can do near-about everything I need or want, to a point that is.

If you feel that this is too much to do for this post, please let me know, if so, then please provide me with a link to a working example of a File Upload for ASP.net that actually works.
As everything that I have found on my own, does not come close to working.

Thank you once again for your time and assistance in this issue.
Carrzkiss
0
masterpassCommented:
I would appreciate If you can try out the example given in this link

http://asp.net-tutorials.com/controls/file-upload-control/

It will help you get familiar with .net file upload control. Once you finish with this tutorial, try to apply the code I gave in post ID: 28938639. Let me know if you face some issues.
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
OK.
I did the instructions on the page, and could only get the first code to actually work.
The other codes would not work, they compiled without issue, but would not upload a file
And would not even test to see if it was a JPEG or 100kb in size. (Strange)

I then tested your code above, and it would make the page go blank, it would not even show anything on the page.

Now, the question is:
I did the tutorial on the page and created a C# page, I then tested with a VB page
And still nothing showed on the page when I tested out your code.

So.
What I have accomplished thus far is:
I know how to add the .NET code into a file and add it to the page.
I know a little more about the controls, and how they work and are created.

--------
So, what is needed now to know is:
#1:  why is your code causing the page to go blank?
#2:  why does the extra code on the tutorial page not work when I add in the checks for JPEG and file size?

Thanks again for your great assistance, I am learning and now that I have gotten this far, I am going to run some test and see what I can figure out on my own while waiting for your reply.

Thank you
Carrzkiss
using System;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.IO;

public partial class _Default : System.Web.UI.Page 
{

protected void UploadButton_Click(object sender, EventArgs e)
{
    if(FileUploadControl.HasFile)
    {
        try
            {
            string filename = Path.GetFileName(FileUploadControl.FileName);
            FileUploadControl.SaveAs(Server.MapPath("Uploaded/") + filename);
            StatusLabel.Text = "Upload status: File uploaded!";
        }
        catch(Exception ex)
        {
            StatusLabel.Text = "Upload status: The file could not be uploaded. The following error occured: " + ex.Message;
        }
    }
}

}

Open in new window

0
masterpassCommented:
The answer to your both question is

The check was for jpeg and some times it can be pjpeg. So i would recommend using just image.
Also your upload path was a bit wrong. I am attaching a working code

Use http://www.developerfusion.com/tools/convert/csharp-to-vb/ to convert to VB
protected void UploadButton_Click(object sender, EventArgs e)
{
    if (FileUploadControl.HasFile)
    {
        try
        {
            if (FileUploadControl.PostedFile.ContentType.Contains("image"))
            {
                if (FileUploadControl.PostedFile.ContentLength < 102400)
                {
                    string filename = Path.GetFileName(FileUploadControl.FileName);
                    FileUploadControl.SaveAs(Server.MapPath("~/Uploads/") + filename);
                    StatusLabel.Text = "Upload status: Original File uploaded! proceeding to produce thumb nail <br/>";
                    System.Drawing.Image ImageToSave = resizeImage(System.Drawing.Image.FromStream(FileUploadControl.FileContent), new Size(130, 150));// supply actual image to the function
                    ImageToSave.Save(Server.MapPath(System.IO.Path.Combine("~/Uploads/", filename.Insert(filename.LastIndexOf('.'),"-T"))));// the function returns a thumbnail which is saved here 
                    StatusLabel.Text += "Upload status: Thumbnail produced...";
                }
                else
                    StatusLabel.Text = "Upload status: The file has to be less than 100 kb!";
            }
            else
                StatusLabel.Text = "Upload status: Only JPEG files are accepted!";
        }
        catch (Exception ex)
        {
            StatusLabel.Text = "Upload status: The file could not be uploaded. The following error occured: " + ex.Message;
        }
    }
}

private static System.Drawing.Image resizeImage(System.Drawing.Image imgToResize, Size size)
{
    int sourceWidth = imgToResize.Width;
    int sourceHeight = imgToResize.Height;
    float nPercent = 0;
    float nPercentW = 0;
    float nPercentH = 0;

    nPercentW = ((float)size.Width / (float)sourceWidth);
    nPercentH = ((float)size.Height / (float)sourceHeight);

    if (nPercentH < nPercentW)
        nPercent = nPercentH;
    else
        nPercent = nPercentW;

    int destWidth = (int)(sourceWidth * nPercent);
    int destHeight = (int)(sourceHeight * nPercent);

    Bitmap b = new Bitmap(destWidth, destHeight);
    Graphics g = Graphics.FromImage((System.Drawing.Image)b);
    g.InterpolationMode = InterpolationMode.HighQualityBicubic;

    g.DrawImage(imgToResize, 0, 0, destWidth, destHeight);
    g.Dispose();

    return (System.Drawing.Image)b;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Update:
Internet Explorer will not show the page if their is errors on it. Instead, IE displays a Blank Page.
FF however does show the page with its error.

I am going to try your code now, if I can figure out how to fit everything together.
I am taking it that the Thumbnail code and the last code you supplied both go in a .cs page
If that is correct, then that is what I am about to do.
If not, please advice.
0
masterpassCommented:
just copy the code in post ID: 28969033, if you are using the c# and use. I have the thumbnail code attached with that code ....
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
My upload path actually worked without any issues, It dropped the images into the folder I was working in, instead of the folder outside of my project.

Still getting the error listed above
0
masterpassCommented:
Can you try to give me the error description by putting some try .. catch blocks and may be debugging using the break points ... I tried the above code in my system and gave ...There was no issue in IE and FF ...  So If you can't give some error description, I am afraid I may not be able to help you out !!!
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Update (Stuck)

Compiler Error Message: CS0246:
The type or namespace name 'Size' could not be found (are you missing a using directive or an assembly reference?)

on this line

private static System.Drawing.Image resizeImage(System.Drawing.Image imgToResize, Size size)

----------
Also.
In the main aspx page, do I set it as C# (or) VB?

I can do the C#
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="up1.aspx.cs" Inherits="_Default" %>

But when I try to add the CodeFile in VB it gives an error.
(Im learning, slowly but surely)
0
masterpassCommented:
Make sure you are using all these

using System.Drawing.Imaging;
using System.Drawing;
using System.IO;
using System.Drawing.Drawing2D;

---------------

Try to use C#
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Added in, and the page runs now.
But, when I try to upload an image, I get the following error written to the page.

============
Upload status: The file could not be uploaded. The following error occured: A generic error occurred in GDI+.
============

I did a search and found out that it could be a Corrupt image or not an image.
In my case, the image is fine and it is an image.

Any thoughts?
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Fixed.
Forget an upload folder, for the Thumbnails, I had it in code, but not in the actual folder.

Going to test it out and learn the code, will post back my findings.
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Question:

ContentLength < 102400)

I need to make it 1mb (or) 1.5mb file size upload.
I know that 1024kb is 1mb, but I do not understand this concept here.
102400
being 100kb
0
masterpassCommented:
102400 Bytes = 102400/1024 KB = 100KB
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Great information and teacher.
You lead me down the right path to get what I needed.
A little studing and I will be able to do what I need with this, and to know that I am starting to learn asp.net with your help if a great feeling.
Thank you for your time and your effort in this issue.

Thank you
Wayne (Carrzkiss)

Please visit my site, it is a work in progress, still have to get a few bugs out, but it is LIVE and something that I am very proud of, and I welcome you to join if you like, and help spread your knowledge for people like myself and the thousands of others out there that need help in learning a new language.

http://www.cffcs.com
Carrz-Fox-Fire Coding Source.
0
masterpassCommented:
I am glad that I could be of some assistance :) . thanks for your appreciating comments and will try out the site ...  
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
This got me to 1.5mb
1572864

Great tool:
http://webdeveloper.earthweb.com/repository/javascripts/2001/04/41291/byteconverter.htm

I am going to make another post with this code for doing multiple file upload.
If you are interested, please have a look.
http:Q_25587050.html

Thank you once again for all your great knowledge and assistance in my start in .NET.
(I love ASP, so minus well learn and do them both, Classic and .NET, what could be better)

Carrzkiss
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
MasterPass.
If you get an opertunity could you have a look at the post provided above?
I have tried several different codes to do a multi-upload, but all of them that I test all
Give me the same errors.

CS0246: The type or namespace name '(FILE NAME HERE' could not be found .

You could think that this projects that are downloadable, would be ready to run, but does not seem like it, or am I missing something in my testing system?

I am running my development on:
WinXP Pro | IIS5.1
With all patches and updates and all the other required mumbo-jumbo.
So, everything should be ready for this to work, you would think.

Thanks a bunch.
Carrzkiss
0
masterpassCommented:
carrzkiss,

I haven't used the NEATUPLOAD ans so there is no suggestions from my part.

You could think that this projects that are downloadable, would be ready to run, but does not seem like it, or am I missing something in my testing system? ----------> Always this is a problem, every projects that are downloadable will have some problems like this associated with it . But I would suggest that you ask the person who suggested this as he might have already used and might have come across this error and might be able to guide you better
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
I am not using the NEATUPLOAD

I am still using what you helped me with, I am sticking for the time being, with what works. And the code that you provided works.
Could a Multiple Upload be added to it?
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Seems to be a downfall with this code.
If a file exist with the same name as the file being uploaded, it will over-write it.
How can I "NOT" overwrite the existing file, by renaming it with a _1, _2, _3 at the end of it?

Basically, if the file exist with name:   myfile.jpg
Then the next image would need to programably renamed to:
myfile_1.jpg
myfile_2.jpg
and so on...

Any idea's on this one?
Right now, this is a huge roadblock.

Thank again.
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
I got this added to the code, which renames the files to extremely long names.
I would prefer to have them named differently, so if you can think of something else
I would really to to hear it.

(Code to change name of uploaded files)

string filename = Guid.NewGuid().ToString() + Path.GetExtension(FileUploadControl.FileName);

Have a good one.
p.s.
I got a save as function working as well, the only thing that needs to be added to this one is to make it so that I can upload multiple images and have their names saved to the database as well, and this project will be completed until I modify it to make it better on down the road in a few weeks or months.

So, if you have any idea's on the Multiple upload, that would be great, which is actually what this post was really about anyway.

Carrzkiss
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.