File Upload using google closure

Question

Plz throw some light on uploading file using google closure (single file and multiple files). I am using spring mvc controller at server side to save the file.

I went through this article on stackoverflow but the url mentioned there is obsolete. Please share code snippet or any example if you have worked on it.

possible duplicate of [File upload functionality in google closure?](http://stackoverflow.com/questions/10701247/file-upload-functionality-in-google-closure) — rds, Sep 26 '14 at 15:08

score 1 · Answer 1 · answered Nov 04 '14 at 07:12

Generally, file upload works with a input tag of type file. The old school way of doing this involves a post request to a server using the tag. But I am assuming you are using ajax, so the method of doing this requires you to have to write javascript that sends the data to the server:

This mdn article was my guide for implementing this: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

The hard part here is multi-browser support and how you want to deliver the file to the server.

You can either send the binary blob to the server, or a data uri. But the ways of obtaining either have browser support issues.

If the file is small, data uri's are pretty easy to send and you base64 decode it on the server.

I recommend using the FileReader object and listening on a change event on your file input.

Here is an example of a Component that encapsulates File input tags.

goog.provide('my.FileThing');

goog.require('goog.dom');
goog.require('goog.ui.Component');

/** @constructor */
my.FileThing = function() {};
goog.inherits(my.FileThing, goog.ui.Component);

my.FileThing.prototype.createDom = function() {
  this.setElementInternal(goog.dom.createDom('input', {'type':'file'});
};

my.FileThing.prototype.enterDocument = function() {
    goog.base(this, 'enterDocument');
    this.getHandler().listen(
       this, goog.events.EventType.CHANGE, this.onChange
    );
};

/**
* @param {goog.events.BrowserEvent} event the CHANGE event.
*/
my.FileThing.prototype.onChange = function(event) {
   var files = this.getElement().files;
   if (files.length == 0) { return; } // no files!
   var reader = new FileReader();
   reader.onload = goog.bind(this, this.onLoad);
   reader.readAsBinaryString(files)
};

/**
 * @param {goog.events.BrowserEvent} event the LOAD event.
 */
my.FileThing.prototype.onLoad = function(event) {
   var data = event.target.result;
   // construct xhr event xhr.sendAsBinary(event.target.result); ....
};

//////////////// THEN ELSEWHERE
var fileThing = new my.FileThing();
fileThing.render();  // or blahComponent.addChild(fileThing, true);

score 1 · Answer 2 · answered May 16 '15 at 09:34

There are a number of ways to do this using google closure. You can use the XhrIo functions. See the closure Developers documentation. Another alternative is to use the

The other alternative is to use the IFramIO object. The following example is taken from the O'Reilly "Closure: The Definitive Guide"

<form id="some_form" enctype="multipart/form-data" method="POST"
      action="http://www.example.com/upload_handler">
  <input id="some_file" name="some_file" type="file">
</form>

<div id="status"></div>

<script>
  var uploadForm = /** @type {HTMLFormElement} */ (
    goog.dom.getElement('some_form'));
    var fileInput = goog.dom.getElement('some_file');

    var doUpload = function(e) {
      updateStatus('Uploading ' + fileInput.value + '...');

      var iframeIo = new goog.net.IframeIo();
      goog.events.listen(iframeIo, goog.net.EventType.COMPLETE, onComplete);
      iframeIo.sendFromForm(uploadForm);
    // For simplicity, disable the input while uploading.
    fileInput.disabled = true;
  };

  var onComplete = function(e) {
    var iframeIo = /** @type {goog.net.IframeIo} */ (e.target);
    var file = fileInput.value;
    if (iframeIo.isSuccess()) {
      updateStatus('Finished uploading ' + file);
    } else {
      updateStatus('Failed to upload ' + file);
    }
    fileInput.disabled = false;
    iframeIo.dispose();
  };

// Listening for the onchange event will not work on older versions of
// Firefox. In that case, a click listener should be added to the input
// that polls for changes to its value.
goog.events.listen(fileInput,
                   goog.events.EventType.CHANGE,
                   doUpload);

var updateStatus = function(status) {
  goog.dom.setTextContent(goog.dom.getElement('status'), status);
};
</script>

Be aware that IFrameIO has a browser-specific maximum file size, generally 2 or 4 Mb. — Mike, Jan 13 '17 at 16:18

File Upload using google closure

2 Answers2