서버에 File Upload 하기

우선 서버 만들기는 아래 포스팅을 참고한다.

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 코드

<?xml version="1.0" encoding="utf-8" ?>
<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 의 아래 굵은 부분 코딩 추가

public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        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", Required = false)]
[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 에 아래 내용추가

 <application ...">
    <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  을 만들고

 

내용은 아래처럼 작성

<?xml version="1.0" encoding="utf-8" ?>
  <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