CodeCarvings Piczard V1.2 Help
SimpleImageUpload ASCX User Control Overview
See Also Send Feedback
Image Upload - SimpleImageUpload User Control > SimpleImageUpload ASCX User Control Overview

Glossary Item Box

CONTENTS

  1. Introduction
  2. Adding the control to a page
  3. Getting started
  4. Save the image

 

 

1. Introduction

SimpleImageUpload is an user control (ASCX) that provides advanced image uploading features.
It allows the final user to:

The full source code of the control is available (BSD license).
You are free to change/edit it according to your needs.

The control can be obtained in 3 ways:

  1. Can be downloaded as NuGet package: http://www.nuget.org/packages/CodeCarvings.Piczard.ImageUpload
  2. It is available as public Git repository: https://github.com/CodeCarvings/ImageUpload
  3. It is included in the Piczard examples (ExampleSet A - subdirectory: "~/piczardUserControls/simpleImageUploadUserControl") available here:

 

If you install it via NuGet you can easily upgrade the control every time an upgrade is released.

News about updates are available through:

  1. Twitter: http://twitter.com/codecarvings
  2. Facebook: http://www.facebook.com/pages/CodeCarvings/207319665964598
  3. RSS: http://feeds.piczard.com/codecarvings/

 

 

2. Adding the control to a page

Important information in case you want to copy the control from the examples

  1. The user control SimpleImageUpload.ascx can be found in the ExampleSet A (http://piczard.com/download); subdirectory: "~/piczardUserControls/simpleImageUploadUserControl".
  2. If you want to copy the ASCX control to another project, please remember to also copy all the files contained in the simpleImageUploadUserControl directory.
  3. Please note that the ASCX control included in the Piczard examples is part of "Web Site" projects.
    If you want to use it in a "Web Application" project you need to convert the control files.
    From within Microsoft Visual Studio open your "Web Application" project.
    In the Solution Explorer right-click the folder that contains the ASCX control and then click Convert to Web Application.

    For more information about "Web Site" and "Web Application" projects please see:

In order to use the ASCX control in an ASPX page (or from within another ASCX control) it's necessary to register it with the @Register directive:

Copy Code
<%@ Register src="~/piczardUserControls/simpleImageUploadUserControl/SimpleImageUpload.ascx" tagname="SimpleImageUpload" tagprefix="ccPiczardUC" %>

(obviously the "src" attribute must contain the correct path of the ascx control)

After this you can place the ASCX control in the page:

Copy Code
<ccPiczardUC:SimpleImageUpload ID="Picture1" runat="server" />
SimpleImageUpload.ascx does not require Ajax.
However, since it can perform some page postbacks, for optimal use it is suggested to insert it within an UpdatePanel.

 

 

3. Getting started

Please see the Examples:

  • A.501 - Overview
  • A.502 - Usage example #1 (image crop)
  • A.507 - Usage example #6 (image resize + watermark)

The control allows - in a very flexible way - to have full control over the image processing parameters.
Both interactive image manipulation (crop, resize) and/or automatic image processing (resize, watermark, color adjust, etc..) are available.
Every feature can be enabled or disabled according to your needs.

The following are the principal properties in order to customize the behavior of the image processing features of the control:

In order to use the control, the first thing to do is to configure its image processing parameters.
For example, the following are the two most common scenarios:

  1. Allow an user to upload an image -and then- to interactively crop or resize/rotate-flip it.
    (please see also: Controlling The WYSYWIG Image Editor Tool)
  2. Allow an user to upload an image and then automatically process it (resize, watermark, etc..) without further interactions.
    (please see also: Post-Processing Filters (Automatic Image Resize, Watermark, Etc...))

 

Case 1: The following example code configures the control to allow the final user to upload an image and then crop it to a fixed size.

Copy Code
protected void Page_Load(object sender, EventArgs e)
{
   
if (!this.IsPostBack)
   {
       
this.ImageUpload1.AutoOpenImageEditPopupAfterUpload = true;
       
this.ImageUpload1.CropConstraint = new FixedCropConstraint(300, 200);
       
this.ImageUpload1.CropConstraint.DefaultImageSelectionStrategy = CropConstraintImageSelectionStrategy.WholeImage;
       
this.ImageUpload1.PreviewFilter = new FixedResizeConstraint(150, 100);
   }
}

 

Case 2: The following example code configures the control to allow the final user to upload an image that then is automatically resized & watermarked. All with one click.

Copy Code
protected void Page_Load(object sender, EventArgs e)
{
   
if (!this.IsPostBack)
   {
       
this.ImageUpload1.EnableEdit = false;
       
this.ImageUpload1.PostProcessingFilter = new ScaledResizeConstraint(300, 300) + new ImageWatermark("~/MyWatermark.jpg", ContentAlignment.BottomRight);
   }
}

 

 

4. Save the image

After an image has been uploaded by an user it is saved as temporary file.

It is the application’s job to permanently save the temporary image (in a directory or within a database).
If the temporary image is not saved, then by default it is automatically deleted.

For more information about configuring the temporary files management please see:

In order to process the source image (for example when the user clicks the hypothetical button "Save Record") you can use one of the following methods:

 

In order to check the status of the control, the following properties are provided:

 

The following example checks if the user has edited the current image (crop/resize/rotate-flip/color adjust...) -or- if a new image has been uploaded.
In both cases the image is processed and saved to file system (image format: jpeg - quality 92%).

Copy Code
protected void btnSave_Click(object sender, EventArgs e)
{
   
if (this.ImageUpload1.HasNewImage)
   {
       
this.ImageUpload1.SaveProcessedImageToFileSystem("~/MyImage.jpg", new JpegFormatEncoderParams(92));
   }
}

 

The control also provides the following events that allows to handle the modifications of the control state:

 The following example shows how to automatically save an image when is uploaded. The image is saved with the original file name and format.

Copy Code
protected void Page_Load(object sender, EventArgs e)
{
   ImageUpload1.ImageUpload +=
new SimpleImageUpload.ImageUploadEventHandler(this.ImageUpload1_ImageUpload);
}
protected void ImageUpload1_ImageUpload(object sender, SimpleImageUpload.ImageUploadEventArgs args)
{
   
// Get the source image file name
   
string sourceFileName = ImageUpload1.SourceImageClientFileName;
   
// Ensure to use an unique file name
   
string outputFilePah = CodeCarvings.Piczard.Helpers.IOHelper.GetUniqueFilePath("~/App_Data/",   sourceFileName);
   
// Save the image
   
ImageUpload1.SaveProcessedImageToFileSystem(outputFilePah);
}

For more information please see: How To Save/Load Images And Control State

 

See Also

©2013 Sergio Turolla. All Rights Reserved.