우선 서버 만들기는 아래 포스팅을 참고한다.
2017/11/27 - [C#.NET/C#] - 카카오 쳇봇 만들기 - 2 (C# 서버 만들기)
2017/11/27 - [C#.NET/C#] - 카카오 쳇봇 만들기 - 3 (C# 서버 만들기)
서버쪽 코드
#region PostUpLoadImage
[Route("api/Files/Upload")]
public async Task<string> PostUpLoadImage()
{
try
{
var httpRequest = HttpContext.Current.Request;
if (httpRequest.Files.Count > 0)
{
foreach (string file in httpRequest.Files)
{
var postedFile = httpRequest.Files[file];
var fileName = postedFile.FileName.Split('\\').LastOrDefault().Split('/').LastOrDefault();
var filePath = HttpContext.Current.Server.MapPath("~/Uploads/" + fileName);
postedFile.SaveAs(filePath);
return "/Uploads/" + fileName;
}
}
}
catch (Exception exception)
{
return exception.Message;
}
return "no files";
}
#endregion
Xamarin Forms
Nuget 에서 Xam.Plugin.Media 설치
xaml 코드
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MiGong.TestPage">
<ContentPage.Content>
<StackLayout>
<Label Text="File Upload"
HorizontalOptions="Center" TextColor="Black" FontSize="20"/>
<Button Text="Pick Photo"
BackgroundColor="Teal" TextColor="White" FontSize="20" Clicked="PickPhoto_Clicked"/>
<Button Text="Take Photo"
BackgroundColor="Navy" TextColor="White" FontSize="20" Clicked="TakePhoto_Clicked"/>
<Image x:Name="FileImage" WidthRequest="400" HeightRequest="220"/>
<Label x:Name="LocalPathLabel" TextColor="Black" FontSize="18"/>
<Button Text="Upload Photo"
BackgroundColor="Purple" TextColor="White" FontSize="20" Clicked="UploadFile_Clicked"/>
<Label x:Name="RemotePathLabel" FontSize="20" TextColor="Black"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
xaml.cs 코드 - 동작은 간단하다 파일을 선택하거나 카메라를 찍어서 서버에 해당 파일을 업로드한다.
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class TestPage : ContentPage
{
private MediaFile _mediaFile;
public TestPage ()
{
InitializeComponent ();
}
private async void PickPhoto_Clicked(object sender, EventArgs e)
{
await CrossMedia.Current.Initialize();
if (!CrossMedia.Current.IsPickPhotoSupported)
{
await DisplayAlert("No PickPhoto", ":( No PickPhoto available.", "OK");
return;
}
_mediaFile = await CrossMedia.Current.PickPhotoAsync();
if (_mediaFile == null)
return;
LocalPathLabel.Text = _mediaFile.Path;
FileImage.Source = ImageSource.FromStream(() =>
{
return _mediaFile.GetStream();
});
}
private async void TakePhoto_Clicked(object sender, EventArgs e)
{
await CrossMedia.Current.Initialize();
if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
{
await DisplayAlert("No Camera", ":( No camera available.", "OK");
return;
}
_mediaFile = await CrossMedia.Current.TakePhotoAsync(new StoreCameraMediaOptions
{
Directory = "Sample",
Name = "myImage.jpg"
});
if (_mediaFile == null)
return;
LocalPathLabel.Text = _mediaFile.Path;
FileImage.Source = ImageSource.FromStream(() =>
{
return _mediaFile.GetStream();
});
}
private async void UploadFile_Clicked(object sender, EventArgs e)
{
var content = new MultipartFormDataContent();
content.Add(new StreamContent(_mediaFile.GetStream()),
"\"file\"",
$"\"{_mediaFile.Path}\"");
var httpClient = new HttpClient();
var uploadServiceBaseAddress = "http://localhost:12214/api/Files/Upload";
var httpResponseMessage = await httpClient.PostAsync(uploadServiceBaseAddress, content);
RemotePathLabel.Text = await httpResponseMessage.Content.ReadAsStringAsync();
}
}
안드로이드쪽 MainActivity.cs 의 아래 굵은 부분 코딩 추가
{
protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(bundle);
CrossCurrentActivity.Current.Init(this, bundle);
global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App());
}
public override void OnRequestPermissionsResult(int requestCode, string[] permissions, Android.Content.PM.Permission[] grantResults)
{
Plugin.Permissions.PermissionsImplementation.Current.OnRequestPermissionsResult(requestCode, permissions, grantResults);
}
}
AssemblyInfo.cs 파일에 아래 코드 추가
[assembly: UsesFeature("android.hardware.camera.autofocus", Required = false)]
매니패스트 권한을 부여한다.
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
서버쪽에 사이트 루트에 Uploads 폴더를 만든다.
위 까지 하면 파일 선택하여 업로드가 가능하다.
카메라를 사용하려면 좀더 설정이 필요하다.
AndroidManifest.xml 에 아래 내용추가
<provider android:name="android.support.v4.content.FileProvider"
android:authorities="${applicationId}.fileprovider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths"></meta-data>
</provider>
</application>
안드로이드 쪽 프로젝트에 아래 처럼 Resources 폴더 밑에 xml 폴더를 만들고 file_paths.xml 을 만들고
내용은 아래처럼 작성
<paths xmlns:android="http://schemas.android.com/apk/res/android">
<!--
<external-path name="my_images" path="Android/data/com.example.package.name/files/Pictures" />
<external-path name="my_movies" path="Android/data/com.example.package.name/files/Movies" />
-->
<external-files-path name="my_images" path="Pictures" />
<external-files-path name="my_movies" path="Movies" />
</paths>
추가 자세한 사항은 아래 링크를 참고
https://github.com/jamesmontemagno/MediaPlugin
