ウェブApiとangularJSのデータをアップロードする

Question

このblogのフォームデータの投稿方法と ファイルのガイドに従っています。サーバー上のディレクトリにファイルをアップロードしようとしています 以下の処理が完了していますが、動作していません。

は、このポスト機能

[HttpPost] 
     public async Task<HttpResponseMessage> UploadFile(HttpRequestMessage request) 
     { 
      String root = HttpContext.Current.Server.MapPath("~/Logo/"); 

      if (!request.Content.IsMimeMultipartContent()) 
      { 
       throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); 
      } 

      var data = await Request.Content.ParseMultipartAsync(); 
      var httpRequest = HttpContext.Current.Request; 

      if (data.Files.ContainsKey("file")) 
      { 

       var file = data.Files["file"].File;  // this is getting the file 
       var fileName = data.Files["file"].Filename; // this is getting the fileName 
       // System.Web.HttpPostedFile filePost = data.Files["file"]; 
       String a = root + "" + Path.GetFileName(fileName); 
       string b = a; 
       var postedFile = fileName;             // this is not working 
       var filePath = HttpContext.Current.Server.MapPath("~/Logo/" + fileName); // can someone help please 
       postedFile.SaveAs(filePath);            // I 

      } 

      if (data.Fields.ContainsKey("description")) 
      { 
       var description = data.Fields["description"].Value; 
      } 

      return new HttpResponseMessage(HttpStatusCode.OK) 
      { 
       Content = new StringContent("Thank you for uploading the file...") 
      }; 
     } 

は、どのように私は、サーバー上のディレクトリにファイルを保存することができますか？

Answer 1

現在、私は画像ファイルをアップロードするには、次のコードを使用していますが、それはまた、ファイルの任意のタイプのために働く：

public string UploadImage() 
    { 
     HttpRequestMessage request = this.Request; 
     if (!request.Content.IsMimeMultipartContent()) 
     { 
      throw new HttpResponseException(new HttpResponseMessage((HttpStatusCode.UnsupportedMediaType))); 
     } 
     var context = HttpContext.Current.Request; 
     if (context.Files.Count > 0) 
     { 
      var resourcePhoto = new PhotoHelper(HttpContext.Current.Server.MapPath("~")); 
      var file = context.Files.AllKeys.FirstOrDefault(); 
      var result = resourcePhoto.SaveResourceImage(context.Files[file], User.Identity.Name); 
      return result; 
     } 
     else 
     { 
      return null; 
     } 
    } 

そしてSaveResourceImageに、私は次の操作を行います

postedFile.SaveAs(resultPath); 

それはそれです。

Answer 2

サービス

app.factory('myService', ['$http', function ($http) { 
    return { 
     uploadFile: function(url, file) { 
      return $http({ 
       url: url, 
       method: 'POST', 
       data: file, 
       headers: { 'Content-Type': undefined }, //this is important 
       transformRequest: angular.identity //also important 
      }); 
     }, 
     otherFunctionHere: function(url, stuff) { 
      return $http.get(url); 
     } 
    }; 
}]); 

コントローラ

app.controller('MainCtrl', ['$scope', 'myService', function($scope, myService) { 

    $scope.uploadFile = function() { 
     var fileInput = document.getElementById('fileInput'); 
     fileInput.click(); 

     //do nothing if there's no files 
     if(fileInput.files.length === 0) return; 

     var file = fileInput.files[0]; 

     var payload = new FormData(); 
     payload.append("stuff", "some string"); 
     payload.append("file", file); 

     //use the service to upload the file 
     myService.uploadFile('/path/to/API', payload).then(function(response){ 
      //success, file uploaded 
     }).catch(function(response){ 
      //bummer 
     }); 
    } 

}]); 

C＃コントローラー

[HttpPost] 
public JsonResult UploadFile(string stuff, HttpPostedFileBase file) 
{ 
    string fileName = Path.GetFileNameWithoutExtension(file.FileName); 
    string extension = Path.GetExtension(file.FileName); 

    //save the file 
    try 
    { 
     file.SaveAs('somePath' + fileName + extension); 
    } 
    catch (IOException exc) 
    { 
     return Json(new { status = 'error', message = exc.Message }); 
    } 

    return Json('horray'); 
} 

Answer 3

私は調整することが可能でしたこのスニペットとそのサーバーにファイルを保存するための

var httpPostedFile = HttpContext.Current.Request.Files["file"];             // this is not working 
       var filePath = HttpContext.Current.Server.MapPath("~/Logo/" + fileName); // can someone help please 
       httpPostedFile.SaveAs(filePath); 

Answer 4

トリックは、あなたがMultipartFormDataStreamProviderを利用することができないとのコード。また、私はあなたがパラメーターの1つとして要求を渡す必要はないと思う。

string root = HttpContext.Current.Server.MapPath("~/App_Data"); 
var provider = new MultipartFormDataStreamProvider(root); 

そしてASP.NETの

// Read the form data. 
     await Request.Content.ReadAsMultipartAsync(provider); 

     // This illustrates how to get the file names. 
     foreach (MultipartFileData file in provider.FileData) 
     { 
      Trace.WriteLine(file.Headers.ContentDisposition.FileName); 
      Trace.WriteLine("Server file path: " + file.LocalFileName); 
     } 
     return Request.CreateResponse(HttpStatusCode.OK); 

This pageがそれを行う方法の良い概観を与えるとして、ファイルへのハンドルを取得することができます。..

Answer 5

私は角1.5でこの方法を試してみました。だから、私はフロントエンドにコントローラとリポジトリを持っています。私はローカルドライブにそれを保存しませんでした。しかしバッファがあり、私たちが望むところはどこでも保存できます。

コントローラー：

function submit() { 

     modelTemplateRepository.add(model.modelTemplate, model.file) 
      .then(function(response) { 
       if (response && response.status) { 
        if (response.status === 422) { 
         model.apiError = response.data; 
         model.isSubmitting = false; 
        } 
        else { 
         onSaved(response.data); 
        } 
       } 
      }); 
    } 

リポジトリ：

function add(modelTemplate, file) { 

     var fd = new FormData(); 

     fd.append('file', file); 
     fd.append('modelTemplate',angular.toJson(modelTemplate)); 

     return $http.post(config.ApiEndpoint + '/modeltemplate', fd, 
     { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
     }) 
      .then(addComplete) 
      .catch(function(data) { 
       return angular.fromJson(data); 
      }); 

     function addComplete(response, status, headers, config) { 
      return response; 
     } 
    } 

API：

[HttpPost] 
    [Route("api/modeltemplate")] 
    public async Task<IHttpActionResult> Post() 
    { 

     if (!Request.Content.IsMimeMultipartContent()) 
      throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); 

     var provider = new MultipartMemoryStreamProvider(); 

     await Request.Content.ReadAsMultipartAsync(provider); 

     var file = provider.Contents.First(x => x.Headers.ContentDisposition.Name == "\"file\""); 

     var filename = ""; 
     var buffer = new byte[0]; 

     if (file.Headers.ContentDisposition.FileName != null) 
     { 
      filename = file.Headers.ContentDisposition.FileName.Trim('\"'); 
      buffer = await file.ReadAsByteArrayAsync(); 
     } 

     var formContent = provider.Contents.First(x => x.Headers.ContentDisposition.Name == "\"modelTemplate\""); 
     Task<string> stringContentsTask = formContent.ReadAsStringAsync(); 
     var stringContents = stringContentsTask.Result; 
     var dto = Newtonsoft.Json.JsonConvert.DeserializeObject<dynamic>(stringContents); 

     var result = ApiHelper.Add<dynamic>("modeltemplate", dto); 

     return Ok(result); 
    }