OutPut: on the iOS Apps
Introduction
This is above the list of the uploaded photo with the gallery and takes the photo with the camera in xamarin form with ios iPhone app with the web rest full API on the server-side
Prerequisites
- Xamarin Forms
- Xamarin Forms With camera or gallery
- Before you can start uploading Image to Web Server, make sure your iOS app and android are connected to a web API with the help of the rest full services.
- Image upload with the multipart.
Note
It's a very important role play of every developer life to upload the image on the server-side uploading the document or photos with the customer registration or image uploaded in any application.
Xmal code
Add ContentPage
<ScrollView>
<StackLayout Margin="25,25,25,25" Spacing="10" Padding="10">
<!--<Button Text="Take Photo"/>
<Button />-->
<Button IsVisible="false" x:Name="takeVideo" Text="Take Video"/>
<Button IsVisible="false" x:Name="pickVideo" Text="Pick Video"/>
<Grid Margin="0,0,0,0"
x:Name="feedbackPopup1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Opacity="0.8" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout>
<Button x:Name="takePhoto" Text="Take Photo" TextColor="White" Grid.Column="0"
HeightRequest="62" WidthRequest="201" HorizontalOptions="Start" VerticalOptions="Fill" BackgroundColor="#2C1856" Margin="0,0,0,58"/>
</StackLayout>
<Button x:Name="pickPhoto" Text="Pick Photo" TextColor="White" Grid.Column="1"
HeightRequest="62" WidthRequest="201" HorizontalOptions="End" VerticalOptions="Fill"
BackgroundColor="red" Margin="0,0,0,58" />
</Grid>
</Grid>
<ProgressBar x:Name="progress" Progress="0.0" IsVisible="False" />
<Frame x:Name="ImageFram" IsVisible="false" OutlineColor="#561842">
<Image x:Name="image" IsVisible="false"/>
</Frame>
<StackLayout>
<Button Text="Uplode" TextColor="White" HeightRequest="62" WidthRequest="201" Clicked="HandelUplode_Image1"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand"
BackgroundColor="#3DBDA0" Margin="0,0,0,62"/>
</StackLayout>
</StackLayout>
</ScrollView>
C# Code
please add some namespace on your all project like iOS, android
using CoreGraphics;
using Newtonsoft.Json.Linq;
using Plugin.FileUploader;
using Plugin.FileUploader.Abstractions;
using Plugin.Media;
using Plugin.Media.Abstractions;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
-----------------------------------------------
takePhoto.Clicked += async (sender, args) =>
{
if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
{
await DisplayAlert("No Camera", ":( No camera available.", "OK");
return;
}
var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
{
PhotoSize = Plugin.Media.Abstractions.PhotoSize.Medium,
Directory = "Sample",
Name = "test.jpg"
});
if (file == null)
return;
filePath = file.Path;
paths.Enqueue(filePath);
image.IsVisible = true;
ImageFram.IsVisible = true;
image.Source = ImageSource.FromStream(() =>
{
stream = file.GetStream();
imagePath = file.Path;
file.Dispose();
return stream;
});
};
pickPhoto.Clicked += async (sender, args) =>
{
if (!CrossMedia.Current.IsPickPhotoSupported)
{
await DisplayAlert("Photos Not Supported", ":( Permission not granted to photos.", "OK");
return;
}
var file = await Plugin.Media.CrossMedia.Current.PickPhotoAsync(new Plugin.Media.Abstractions.PickMediaOptions
{
PhotoSize = Plugin.Media.Abstractions.PhotoSize.Medium
});
if (file == null)
return;
filePath = file.Path;
paths.Enqueue(filePath);
image.IsVisible = true;
ImageFram.IsVisible = true;
image.Source = ImageSource.FromStream(() =>
{
stream = file.GetStream();
imagePath = file.Path;
var InputStream = stream;
return stream;
});
};
async void HandelUplode_Image1(object sender, EventArgs eventArgs)
{
string path = imagePath;
string filename = path.Substring(path.LastIndexOf("/") + 1);
string fileWOExtension;
if (filename.IndexOf(".") > 0)
{
fileWOExtension = filename.Substring(0, filename.LastIndexOf("."));
}
else
{
fileWOExtension = filename;
}
var _url = "www.your web api .com";
var Access_Token = Application.Current.Properties["Access_token"];
HttpClient httpClient = new HttpClient();
MultipartFormDataContent form = new MultipartFormDataContent();
form.Add(new StringContent(DocumentTypeId1), "DocumentID");
form.Add(new StringContent(Access_Token.ToString()), "AccessToken");
form.Add(new StringContent(DocumentTypeName1), "DocumentName");
form.Add(new StringContent(otherdocumentname1), "OtherName");
form.Add(new StringContent(remarks1), "Remark");
byte[] imagebytearraystring = ImageFileToByteArray(imagePath);
form.Add(new ByteArrayContent(imagebytearraystring, 0, imagebytearraystring.Count()), "File", filename);
AIM.isloading = true;
AI.IsRunning = true;
AI.IsVisible = true;
HttpResponseMessage response = await httpClient.PostAsync(_url, form);
response.EnsureSuccessStatusCode();
httpClient.Dispose();
string sd = response.Content.ReadAsStringAsync().Result;
if (sd != null)
{
JObject jObject = JObject.Parse(sd);
Status = null;
Result = null;
foreach (JProperty singleProp in jObject.Properties())
{
string name = singleProp.Name;
string value = singleProp.Value.ToString();
if (singleProp.Name == "Status")
{
Status = singleProp.Value.ToString();
}
}
}
AIM.isloading = false;
AI.IsRunning = false;
AI.IsVisible = false;
if (Status == "success")
{
await DisplayAlert("Uploading Information ", Status, "OK");
}
else
{
await DisplayAlert("Alert", Status, "OK");
}
}
private byte[] ImageFileToByteArray(string path)
{
FileStream fs = File.OpenRead(path);
byte[] bytes = new byte[fs.Length];
fs.Read(bytes, 0, Convert.ToInt32(fs.Length));
fs.Close();
return bytes;
}
-----------------------------end of the code -----------------------------
This function has uploaded the image with some text value like name or document id, other information and remark data save on the single time response with us.
Good
ReplyDeleteGrateful
ReplyDelete