0

I am trying to create a page using which I should be able to upload files from my machine to server using AngularJS and Java Servlet. I am sending the data to server using $http.post, and trying to read the file data sent using apache commons-fileupload, but the file data sent is not sent in multipart/form-data format due to which commons-fileupload is not detecting the file data on server side. If i send {headers:{'Content-Type':'multipart/form-data'}} as config parameter manually in the post request then it is throwing exception

Below is the html page and js file i am using

Html Page:

<!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/upload.js"></script>
    <head>
        <title>Admin</title>
    </head>
    <body ng-app="uploadApp" ng-controller="UploadCtrl">
        <form name="upload" class="form" data-ng-submit="addFile()">
            <p>Please specify a file, or a set of files:<br>
            <input type="file" name="file" onchange="angular.element(this).scope().attachedFile(this)" /></p>
            <button type="submit">Upload</button>

        </form>
    </body>
</html>

JS file:

var app=angular.module('uploadApp',[]);

app.controller('UploadCtrl', ['$scope','$http',function($scope,$http) {
    $scope.attachedFile = function(element) {
        $scope.$apply(function($scope) {
            $scope.file = element.files[0];   
        });     
        console.log('file attached');
    };

    $scope.addFile = function() {
        var url = '/upload';
        var fd = new FormData();        
        fd.append("file",$scope.file);          
        $http.post(url, fd)
        .success(function(data, status, headers, config) {
            console.log('success');
        })
        .error(function(data, status, headers, config) {
            console.log('error');
        })
    };
}])

I tried to analyse the issue by reading the request.InputStream on the server side and got data in below format

------WebKitFormBoundaryXXXXXXXXXXXXX
Content-Disposition: form-data; name="file"; filename="XXX.txt"
Content-Type: text/plain

filedata
------WebKitFormBoundaryXXXXXXXXXXXXX--

The issue seems that the FormData generated is not setting Content-Type: multipart/form-data, instead, it is defaulting based on the file extension due to which reading file on server side with commons-fileupload is not working.

Can anyone suggest a solution to this. Is there anyway I can set the content type to multipart/form-data in the FormData/request created or any alternate way/library to parse the received data on the server side

user3422841
  • 95
  • 1
  • 13
  • I am silly, but wouldn't just setting the enctype of the form work like it has done since long before angularjs existed? http://stackoverflow.com/questions/4526273/what-does-enctype-multipart-form-data-mean – Gimby Aug 25 '15 at 16:00
  • I tried adding the enctype in HTML but still it is giving the same issue – user3422841 Aug 25 '15 at 17:52
  • Did you try to create the most barebones HTML multipart form without any angular embedded and try to do a file upload that way? When you have that working, then add angular into the mix and see where it starts to stop working. – Gimby Aug 26 '15 at 06:35
  • Can you please help me how to do it. I am new to web application designing and made the above code using references from different sites. I tried using static html, but the limitation in that case would be I will be redirected to some different page i want to make the file uploadable on the same page. Tried using AJAX also but did not get proper/understandable code for it – user3422841 Aug 26 '15 at 15:27
  • I am not trained to help people who just copy/paste without investing the proper amount of research first, sorry. FileUpload has basic usage documentation that I found perfectly easy to understand as novice, I hope you can manage too. https://commons.apache.org/proper/commons-fileupload/using.html – Gimby Aug 26 '15 at 15:41

1 Answers1

0

Finally got it working by modifying the post request as below

$http.post(url, fd,{headers: {'Content-Type': undefined}})

Now i am able to read the files at the server side and save it using fileupload. Now i want to add some more key/value pair with the request like below

var fd = new FormData();        
fd.append("file",$scope.file);     
fd.append("ID","abcxxx");
$http.post(url, fd,{headers: {'Content-Type': undefined}})

I want to know how can i read this key/value pair sent along with the file data using commons-fileupload

user3422841
  • 95
  • 1
  • 13