Click here to Skip to main content
16,019,618 members
Articles / Programming Languages / C#

Lightweight Image Upload with Animation

Rate me:
Please Sign up or sign in to vote.
4.80/5 (22 votes)
22 Jun 2011CPOL2 min read 60.7K   2.2K   51   32
This tutorial is going to guide you in creating a rich application for Upload, View and Delete images with special effects.

User Interface

Animated_Screen.gif

Introduction

This tutorial is going to guide you in creating a rich application for Upload, View and Delete images with special effects. You must have followed many tutorials to help you upload files using .NET or (AJAX or JQuery). Now I combined both of these elements to create one complete application.

Used Library from JQuery

jquery-1.5.1.js (JQuery framework for special effects) ajaxupload.3.5.js (for upload file with silent mode) you can download latest files from http://jquery.com/.

What's Surprising in this Article?

I am showing you a surprising thing... I have not used any File Upload control and this magic was done by using JQuery.

Using the Code

Default.aspx (which contains User Interface) the following function is dynamically creating interface for upload Image without File Upload control.

JavaScript
$().ready(function () {
            var counter = 0;
            $(function () {
                var btnUpload = $('#addImage');
                new AjaxUpload(btnUpload, {
                    action: 'saveupload.aspx',
                    name: 'uploadfile',
                    onSubmit: function (file, ext) {
                        $("#loading").show();
                    },
                    onComplete: function (file, response) {
                        var uploadedfile = "UserData/" + file;
                        $("#uploadImageWrapper").
                        append("<div class='imageContainer offset'  
                        id='current" + counter + "'>
                        <img height='65px' width='65px' src='" + 
                        uploadedfile + "' alt='" + uploadedfile + 
                        "'/><div id='close" + counter + "' 
                        class='close'  title='" + uploadedfile + "'  
                        önclick='RemoveImage(this);'><a ></a></div></div>");
                        $('#current' + counter).fadeIn('slow', function () {
                            $("#loading").hide();
                            $("#message").show();
                            $("#message").html("Added successfully!");
                            $("#message").fadeOut(3000);
                            counter++;
                        });
                    }
                });
            });
        });

In the above method, I have defined action: 'saveupload.aspx'. That means whenever you select any file from File Dialog, it will automatically call saveupload.aspx files Page_load method, and this function gets all the requested files (in my case, it is only one at a time) and saves at a specific location (in my case \UserData\). The following code is very self explanatory (for saving file on server saveupload.aspx.cs).

C#
protected void Page_Load(object sender, EventArgs e)
   {
       HttpFileCollection uploadedFiles = Request.Files;
       int i = 0;
       if (uploadedFiles.Count > 0)
       {
           while (!(i == uploadedFiles.Count))
           {
               HttpPostedFile userPostedFile = uploadedFiles[i];
               if (userPostedFile.ContentLength > 0)
               {
                   string filename = userPostedFile.FileName.Substring
           (userPostedFile.FileName.LastIndexOf("\\") + 1);
                   userPostedFile.SaveAs(Path.Combine
           (Server.MapPath("UserData"), filename));
               }
               i += 1;
           }
       }
   }

After successfully saving file on server, you should be able to see message on bottom of the Image Uploader "Added successfully!". This message will automatically be closed after 3 seconds with transition effect. The following code is specifically for delete file from server. I have defined url: "removeupload.aspx?filename". That means whenever you clicked on X mark (you can see it over every uploaded image), it will pass filename to the server for deleting the file.

JavaScript
function RemoveImage(_this) {
            var counter = _this.id.replace('close', '');
            $("#loading").show();
            $.ajax({
                type: "POST",
                url: "removeupload.aspx",
                data: "filename=" + _this.getAttribute('title'),
                success: function (msg) {
                    $('#current' + counter).fadeOut('slow', function () {
                        $("#loading").hide();
                        $("#message").show();
                        $("#message").html("Removed successfully!");
                        $("#message").fadeOut(3000);
                    });
                }
            });
        }

The following code is very self explanatory (for deleting file on server removeupload.aspx.cs):

C#
protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            string filename = Server.MapPath(Request.Params["filename"]);
            FileInfo TheFile = new FileInfo(filename);
            if (TheFile.Exists) File.Delete(filename);
        }
        catch (Exception ex)
        {
        }
    }

Thing For You To Do

  • Try to check for file type validation
  • Exception handling

Your Thoughts

If you find some issues or bugs with it, just leave a comment or drop me an email. If you make any notes on this, let me know that too so I don't have to redo any of your hard work. Please provide a "Vote" if this would be helpful.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead Infostretch Ahmedabad-Gujarat
India India
Aspiring for a challenging carrier wherein I can learn, grow, expand and share my existing knowledge in meaningful and coherent way.

sunaSaRa Imdadhusen


AWARDS:

  1. 2nd Best Mobile Article of January 2015
  2. 3rd Best Web Dev Article of May 2014
  3. 2nd Best Asp.Net article of MAY 2011
  4. 1st Best Asp.Net article of SEP 2010


Read More Articles...

Comments and Discussions

 
Questionvote 5 Pin
Member 1144513421-Jul-17 1:33
Member 1144513421-Jul-17 1:33 
GeneralMy vote of 5 Pin
Renju Vinod17-Mar-14 19:56
professionalRenju Vinod17-Mar-14 19:56 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen22-Apr-14 2:29
professionalSunasara Imdadhusen22-Apr-14 2:29 
GeneralFile size limit Pin
Nagraj Naik2-Jul-12 4:33
Nagraj Naik2-Jul-12 4:33 
GeneralRe: File size limit Pin
Sunasara Imdadhusen22-Apr-14 2:32
professionalSunasara Imdadhusen22-Apr-14 2:32 
QuestionAbout the control Pin
Ali Al Omairi(Abu AlHassan)15-Sep-11 4:09
professionalAli Al Omairi(Abu AlHassan)15-Sep-11 4:09 
AnswerRe: About the control Pin
Sunasara Imdadhusen14-Dec-11 1:45
professionalSunasara Imdadhusen14-Dec-11 1:45 
GeneralRe: About the control Pin
Ali Al Omairi(Abu AlHassan)28-Jan-12 2:25
professionalAli Al Omairi(Abu AlHassan)28-Jan-12 2:25 
QuestionExcellent Pin
Savalia Manoj M2-Sep-11 4:08
Savalia Manoj M2-Sep-11 4:08 
AnswerRe: Excellent Pin
Sunasara Imdadhusen13-Sep-11 3:22
professionalSunasara Imdadhusen13-Sep-11 3:22 
QuestionUsing extra data and response type Pin
Ali Al Omairi(Abu AlHassan)11-Jul-11 3:54
professionalAli Al Omairi(Abu AlHassan)11-Jul-11 3:54 
AnswerRe: Using extra data and response type Pin
Sunasara Imdadhusen13-Jul-11 4:01
professionalSunasara Imdadhusen13-Jul-11 4:01 
GeneralRe: Using extra data and response type Pin
Ali Al Omairi(Abu AlHassan)7-Aug-11 0:28
professionalAli Al Omairi(Abu AlHassan)7-Aug-11 0:28 
GeneralRe: Using extra data and response type Pin
Sunasara Imdadhusen7-Aug-11 16:54
professionalSunasara Imdadhusen7-Aug-11 16:54 
QuestionNew Update Pin
Ali Al Omairi(Abu AlHassan)8-Jul-11 6:36
professionalAli Al Omairi(Abu AlHassan)8-Jul-11 6:36 
AnswerRe: New Update Pin
Sunasara Imdadhusen13-Jul-11 4:00
professionalSunasara Imdadhusen13-Jul-11 4:00 
GeneralRe: New Update Pin
Ali Al Omairi(Abu AlHassan)6-Feb-12 22:53
professionalAli Al Omairi(Abu AlHassan)6-Feb-12 22:53 
GeneralMy vote of 5 Pin
ramakrishnankt1-Jul-11 1:15
ramakrishnankt1-Jul-11 1:15 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen1-Jul-11 18:23
professionalSunasara Imdadhusen1-Jul-11 18:23 
GeneralMy vote of 5 Pin
Omar Gameel Salem23-Jun-11 6:17
professionalOmar Gameel Salem23-Jun-11 6:17 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen23-Jun-11 18:36
professionalSunasara Imdadhusen23-Jun-11 18:36 
GeneralMy vote of 5 Pin
kelvin z22-Jun-11 20:13
kelvin z22-Jun-11 20:13 
AnswerRe: My vote of 5 Pin
Sunasara Imdadhusen22-Jun-11 22:01
professionalSunasara Imdadhusen22-Jun-11 22:01 
QuestionGood Article Pin
Ra-one22-Jun-11 19:02
Ra-one22-Jun-11 19:02 
AnswerRe: Good Article [modified] Pin
Sunasara Imdadhusen22-Jun-11 19:17
professionalSunasara Imdadhusen22-Jun-11 19:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.