mercredi 2 décembre 2015

how to save two file from two different html file upload in same function using angularjs and MVC3

here is my all code i am trying to upload small image and large image separate but angularjs not let me allow to do this, it only taking one file but not taking other one. plz anyone help with this. thanks in advance.

<div ng-app="eventModule" >
<div ng-controller="eventController">
<div>
<span >Thumbnail Image</span>
<input type="file" id="fileToUpload" onchange="angular.element(this).scope().selectThumbnail(this.files)"  accept="image/*"  />
</div>
<div>
<span >Large Image</span>
<input type="file" onchange="angular.element(this).scope().selectLargeImage(this.files)" class="LargeImageSubCategory" />
</div>
</div>
<span  data-ng-click="SaveFile()">Submit</span>
</div>

<script>
    var eventModule = angular.module('eventModule', []);
    eventModule.controller('eventController', function ($scope,ArticleService, $http, $sce) {
        $scope.selectThumbnail = function (file) {
            $scope.SelectedThumbnail = file[0];
        }

        $scope.selectLargeImage = function (file) {
            $scope.SelectedLargeImage = file[0];
        }

        $scope.SaveFile = function () {
            $scope.IsFormSubmitted = true;
            $scope.Message = "";
            ArticleService.UploadFile($scope.SelectedThumbnail, $scope.SelectedLargeImage).then(function (d) {
                alert(d.Message);
                ClearForm();
            }, function (e) {
                alert(e);
            });
         };
    });
    eventModule.service("ArticleService", function ($http, $q) {
        this.UploadFile = function (Thumbnail, LargeImage, TitleHeading, Topic, SmallDesc, LargeDesc) {
            var formData = new FormData();
            formData.append("Thumbnail", Thumbnail);
            formData.append("LargeImage", LargeImage);
            // here when i am trying to send two files so controller is not called
            //and function is breaking and alert is comming "File Upload Failed"
            formData.append("TitleHeading", TitleHeading);
            formData.append("Topic", Topic);
            var defer = $q.defer();
            $http.post("/Articles/SaveFiles", formData,
            {
               withCredentials: true,
               headers: { 'Content-Type': undefined },
               transformRequest: angular.identity
            }).success(function (d) {
               defer.resolve(d);
            }).error(function () {
               defer.reject("File Upload Failed!");
            });
            return defer.promise;
         }
    });
</script>

//And My ArticlesController.cs code is

[HttpPost]
public JsonResult SaveFiles(string TitleHeading, string Topic)
{
string Message, fileName, actualFileName;
Message = fileName = actualFileName = string.Empty;
bool flag = false;
if (Request.Files != null)
{
var file = Request.Files[0];
actualFileName = file.FileName;
fileName = Guid.NewGuid() + Path.GetExtension(file.FileName);
int size = file.ContentLength;
try
{
file.SaveAs(Path.Combine(Server.MapPath("~/UploadedFiles"), fileName));
using (TCDataClassesDataContext dc = new TCDataClassesDataContext())
{
Article insert = new Article();
insert.ArticleId = Guid.NewGuid();
insert.TitleHeading = TitleHeading;
insert.SmallImagePath = fileName;
dc.Articles.InsertOnSubmit(insert);
dc.SubmitChanges();
Message = "File uploaded successfully";
flag = true;
}
}
catch (Exception)
{
Message = "File upload failed! Please try again";
}}
return new JsonResult { Data = new { Message = Message, Status = flag } };
}

Aucun commentaire:

Enregistrer un commentaire