1

I am using Angularjs 1.5, and trying to upload multiple files but in http request unable to send file data to java service, file data going as empty object.

I am using the following directory to upload the multiple files:

myForm.directive('ngFileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var model = $parse(attrs.ngFileModel);
            var isMultiple = attrs.multiple;
            var modelSetter = model.assign;
            element.bind('change', function () {
                var values = [];
                angular.forEach(element[0].files, function (item) {
                    var value = {                       
                        name: item.name,                       
                        size: item.size,                       
                        url: URL.createObjectURL(item),
                        // File Input Value 
                        _file: item
                    };
                    values.push(value);
                });
                scope.$apply(function () {
                    if (isMultiple) {
                        modelSetter(scope, values);
                    } else {
                        modelSetter(scope, values[0]);
                    }
                });
            });
        }
    };
}]);

On http request _file object going as empty object. 1. How can I send file data in _file object?

Query String Parameters:

param: { "files": [{"name":"arrowred.png","size":34516,"url":"blob:http://localhost:7001/24c4d435-3cab-410e-9bf4-8bdce7990f4d","_file":{}}]}

georgeawg
  • 48,608
  • 13
  • 72
  • 95
YYY
  • 3,440
  • 5
  • 20
  • 24
  • I don't think you can bind file to a model, so it's empty. But sending it should be fine; all of your files are in `values` array. So just send that to your back-end – Aleksey Solovey Jun 12 '18 at 10:46
  • Hi Aleksy, thanks for your response, how can I save my file data, blob is temporary browser URL. how can I convert blob URL to data object? please help on this. – YYY Jun 12 '18 at 10:57
  • Don't convert the files to data URLs. Also don't use the `ng-` prefix for custom directives. The `ng-` prefix is reserved for core AngularJS directives. – georgeawg Jun 12 '18 at 22:24
  • @georgeawg thanks for your response, how can I convert blob URL to bite array in Java(EJB I am using) to save in DB? Please suggest. – YYY Jun 13 '18 at 11:12
  • See [How to POST binary files with AngularJS](https://stackoverflow.com/questions/45432354/how-to-post-binary-files-with-angularjs). Don't convert the file to anything. Send it directly. – georgeawg Jun 13 '18 at 14:11
  • Thanks for the update.. Now my problem is converting the blob URL to bite object in java. see my POST data below param: [{"name":"styles.css","size":80,"url":"blob:http://localhost:7001/1e52be56-dffd-4179-9f0a-991d73e72068","_file":{},"$$hashKey":"object:42"},{"name":"tsconfig.json","size":381,"url":"blob:http://localhost:7001/be82ec89-0162-4dc1-b86f-a839b6df8866","_file":{},"$$hashKey":"object:43"}] – YYY Jun 20 '18 at 07:04
  • @george I need to know how a rest service / Servlet can consume this request – YYY Jun 20 '18 at 10:44
  • @ georgeawg before marking as duplicate, please provide the solution. Its helpful to me. – YYY Jun 20 '18 at 11:26
  • I have written 26 answers about AngularJS file uploads and in none of them do I use `URL.createObjectURL`. If you want to upload a file to a server, DON'T CONVERT IT TO A DATA URL. Once you get the data properly to the server, then we can take a look at the server-side code. – georgeawg Jun 20 '18 at 14:45
  • @georgeawg thanks for the reply, if I remove the URL.createObjectURL, the file is sending as a empty object in Query string parameters. param: {} – YYY Jun 21 '18 at 10:44

0 Answers0