How to upload file, delete files using angularjs?

[spacer height =”5px”]

How to upload file, delete files using angularjs? 

 

 

 

 (function () {

    "use strict"

 

    var fileUploadModule = ApplicationConfiguration.registerModule('FileUpload', ['ngRoute', 'ui.sortable']);

 

    fileUploadModule

 .factory('FileUploadService', ['$http', '$rootScope',

function ($http, $rootScope) {

 

     var fileUploadService = {};

       fileUploadService.getUploadedFile =

function (skuCode) {

     return $http.get('api/FileUpload/GetItemFiles', {

            params: {

                uniqueCodeOrId: skuCode

            }

        });

    };

 

     fileUploadService.deleteImageFile = function (fileType, skuCode, fileName) {

         return $http.post('api/FileUpload/DeleteFile',

       {

           FileType: fileType,

           UniqueCodeOrId: skuCode,

           FileName: fileName

       });

       };

 

     fileUploadService.updateImageSequence = function (fileType, skuCode, files) {

         return $http.post('api/FileUpload/UpdateSequence',

       {

           FileType: fileType,

           UniqueCodeOrId: skuCode,

           Files: files

       });

       };

 

     return fileUploadService;

   }]);

 

 

    fileUploadModule.controller('uploadImagePDFCtrl',

 ['$scope',

'$location',

'$modalInstance',

'FileUploadService',

"itemDetails",

function ($scope, $location, $modalInstance, fileUploadService, itemDetails) {

     if (itemDetails.Item)

         $scope.Item = itemDetails.Item;

 

     else

         $scope.category = itemDetails;

 

     $scope.initialize = function () {

         if ($scope.Item != null) {

             fileUploadService.getUploadedFile($scope.Item.SkuCode).success(

function (data) {

       $scope.PdfFile = data.PdfFile;

     if ($scope.PdfFile != null)

         $scope.PdfFile.ImagePath = $scope.PdfFile.ImagePath + '?' + new Date().getTime();

 

       $scope.ThumbnailFile = data.ThumbnailFile;

     if ($scope.ThumbnailFile != null)

         $scope.ThumbnailFile.ImagePath = $scope.ThumbnailFile.ImagePath + '?' + new Date().getTime();

 

       $scope.AdditionalFiles = data.AdditionalFiles;

   });

         }

         else {

             $scope.CategoryFile = {};

             $scope.CategoryFile.ImageAvailable = $scope.category.ImageAvailable;

             $scope.CategoryFile.ImagePath = $scope.category.ImagePath;

             if ($scope.CategoryFile.ImageAvailable)

                 $scope.CategoryFile.ImagePath = $scope.CategoryFile.ImagePath;

             else

                 $scope.CategoryFile.ImagePath = null;

 

         }

 

     };

 

     $scope.deleteImage = function (fileType, fileName) {

         if (fileType == 'CategoryImg') {

             fileUploadService.deleteImageFile(fileType, $scope.category.CategoryId, fileName)

                    .success(function (data) {

                        $scope.CategoryFile = null;

                    });

         }

         else {

             fileUploadService.deleteImageFile(fileType, $scope.Item.SkuCode, fileName)

                    .success(function (data) {

                        if (fileType == 'Pdf') {

                            $scope.PdfFile = null;

                        }

                        else if (fileType == 'ThumbnailImg') {

                            $scope.ThumbnailFile = null;

                        }

                        else if (fileType == 'AdditionalImg') {

                            for (var i = 0; i < $scope.AdditionalFiles.length; i++) {

                                if ($scope.AdditionalFiles[i].Name == fileName) {

                                    $scope.AdditionalFiles.splice(i, 1);

                                }

                            }

                        }

                    });

         }

         $scope.ImageDetails = '';

     };

 

     $scope.fileUploadStatus = function (data, fileType) {

         $scope.ImageDetails = '';

         $scope.data = JSON.parse(data);

 

         $scope.ImageDetails = $scope.data;

         $scope.ImageDetails.FileType = fileType;

 

         if ($scope.data.Messages.length > 0) {

             $scope.ImageDetails.Messages = $scope.data.Messages;

             $scope.$apply();

         }

         else {

             if (fileType == 'Pdf') {

                 $scope.PdfFile = $scope.ImageDetails.UploadedFiles[0];

                 $scope.PdfFile.ImagePath = $scope.PdfFile.ImagePath + '?' + new Date().getTime();

             }

             else if (fileType == 'ThumbnailImg') {

                 $scope.ThumbnailFile = $scope.ImageDetails.UploadedFiles[0];

                 $scope.ThumbnailFile.ImagePath = $scope.ThumbnailFile.ImagePath + '?' + new Date().getTime();

             }

             else if (fileType == 'AdditionalImg') {

                 $scope.AdditionalFiles = $scope.ImageDetails.UploadedFiles;

             }

             else if (fileType == 'CategoryImg') {

                 $scope.CategoryFile = $scope.ImageDetails.UploadedFiles[0];

                 $scope.CategoryFile.ImagePath = $scope.CategoryFile.ImagePath;

             }

             $scope.$apply();

         }

     };

 

     $scope.isHorizontal = true;

     $scope.sortableOptions = {

         stop: function (e, ui) {

             fileUploadService.updateImageSequence('AdditionalImg', $scope.Item.SkuCode, $scope.AdditionalFiles).success(

function (data) {

       $scope.AdditionalFiles = data.UploadedFiles;

   });

         },

 

         axis: 'x'

     };

 

     //Function - Which is responsible to close the opned Modal window and re-initialize the parent window

     $scope.cancel = function () {

         $modalInstance.close('close');

     };

 

     $scope.loading = false;

     $scope.upload_File = function (form, fileType) {

         if ($scope.loading) return;

         if (fileType == 'CategoryImg') {

             var action_url = 'api/FileUpload/UploadFile?FileType=' + fileType + '&UniqueCodeOrId=' + document.getElementById("CategoryId").value;

         }

         else

             var action_url = 'api/FileUpload/UploadFile?FileType=' + fileType + '&UniqueCodeOrId=' + document.getElementById("SkuCode").value;

 

         var content = '';

         var iframeId = '';

 

         var iframe = document.createElement("iframe");

         iframe.setAttribute("id", "upload_iframe");

         iframe.setAttribute("name", "upload_iframe");

         iframe.setAttribute("width", "0");

         iframe.setAttribute("height", "0");

         iframe.setAttribute("border", "0");

         iframe.setAttribute("style", "width: 0; height: 0; border: none;");

 

         // Add to document...

         document.body.appendChild(iframe);

         window.frames['upload_iframe'].name = "upload_iframe";

 

         iframeId = document.getElementById("upload_iframe");

 

         // Add event...

         var eventHandler = function () {

             content = '';

             if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);

             else iframeId.removeEventListener("load", eventHandler, false);

 

             // Message from server...

             if (iframeId.contentWindow) {

                 content = iframeId.contentWindow.document.body.innerHTML;

             }

             else if (iframeId.contentDocument) {

                 if (iframeId.contentDocument.body)

                     content = iframeId.contentDocument.body.innerText;

                 else

                     content = iframeId.contentDocument;

             }

             else if (iframeId.document) {

                 content = iframeId.document.body.innerText;

             }

 

             if (iframeId.parentNode) {

                 iframeId.parentNode.removeChild(iframeId);

             }

 

             if (content && content.trim() != '') {

                 $scope.fileUploadStatus(content, fileType)

             }

 

             if (fileType == 'Pdf')

                 document.getElementById("filePdf").value = '';

             else if (fileType == 'ThumbnailImg')

                 document.getElementById("fileThumbnailImg").value = '';

             else if (fileType == 'AdditionalImg')

                 document.getElementById("fileAdditionalFile").value = '';

             else if (fileType == 'CategoryImg')

                 document.getElementById("fileCategoryImg").value = '';

             $scope.loading = false;

         }

 

         if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);

         if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);

 

         // Set properties of form...

         form.setAttribute("target", "upload_iframe");

         form.setAttribute("action", action_url);

         form.setAttribute("method", "post");

         form.setAttribute("enctype", "multipart/form-data");

         form.setAttribute("encoding", "multipart/form-data");

 

         // Submit the form...

         form.submit();

         $scope.loading = true;

     };

}]);

 

})();

 

(Visited 127 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *