Question

I’m writing web application where front-end will be written on html, backbone.js and back-end on jersey.
There are many image upload (input type=”file”) and text data (input type=”text”) in my html form. I have to upload all of them (image and plain/text) in one request to Jersey server.

I read that I can send image with text data to server in one request only if I convert image to Base64 format.

Is it possible to convert image which is being uploaded via html forms to base64 format and then send all data to jersey?

Thank in advance 🙂

Answer 1

I don’t have any experience with Jersey but I know this will work with other back ends. In this example your model will post to the server image data as file_name and file_data. You will need to decode the image on the back end. The front end code below is taking advantage of the FileReader API. It will not work in IE < 10.

var model = Backbone.Model.extend({
  readFile : function (file, callback) {
    var reader = new FileReader();
    reader.onload = (function (theFile, self) {
      return function (e) {
        self.set({file_name: theFile.name, file_data : e.target.result});
        _.isUndefined(callback) ? null : callback();
      };
    })(file, this);

    reader.readAsDataURL(file);
  }
});

var view = Backbone.View({
  //...
  onRender : function () {
    var self = this,
      fileChangeHandler = function (e) {
      var callback = function () {
        self.model.save({}, {});
      };
      var file = e.originalEvent.target.files[0];
      self.model.readFile(file, callback);
    };
    self.$("input[type='file']").change(fileChangeHandler);
  }
});