Silverlight / WPF - image upload in wpf - Asked By sushant kumar kesari on 28-Sep-11 06:55 AM

hello frnd......


i want to how to upload image , and how to pass source for image. in wpf.

Please reply asap.
dipa ahuja replied to sushant kumar kesari on 28-Sep-11 06:59 AM
Step 1: Open VS 2010 and create a blank solution and  name it as ‘WPF_CustomControl’..
Step 2: To this solution, add a new WPF Custom Control Library Project and name it as ‘WPF40_FileUploadCustomControl’. This project will have ‘Themes’ folder containing ‘Generic.Xaml’. Also this project will contain ‘CustomControl1.cs’ code file. This file will contain necessary business logic of the control.
Step 3: Rename ‘CustomControl1.cs’ to ‘FileUploadCustomControl.cs’. Add the following code in ‘Generic.xaml’:
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WPF40_FileUploadCustomControl">
  <Style TargetType="{x:Type local:FileUploadCustomControl}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type local:FileUploadCustomControl}">
          <Border Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}">
            <StackPanel Orientation="Horizontal"
                      Width="200">
              <TextBox Name="TXT_FILE_NAME" Width="150"></TextBox>
              <Button Name="BTN_BROWSE_FILE" Width="50" Content="Browse"></Button>
            </StackPanel>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>
 
The above code defines only the control template which contains ‘StackPanel’, ‘TextBox’ and ‘Button’ visual elements. One important here is that since this is just a resource dictionary, you cannot define any event on the elements.
Step 4: Now it’s time to define the business logic. Make sure that in the ‘FileUploadCustomControl.cs’ file, the class ‘CustomControl1’ is renamed to ‘FileUploadCustomControl’. Also rename the constructor. The code in the constructor will be as below:
C#
static FileUploadCustomControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(FileUploadCustomControl), new FrameworkPropertyMetadata(typeof(FileUploadCustomControl)));
}
 
Suchit shah replied to sushant kumar kesari on 28-Sep-11 07:01 AM
In WPF, you can use Image control to display bitmap images as the following code shows:
XAML:
<Image Name="image"
/>

Codebehind:
Microsoft.Win32.OpenFileDialog dlg = new Microsoft.Win32.OpenFileDialog();
dlg.Filter = "All Image Files | *.*";
if (dlg.ShowDialog() == true)
{
image.Source = new BitmapImage(new Uri(dlg.FileName, UriKind.Absolute));
}

Riley K replied to sushant kumar kesari on 28-Sep-11 07:01 AM
Here is the code to upload file using byte array.



OpenFileDialog dlg = new OpenFileDialog();
dlg.Filter = "Excel Files (*.xls)|*.xls";
dlg.Multiselect = false;
if (dlg.ShowDialog() ?? false)
{
  //open the file as a stream
  using (Stream stream = dlg.File.OpenRead())
  {
  //put the stream in the BinaryReader
  BinaryReader binary = new BinaryReader(stream);
  //Read bytes from the BinaryReader and put them into a byte array.
  Byte[] File = binary.ReadBytes((int)stream.Length);
  
   AdminServiceClient adminClient = <get the proxy>;
  adminClient.UploadFileCompleted += <hook to completed event>
  adminClient.UploadFile(File);
  }
}

Refer this link

http://www.eggheadcafe.com/community/aspnet/56/10102213/upload-image-to-database---silverlight.aspx

http://forums.silverlight.net/t/64867.aspx

Regards

Anoop S replied to sushant kumar kesari on 28-Sep-11 07:06 AM
1. WCF + LINQ:
          are you going to store the image/file to database of to a physcial location to the server?
for either methods, you can expose a method in WCF which would accept a byte array as argument. so that you can accept the file/image as byte array. [This has its own size limitations. You have to adjust your binding configurations so that a acceptable size gets transferred. If you are in need of extremely large files/images, you have use some workarounds.]

UploadFile(byte[] content)
{
  // write the file to disk
  using (FileStream FileStream = new FileStream(tempFileName, FileMode.Create))
  {
  FileStream.Write(content, 0, content.Length);
  FileStream.Close();
  FileStream.Dispose();
  }
}


2. Silverlight:
Here is the code to upload file using byte array.

OpenFileDialog dlg = new OpenFileDialog();
dlg.Filter = "Excel Files (*.xls)|*.xls";
dlg.Multiselect = false;
if (dlg.ShowDialog() ?? false)
{
  //open the file as a stream
  using (Stream stream = dlg.File.OpenRead())
  {
  //put the stream in the BinaryReader
  BinaryReader binary = new BinaryReader(stream);
  //Read bytes from the BinaryReader and put them into a byte array.
  Byte[] File = binary.ReadBytes((int)stream.Length);
  
   AdminServiceClient adminClient = <get the proxy>;
  adminClient.UploadFileCompleted += <hook to completed event>
  adminClient.UploadFile(File);
  }
}
Reena Jain replied to sushant kumar kesari on 28-Sep-11 10:43 AM
Hi,

In WPF, you can get the byte array of a image as follows:

BitmapImage bitmapImage;
bitmapImage = new BitmapImage();

bitmapImage.BeginInit();

bitmapImage.StreamSource = System.IO.File.OpenRead(@"D:\1.jpg");

bitmapImage.EndInit();//now, the Position of the StreamSource is not in the begin of the stream.

byte[] imageData = new byte[bitmapImage.StreamSource.Length];

bitmapImage.StreamSource.Seek(0, System.IO.SeekOrigin.Begin);//very important, it should be set to the start of the stream
bitmapImage.StreamSource.Read(imageData, 0, imageData.Length);
// now, you have get the image bytes array, pass it as the parameter of a web service method

For the WCF part problem, you can consider positing it as WCF forum for better and quicker responses.
Windows Communication Foundation forum:
http://social.msdn.microsoft.com/Forums/en-US/wcf/threads