FileUpload with JAX-RS

Question

I try to do file upload from a JavaScript client to a JAX-RS Java server.

I use the following REST upload function on my server:

@POST
@Produces('application/json')
UploadDto upload(
        @Context HttpServletRequest request,
        @QueryParam("cookie") String cookie) {

    def contentType
    byte [] fileBytes

    log.debug "upload - cookie: "+cookie

    try{
        if (request instanceof MultipartHttpServletRequest) {
            log.debug "request instanceof MultipartHttpServletRequest"

            MultipartHttpServletRequest myrequest = request
            CommonsMultipartFile file = (CommonsMultipartFile) myrequest.getFile('file')
            fileBytes = file.bytes
            contentType = file.contentType
            log.debug ">>>>> upload size of the file in byte: "+ file.size
        }
        else if (request instanceof SecurityContextHolderAwareRequestWrapper) {
            log.debug "request instanceof SecurityContextHolderAwareRequestWrapper"

            SecurityContextHolderAwareRequestWrapper myrequest = request

            //get uploaded file's inputStream
            InputStream inputStream = myrequest.inputStream

            fileBytes = IOUtils.toByteArray(inputStream);
            contentType = myrequest.getHeader("Content-Type")
            log.debug ">>>>> upload size of the file in byte: "+ fileBytes.size()
        }
        else {
            log.error "request is not a MultipartHttpServletRequest or SecurityContextHolderAwareRequestWrapper"
            println "request: "+request.class
        }
    }
    catch (IOException e) {
        log.error("upload() failed to save file error: ", e)
    }
}

On the client side I send the file as follows:

var str2ab_blobreader = function(str, callback) {
    var blob;
    BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder
            || window.BlobBuilder;
    if (typeof (BlobBuilder) !== 'undefined') {
        var bb = new BlobBuilder();
        bb.append(str);
        blob = bb.getBlob();
    } else {
        blob = new Blob([ str ]);
    }
    var f = new FileReader();
    f.onload = function(e) {
        callback(e.target.result)
    }
    f.readAsArrayBuffer(blob);
}

var fileName = "fileName.jpg";
var contentType = "image/jpeg";
if (file.type.toString().toLowerCase().indexOf("png") > -1) {
    fileName = "fileName.png";
    contentType = "image/png";
}

var xhrNativeObject = new XMLHttpRequest();
var urlParams = ?test=123;
xhrNativeObject.open("post", url + urlParams, true);
xhrNativeObject.setRequestHeader("Content-Type", contentType);

xhrNativeObject.onload = function(event) {

    var targetResponse = event.currentTarget;
    if ((targetResponse.readyState == 4)
            && (targetResponse.status == 200)) {
        var obj = JSON.parse(targetResponse.responseText);
        console.log(obj.uploadImageId);
    } else {
        console.log("fail");
    }
}

var buffer = str2ab_blobreader(file, function(buf) {
    xhrNativeObject.send(buf);
});

When I use the code in my Grails Controller it worked well but when I use it in a REST Resource I always get: request is not a MultipartHttpServletRequest or SecurityContextHolderAwareRequestWrapper

The log output is

request: com.sun.proxy.$Proxy58

The send a file blob from JavaScript I use XMLHttpRequest which contains the blob in the body and some query parameters.

How can I make JAX-RS file upload working? How do I receive some additional query params with my POST request?

Answer 1

Add enctype="multipart/form-data" in your form submitter code and @Consumes(MediaType.MULTIPART_FORM_DATA_TYPE) on your @POST method so that we know we are submitting a multipart file and the rest api can consume it. Your rest api method could look like

@POST
@Path("/uploadfile")
@Consumes(MediaType.MULTIPART_FORM_DATA)
public Response upload(
    @FormDataParam("file") InputStream fileInputStream, 
    @FormDataParam("file") FormDataContentDisposition disposition) {
        //...
}

or

 @POST
 @Path("/uploadfile")
 public void post(File file) {
    Reader reader = new Reader(new FileInputStream(file));
    // ... 
 }

This will create a temporary file on server. It reads from the network and saves into the temporary file.

To program defensively, I would check the content type metadata of the file being uploaded.

Answer 2

Here is what we did to upload file (images in our case) :
Server side

@POST
@RolesAllowed("USER")
@Path("/upload")
@Consumes("multipart/form-data")
public Response uploadFile(MultipartFormDataInput input) throws IOException
{
    File local;
    final String UPLOADED_FILE_PATH = filesRoot; // Check applicationContext-Server.properties file

    //Get API input data
    Map<String, List<InputPart>> uploadForm = input.getFormDataMap();

    //The file name
    String fileName;
    String pathFileName = "";


    //Get file data to save
    List<InputPart> inputParts = uploadForm.get("attachment");

    try
    {
        for (InputPart inputPart : inputParts)
        {
            //Use this header for extra processing if required
            MultivaluedMap<String, String> header = inputPart.getHeaders();
            fileName = getFileName(header);
            String tmp = new SimpleDateFormat("yyyyMMddhhmmss").format(new Date());
            pathFileName = "images/upload/" + tmp + '_' + fileName + ".png";
            fileName = UPLOADED_FILE_PATH + pathFileName;

            // convert the uploaded file to input stream
            InputStream inputStream = inputPart.getBody(InputStream.class, null);

            byte[] bytes = IOUtils.toByteArray(inputStream);
            // constructs upload file path

            writeFile(bytes, fileName);
            // NOTE : The Target picture boundary is 800x600. Should be specified somewhere else ?
            BufferedImage scaledP = getScaledPicture(fileName, 800, 600, RenderingHints.VALUE_INTERPOLATION_BILINEAR, false);
            ByteArrayOutputStream os = new ByteArrayOutputStream();
            ImageIO.write(scaledP, "png", os);
            local = new File(fileName);
            ImageIO.write(scaledP, "png", local);
        }
    }
    catch (Exception e)
    {
        e.printStackTrace();
        return Response.serverError().build();
    }
    return Response.status(201).entity(pathFileName).build();

}

For the client side, we use AngularJS which is coded by another team. I won't be able to explain about it, but here is the code :

    $scope.setPicture = function (element)
{
  var t = new Date();
  console.log(t + ' - ' + t.getMilliseconds());

  // Only process image files.
  if (!element[0].type.match('image.*'))
  {
    console.log('File is not an image');
    Error.current.element = $document[0].getElementById('comet-project-upload');
    Error.current.message = 'Please select a picture.';
    $scope.$apply();
  }
  else if (element[0].size > 10 * 1024 * 1024)
  {
    console.log('File is too big');
    Error.current.element = $document[0].getElementById('comet-project-upload');
    Error.current.message = 'File is too big. Please select another file.';
    $scope.$apply();
  }
  else
  {
    self.animSpinner = true;

    var fd = new FormData();
    //Take the first file
    fd.append('attachment', element[0]);
    //Note : attachment is the compulsory name ?

    Project.uploadImage(fd).then(
      function (data)
      {
        self.animSpinner = false;

        // self.$apply not needed because $digest already in progress
        self.projectPicture = data;
      },
      function ()
      {
        self.animSpinner = false;
        Error.current.element = $document[0].getElementById('comet-project-upload');
        Error.current.message = 'Error with the server when uploading the image';

        console.error('Picture Upload failed! ' + status + ' ' + headers + ' ' + config);
      }
    );
  }
};

And the uploadImage function :

    this.uploadImage = function (imageData)
{
  var deferred = $q.defer();

  $http.post('/comet/api/image/upload', imageData,
    {
      headers: { 'Content-Type': undefined, Authorization: User.hash },
      //This method will allow us to change how the data is sent up to the server
      // for which we'll need to encapsulate the model data in 'FormData'
      transformRequest: angular.identity
      //The cool part is the undefined content-type and the transformRequest: angular.identity
      // that give at the $http the ability to choose the right "content-type" and manage
      // the boundary needed when handling multipart data.
    })
    .success(function (data/*, status, headers, config*/)
    {
      deferred.resolve(data);
    })
    .error(function (data, status, headers, config)
    {
      console.error('Picture Upload failed! ' + status + ' ' + headers + ' ' + config);
      deferred.reject();
    });

  return deferred.promise;
};

Hope it will help you ...

Answer 3

On Server Side you can use something like this

@POST
@Path("/fileupload")  //Your Path or URL to call this service
@Consumes(MediaType.MULTIPART_FORM_DATA)
public Response uploadFile(
        @DefaultValue("true") @FormDataParam("enabled") boolean enabled,
        @FormDataParam("file") InputStream uploadedInputStream,
        @FormDataParam("file") FormDataContentDisposition fileDetail) {
     //Your local disk path where you want to store the file
    String uploadedFileLocation = "D://uploadedFiles/" + fileDetail.getFileName();
    System.out.println(uploadedFileLocation);
    // save it
    File  objFile=new File(uploadedFileLocation);
    if(objFile.exists())
    {
        objFile.delete();

    }

    saveToFile(uploadedInputStream, uploadedFileLocation);

    String output = "File uploaded via Jersey based RESTFul Webservice to: " + uploadedFileLocation;

    return Response.status(200).entity(output).build();

}
private void saveToFile(InputStream uploadedInputStream,
        String uploadedFileLocation) {

    try {
        OutputStream out = null;
        int read = 0;
        byte[] bytes = new byte[1024];

        out = new FileOutputStream(new File(uploadedFileLocation));
        while ((read = uploadedInputStream.read(bytes)) != -1) {
            out.write(bytes, 0, read);
        }
        out.flush();
        out.close();
    } catch (IOException e) {

        e.printStackTrace();
    }

}

Again this can be checked with the client code in java with

public class TryFile {
public static void main(String[] ar)
       throws HttpException, IOException, URISyntaxException {
    TryFile t = new TryFile();
    t.method();
}
public void method() throws HttpException, IOException, URISyntaxException {
    String url = "http://localhost:8080/...../fileupload";  //Your service URL
    String fileName = ""; //file name to be uploaded
    HttpClient httpclient = new DefaultHttpClient();
    HttpPost httppost = new HttpPost(url);
    FileBody fileContent = new FiSystem.out.println("hello");
    StringBody comment = new StringBody("Filename: " + fileName);
    MultipartEntity reqEntity = new MultipartEntity();
    reqEntity.addPart("file", fileContent);
    httppost.setEntity(reqEntity);

    HttpResponse response = httpclient.execute(httppost);
    HttpEntity resEntity = response.getEntity();
}
}

With HTML, you can simply check with this code

<html>
<body>
<h1>Upload File with RESTFul WebService</h1>
<form action="<Your service URL (htp://localhost:8080/.../fileupload)" method="post" enctype="multipart/form-data">
   <p>
    Choose a file : <input type="file" name="file" />
   </p>
   <input type="submit" value="Upload" />
</form>

To get QueryParam, Check @QueryParam or for header param use @HeaderParam

Example of @QueryParam

Example of @HeaderParam

Try this, hope this helps you with your problem.

Answer 4

There is no Jax-RS way to do this. Each server have their own extensions, all using Multi-part form submissions. For example, in CXF, the following will allow you to upload via a multipart form. (Attachment is a CXF specific extension)

@Consumes(MediaType.MULTIPART_FORM_DATA)
public Response uploadFile(@Multipart(value = "vendor") String vendor,
        @Multipart(value = "uploadedFile") Attachment attr) {

whereas the following is the same for Jersey (FormDataParam is a Jersey extension):

 @Consumes(MediaType.MULTIPART_FORM_DATA_TYPE)
 public String postForm(
         @DefaultValue("true") @FormDataParam("enabled") boolean enabled,
         @FormDataParam("data") FileData bean,
         @FormDataParam("file") InputStream file,
         @FormDataParam("file") FormDataContentDisposition fileDisposition) {

(I've ignored the @Path, @POST and @Produces, and other non-relevant annotations.)