To use plupload with Parse.com, how do you get access to the file control object or base64 string?

Question

We would like to interrupt the plupload uploader and instead either get the file control object or the base64 string form the chosen files so we can upload them to Parse.com. (We are effectively just using pluploader for the checks and UI flexibility.)

We tried accessing the file object in pluploader's "UploadFile: function(up, file)" in the preInit events - but though file.id and file.name exist, file doesn't appear to be a file control object as it throws an object "type" error with Parse.com.

Another stackoverflow [question] (Can Uploadify or Plupload upload selected files at the same time as the rest of the form data?) suggests it is possible because plupload is at its heart a client side javascript - but it is unclear how.

Ideas?

Answer 1

In current version of Plupload ( 1.5.7 ), each runtime (html5, html4, flash, ...) holds its own logic for accessing the file data or delegate its upload to a third party. The high level uploader has no knowledge of the data.

Simply considering the HTML5 uploader , you can see that, when a file is added to the file input :

• a guid id is generated for this file
• the binary file object is added to a private object, mapped to the guid id

Maybe you can :

• subscribe to the fileInput onchange event to grasp the binary fileobjects and store them in your own array.

something like :

uploader.init();
var fileArray = []
var inputFile = document.getElementById(uploader.id + '_html5');
inputFile.onchange = function oninputFileChanged() {fileArray.push(this.files);};

• subscribe to the FilesAdded event, and retrieve the guid assigned to your binary fileobjects by matching the returned filename and filesize to those you have stored in your own array

• unbind the default UploadFile handler

  uploader.unbind('UploadFile');

• implement your own UploadFile handler using your fileArray, based on HTML5 handler implementation (~300 lines...)

Note that this covers only HTML5 runtime. Seems like a lot of work to do IMHO.

As a side note, in the master branch of plupload on GitHub, the File class features getSource() and getNative() functions. I guess it is available as the plupload 2 beta link on the plupload download page. Worth a try I would say.

Hope this will help