Angular JS File upload Content Disposition

Question

I am new to Angular JS and trying my hands on File upload. My requirement is to submit the multipart data on button click.

I read on ng-model not working on type="file", so I got to know the work around and i copied the directive. after working through that directive, while sending data there is no Content-disposition data set. I mean file name, content type etc which I want to read at server side. that is why I am getting null at headerOfFilePart.getFileName()

what I am doing wrong. what is the right way to achieve things i described above in Angular JS.

    <div ng-controller="uploadController">  
        <h2> Add Order </h2>
        Enter your Name: 
            <input type="text" name="name" ng-model="myName"/>
            <input type="file" fileread="vm.uploadme" />
            <input type="button" name="button" ng-click='uploadFile()'/>
    </div>

And this is my JS part

validationApp.controller('uploadController', function($scope,$http,$location,$window) {
    $scope.uploadFile = function() {

        var fd = new FormData();
        //Take the first selected file
        fd.append("file", $scope.vm.uploadme);
        fd.append("name", $scope.myName);

        uploadUrl = "http://localhost:8080/IPOCCService/rest/UserManager/upload1";
        $http.post(uploadUrl, fd, {
            withCredentials: true,
            headers: {'Content-Type': undefined },
            transformRequest: angular.identity
        }).
        success(function(data, status, headers, config) {
            alert(data);
        }).
        error(function(data, status, headers, config) {
            alert("failure");
        });

    };
});


validationApp.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                };
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    };
}]);

REST JAVA

    @POST
    @Path("/upload1")
    @Produces({ MediaType.APPLICATION_JSON} )
    @Consumes(MediaType.MULTIPART_FORM_DATA)
    public Response responseMsg3(FormDataMultiPart form) {
        System.out.println("File Uploaded");

        FormDataBodyPart filePart1 = form.getField("name");
        System.out.println(filePart1.getName() + " = " +filePart1.getValue());

        FormDataBodyPart filePart = form.getField("file");

        ContentDisposition headerOfFilePart =  filePart.getContentDisposition();
        InputStream fileInputStream = filePart.getValueAs(InputStream.class);
        String filePath = SERVER_UPLOAD_LOCATION_FOLDER + headerOfFilePart.getFileName();



        // save the file to the server
        saveFile(fileInputStream, filePath);
        String output = "File saved to server location : " + filePath;
        return Response.status(200).entity("true").build();
    }

Is the above code angular code is working fine for you? Is file being send to server? — Rahil Wazir
– Rahil Wazir, Commented Sep 30, 2014 at 9:43
everything is working fine except file name I am not getting at server side. — Jayesh
– Jayesh, Commented Sep 30, 2014 at 9:47

Khanh TO · Accepted Answer · 2014-09-30 12:26:33Z

1

When you use FileReader to read your files, only the contents of the file is assigned to your scope:

scope.fileread = loadEvent.target.result;

In your case, just simply assign the file to your scope:

link: function (scope, element, attributes) {
      element.bind("change", function (changeEvent) {
         scope.$apply(function(){
              scope.fileread = changeEvent.target.files[0];
         // changeEvent.target.files[0] is an HTML5 file object which contains ALL
         // information about the file including fileName, contents,...
         // scope.fileread is now assigned the selected file
         });   
     });
}

edited Sep 30, 2014 at 12:26

answered Sep 30, 2014 at 10:21

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jayesh Over a year ago

Hey Khanh, as I mentioned in my previous comment that I blindly copied the code without understanding what it is doing. can you please point a link where it is explained or can help understanding what the piece of code you mention does line by line.

Khanh TO Over a year ago

@Jayesh: See my updated answer to see if it's clearer

Khanh TO Over a year ago

@Jayesh: when you use FileReader, you read only the contents whereas changeEvent.target.files[0] has all information including contents, fileName,...

Jayesh Over a year ago

Thanks. I got your explanation. what is this line doing, modelSetter(scope, element[0].files[0]); where is modelSetter function declared?

Khanh TO Over a year ago

@Jayesh: You could read docs.angularjs.org/api/ng/service/$parse . In this case, I think it's not necessary, just assign to scope.fileread directly.

|

Kalhan · Accepted Answer · 2014-09-30 09:33:58Z

0

app.directive('fileRead', ['$parse', function ($parse) {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var model = $parse(attrs.fileread);
        var modelSetter = model.assign;

        element.bind('change', function(){
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.readAsDataURL(input.files[0]);
                }
            }
            readURL(this);
            scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
            });
        });
    }
};
}]);

<input type="file" file-read="vm.uploadme" />

this directive works for me.

answered Sep 30, 2014 at 9:33

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

4 Comments

Jayesh Over a year ago

Thanks ..... it is working... i just copied like a dumb.. doesn't know what it is actually doing. can you please point out the explanation of this directive or can explain please.

Khanh TO Over a year ago

why do you need to use readURL? I don't see the difference if we move this.

Jayesh Over a year ago

Hey Khanh, as I mentioned in my previous comment that I blindly copied the code without understanding what it is doing. can you please point a link where it is explained or can help understanding what the piece of code you mention does line by line.

Khanh TO Over a year ago

@Jayesh: A mistake I mean remove, not move: why do you need to use readURL? I don't see the difference if we remove this.

Mathieu Bertin · Accepted Answer · 2014-09-30 09:37:57Z

0

You can use the module ng-file-upload it's a directive that do everythinh about file upload See here

answered Sep 30, 2014 at 9:37

Mathieu Bertin

1,62411 silver badges11 bronze badges

1 Comment

Jayesh Over a year ago

Nice plugin... let me see.

Collectives™ on Stack Overflow

Angular JS File upload Content Disposition

3 Answers 3

6 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related