0

I have written code which will take base64 data from angularjs and pass into.Net for Binary conversion. It is working fine in my system. I have deployed code into server. and Byte array is going NULL but alert msg is coming successfull. But If i am putting debugger in console, It is working perfectly menaing byte content is going. Not understanding what I did wrong. First I am putting fileobject into rootscope variable while browsing. and upload button hit parsing the file and saving into db. Please help me. HTML Code

<div class="col-sm-4">  
<input filestyle="" file-model = "signatureImage" name="signatureImage" type="file"  accept=".png" />                                   
 </div>
<div class="col-sm-2">
<button type="button" ng-click="apc.uploadFile()" class="btn btn-info btn-xs"><span class="icon-cloud-upload mr"></span>Upload
</button>
</div>

In Angularjs,

(function () {
    'use strict';

    angular
        .module('ba')
        .directive('fileModel', ['$parse','$rootScope', function ($parse, $rootScope) {           
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var model = $parse(attrs.fileModel);
                var modelSetter = model.assign;               
                element.bind('change', function () {                    
                    scope.$apply(function () {                        
                        var UserInfoID = sessionStorage.getItem('UserInfoId'); 
                        var DataVariable = "signatureImage_" + UserInfoID;                        
                        $rootScope[DataVariable] = element[0].files[0];
                       //modelSetter(scope, element[0].files[0]);
                    });
                });
            }
        };
    }]);
})();

(function () {
    'use strict';

    angular
        .module('ba')
        .controller('APC', APC);

    APC.$inject = ['$http', '$scope', 'ngDialog', 'DTOptionsBuilder', '$filter', '$rootScope', '$timeout', '$localStorage'  ];
    function APC($http, $scope, ngDialog, DTOptionsBuilder, $filter, $rootScope, $timeout, $localStorage) {

  vm.uploadFile= function () {
            var UserInfoID = sessionStorage.getItem('UserInfoId');
            var DataVariable = "signatureImage_" + UserInfoID;
            var file = $rootScope[DataVariable];
            var UserName = vm.NewPersonInfo.UserName;            
            var reader = new FileReader();            
            reader.readAsDataURL(file);
            var fileData = reader.result;
            fileData = fileData.replace("data:image/png;base64,", "");           
            var uploadData = {
                    Name: file.name,
                    FileType: fileData,
                    UserInfoID: UserName
                }
            $http.post('api/AP/USA', uploadData)
                    .then(
                    function (response) {
                        if (response != null && response.data != null) {
                            alert("Digital Successfully Uploaded.");
                        }
                        else {
                            alert("Digital Successfully Upload Failed!!!");
                        }
                    });
        };
 }
})();

and .net code is as follows

[HttpPost]
        public DataSet USA(apc.ImageModel imageModel)
        {
            ResultSet dsSaveDoc = null;

            imageModel.Bytes = Convert.FromBase64String(imageModel.FileType);
            imageModel.FileType = "image/png";
//DB Calling
}

Now, here imageModel.Bytes is going NULL without putting debugger, If i am putting debugger it is working fine in server.

Please help me....

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Ujjwal Das
  • 13
  • 5
  • It is better to send files directly than to convert them to base64. If you must use base64, the FormData API is more efficient. See [How to POST binary files with AngularJS (with upload DEMO)](https://stackoverflow.com/questions/45432354/how-to-post-binary-files-with-angularjs-with-upload-demo/45433364#45433364) – georgeawg Aug 24 '18 at 00:29
  • A directive that stores its results on $rootScope is not wise. Consider using a directive that works with the ngModelController. See [ng-model for (with directive DEMO)](https://stackoverflow.com/questions/17063000/ng-model-for-input-type-file-with-directive-demo/43074638#43074638). See also [$rootScope exists, but it can be used for evil](https://stackoverflow.com/questions/44836870/binding-angularjs-data-outside-the-ng-view/44838375#44838375). – georgeawg Aug 24 '18 at 00:31
  • Because from APC controller scope, I am not getting file Object from setting value from directive scope. I have checked Scope id is different for both the scenario, so i used for rootscope to avoid it. but When i am putting debugger in "vm.uploadFile" it is working perfectly in Chrome as well as IE. but removing debugger same code sending NULL in Stored procedure...I am saving BLOB (varbinary) into DB. – Ujjwal Das Aug 24 '18 at 01:12
  • Read [What are the nuances of scope prototypal / prototypical inheritance in AngularJS?](https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs). New AngularJS developers often do not realize that `ng-repeat`, `ng-switch`, `ng-view`, `ng-include` and `ng-if` all create new child scopes, so the problem often shows up when these directives are involved. – georgeawg Aug 24 '18 at 01:23

0 Answers0