Full view of what a file upload may contain within magento checkout

checkout-file-upload.js

/**
 * Custom RxMethod Checkout step
 *
 * @type {*}
 */
var RxMethod = Class.create();
RxMethod.prototype = {
    initialize: function(form, saveUrl) {
        var _self = this;
		this.form = form;
		this.resultsContainer = document.getElementById('upload-results');
		this.canAjaxUpload = !(/MSIE 8.0|MSIE 9.0/.test(navigator.userAgent));

        if ($(this.form)) {
            $(this.form).observe('submit', function(event) {
				this.save();
				Event.stop(event);
			}.bind(this));
        }
        
        
        // bunch of other logic...

        this.saveUrl = saveUrl;
        this.validator = new RxValidation(this.form);
        this.onSave = this.nextStep.bindAsEventListener(this);
        this.onComplete = this.resetLoadWaiting.bindAsEventListener(this);
    },

	/**
	 * Validates each rxType selection
	 *
	 * @returns boolean
	 */
    validate: function() {
		//console.log('validating', this.rxType);
		switch (this.rxType) {
			case 'existing':
				return this.validator.validate();
			case 'upload':
				var imgDataEl = document.getElementById('rx:image-data');
				imgDataEl.up().removeClassName('validation-failed');		// custom validation class for spacing concerns

				if (!this.validator.validate()) {
					imgDataEl.up().addClassName('validation-failed');
					return false;
				}
				return true;
			case 'email':
				return true;
			case 'call':
				return this.validator.validate();
		}

        return false;
    },

	/**
	 * Toggles the form buttons disabled state
	 *
	 * @param disabled boolean
	 */
	toggleButtons: function(disabled) {
		$(this.form).select('.button').each(function(btn) {
			btn.disabled = disabled;
		});
	},

	_handleFileUpload: function(e) {
		this.prepareFile(e.target);
	},

	/**
	 * Handles the selection and toggle of the interface for the prescription
	 * type selection - the accordion effect is in main.js
	 *
	 * @param el
	 */
	changeRxType: function(el) {
		if (el.value === this.rxType) return;

		!el.checked && (el.checked = true);
		this.rxType = el.value;
	},

	/**
	 * Prepares the file for save - reads as stream and stores in hidden input
	 *
	 * https://gist.github.com/cbourdage/b1b46f1c4ddec6efd6d6
	 */
	prepareFile: function(input) {
		if (!this.canAjaxUpload) {
			this.resultsContainer.select('.image-name')[0].innerHTML = input.value.match(/[^\/\\]+$/);	// strip out the path crap from the value
			this.resultsContainer.show();
			this.resultsContainer.previous().hide();
			return;
		}

		var _self = this,
			form = input.up('form'),
			file = input.files[0],
			reader = new FileReader();

		this.toggleButtons(true);
		reader.onloadend = (function(file) {
			return function(e) {
				//console.log(e);
				if (e.target.readyState == FileReader.DONE) {

					var result = '';
					if (e.target.readAsBinaryString) {
						result = btoa(e.target.result);
					} else {
						// ie10 and ie11 fallback
						var binary = '';
						var bytes = new Uint8Array(e.target.result);
						var len = bytes.byteLength;
						for (var i = 0; i < len; i++) {
							binary += String.fromCharCode( bytes[ i ] );
						}
						result = btoa(binary);
					}

					//console.log(result);
					document.getElementById('rx:image-data').value = result;

					// Update results container
					_self.resultsContainer.select('.image-name')[0].innerHTML = file.name;
					_self.resultsContainer.show();
					_self.resultsContainer.previous().hide();

					_self.toggleButtons(false);
				}
			}
		})(file);

		if (reader.readAsBinaryString) {
			reader.readAsBinaryString(file);
		} else {
			// ie10 and ie11 support
			reader.readAsArrayBuffer(file);
		}
		return false;
	},

	/**
	 * Resets the results container states/data and un-sets
	 * the hidden image data value
	 */
	removeFile: function() {
		document.getElementById('rx:image-data').value = '';
		document.getElementById('rx:image-label').value = '';
		var fileInput = document.getElementById('rx:image');
		fileInput.value = '';

		// ie8 fix to replace the input with itself to reset it.
		if (fileInput.value !== "") {
			fileInput.replace(fileInput.clone(true));
		}

		this.resultsContainer.select('.image-name')[0].innerHTML = '';
		this.resultsContainer.hide();
		this.resultsContainer.previous().show();
	},

	/**
	 * Validates the data and then builds request to save data
	 */
    save: function() {
        if (checkout.loadWaiting != false) return;

        if (this.validate()) {
            checkout.setLoadWaiting('rx');
			         if (this.rxType === 'upload' && !this.canAjaxUpload) {
				// full post for none supported browsers
				this.form.submit();
			} else {
				var request = new Ajax.Request(
					this.saveUrl,
					{
						method:'post',
						onComplete: this.onComplete,
						onSuccess: this.onSave,
						onFailure: checkout.ajaxFailure.bind(checkout),
						parameters: Form.serialize(this.form)
					}
				);
			}
		}
    },
};