http post with formdata and other field control not going to java

Question

I am new to AngularJs. I am trying to upload a image file (.bmp,.jpg, etc) along with its label through Jax-RS post rest API but my control in not going into java post api from my angularjs controller.

While debugging the control is not coming into java file. Could you please help to understand what si wrong in my code.

myfile.html

Label of File: <input type="text" name="iconlabel" data-ng-model="imporLabelName"><br>
Import a File: <input type="file" id="myFile" name="myfile" data-file-model="myfile"><br>
<button type="button" class="btn btn-primary pull-right" data-ng-click="uploadfile();">Submit
                </button>

myFileController

define([ '{angular}/angular' ], function(angular) {
var module = angular.module('myFile', [ 'ngResource', 'colorpicker-dr' ]);

module.controller('myFileController', [ '$scope', '$sce', '$http', '$location', '$window', 'w20MessageService'
,function($scope, $sce, $http, $location, $window, w20MessageService) {
    
            var config = { 
                    headers: {
                        "Content-Type": undefined,
                    }
                };
       
            /*** Modale for MyFile **/
            $scope.openMyFile = function() {
                $("#myfile").modal("show");
            };
            
            $scope.uploadfile = function() {
                $scope.file = document.getElementById('myFile').files[0];
                alert('LabelName = '+$scope.imporLabelName);
                
                var formData = new $window.FormData();
                formData.append("label", $scope.imporLabelName);
                formData.append("file", $scope.file);
                alert('File = '+$scope.file);
                var url = "uploadfile/label="+$scope.imporLabelName;
                alert("URL = "+url);
                $http.post(url,$scope.formData,config).success(function(response) {
                    $scope.result = "SUCCESS";
                }).error(function(response, status) {
                    if (status === 400) {
                        w20MessageService.addMessageErreur(data.message, "msgGererParam");
                    } else {
                        w20MessageService.addMessageErreur("eox.message.error.load.traitement", "msgGererParam");
                    }
                });
              $("#myfile").modal("hide");
            };
        } ]);
return {
    angularModules : [ 'digitalJes' ]
};
});

java api code

@POST
@Path("/uploadfile/{label}")
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces(MediaType.TEXT_PLAIN)
public Response uploadFile(@PathParam("label") String label, @FormDataParam("file") InputStream fileInputStream,
        @FormDataParam("file") FormDataContentDisposition fileInputDetails) {

    CacheControl cc = new CacheControl();
    cc.setNoCache(true);
    return Response.ok(uploadFileUtil.uploadFile(label, fileInputStream, fileInputDetails)).cacheControl(cc).build();
}

Error Code and Error Message

HTTP Status 400 – Bad Request

The server cannot or will not process the request due to something that is perceived to be a client error (eg, malformed request syntax, invalid request message framing, or deceptive request routing).

Answer 1

 @FormDataParam("file") InputStream fileInputStream,
 @FormDataParam("file") FormDataContentDisposition fileInputDetails

Seems both of the fileInputStream and fileInputDetails variables are initializing from file parameter. Also in html the field is

...
Import a File: <input type="file" id="myFile" name="myfile" data-file-model="myfile"><br>

Here id="myFile" and name="myfile" and you are receiving those as "@FormDataParam("file")" .

Answer 2

Changes i did to get this work.

Java File.

@POST
@Path("/save")
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces(MediaType.TEXT_PLAIN)
public Response uploadFile(@FormDataParam("jesId") Integer jesId, @FormDataParam("label") String label,
        @FormDataParam("file") InputStream uploadedInputStream, @FormDataParam("file") FormDataContentDisposition fileDetails) {

    CacheControl cc = new CacheControl();
    cc.setNoCache(true);
    return Response.ok(uploadUtility.uploadFile(jesId, label, uploadedInputStream, fileDetails, context)).cacheControl(cc).build();
}

JS File

$scope.uploadfile  = function(jes) {

                /** Getting File from Form **/
                $scope.file = document.getElementById('myFile').files[0];

                /** Getting Label from Form **/
                var label = $scope.iconLabel;

                /** Validating form data **/
                $scope.result = $scope.validateData(label,$scope.file);

                if($scope.result == true){
                    /** Creating formdata object seeting form values **/
                    var formData = new $window.FormData();
                    formData.append("file", $scope.file);
                    formData.append("label", label);
                    formData.append("id", $scope.id);

                    /** Making service call to REST API **/
                    $http.post("uploadfile/save",formData,config).success(function(response) {
                        $scope.result = "SUCCESS";
                    }).error(function(response, status) {
                        if (status === 400) {
                            w20MessageService.addMessageErreur(data.message, "msgGererParam");
                        } else {
                            w20MessageService.addMessageErreur("eox.message.error.load.traitement", "msgGererParam");
                        }
                    });
                }
            };