File Uploads
+ * + * File uploads are not performed using normal "Ajax" techniques, that is they are not performed using XMLHttpRequests. + * Instead the form is submitted in the standard manner with the DOM <form> element temporarily modified to have its + * target set to refer to a dynamically generated, hidden <iframe> which is inserted into the document but removed + * after the return data has been gathered. + * + * The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to + * send the return object, then the Content-Type header must be set to "text/html" in order to tell the browser to + * insert the text unchanged into the document body. + * + * Characters which are significant to an HTML parser must be sent as HTML entities, so encode "<" as "<", "&" as + * "&" etc. + * + * The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a + * responseText property in order to conform to the requirements of event handlers and callbacks. + * + * Be aware that file upload packets are sent with the content type multipart/form and some server technologies + * (notably JEE) may require some custom processing in order to retrieve parameter names and parameter values from the + * packet content. + * + * Also note that it's not possible to check the response code of the hidden iframe, so the success handler will ALWAYS fire. + */ +Ext.define('Ext.data.Connection', { + mixins: { + observable: 'Ext.util.Observable' + }, + + statics: { + requestId: 0 + }, + + url: null, + async: true, + method: null, + username: '', + password: '', + + /** + * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true) + * @type Boolean + */ + disableCaching: true, + + /** + * @cfg {String} disableCachingParam (Optional) Change the parameter which is sent went disabling caching + * through a cache buster. Defaults to '_dc' + * @type String + */ + disableCachingParam: '_dc', + + /** + * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000) + */ + timeout : 30000, + + /** + * @param {Object} extraParams (Optional) Any parameters to be appended to the request. + */ + + useDefaultHeader : true, + defaultPostHeader : 'application/x-www-form-urlencoded; charset=UTF-8', + useDefaultXhrHeader : true, + defaultXhrHeader : 'XMLHttpRequest', + + constructor : function(config) { + config = config || {}; + Ext.apply(this, config); + + this.addEvents( + /** + * @event beforerequest + * Fires before a network request is made to retrieve a data object. + * @param {Connection} conn This Connection object. + * @param {Object} options The options config object passed to the {@link #request} method. + */ + 'beforerequest', + /** + * @event requestcomplete + * Fires if the request was successfully completed. + * @param {Connection} conn This Connection object. + * @param {Object} response The XHR object containing the response data. + * See The XMLHttpRequest Object + * for details. + * @param {Object} options The options config object passed to the {@link #request} method. + */ + 'requestcomplete', + /** + * @event requestexception + * Fires if an error HTTP status was returned from the server. + * See HTTP Status Code Definitions + * for details of HTTP status codes. + * @param {Connection} conn This Connection object. + * @param {Object} response The XHR object containing the response data. + * See The XMLHttpRequest Object + * for details. + * @param {Object} options The options config object passed to the {@link #request} method. + */ + 'requestexception' + ); + this.requests = {}; + this.mixins.observable.constructor.call(this); + }, + + /** + *Sends an HTTP request to a remote server.
+ *Important: Ajax server requests are asynchronous, and this call will + * return before the response has been received. Process any returned data + * in a callback function.
+ *
+Ext.Ajax.request({
+url: 'ajax_demo/sample.json',
+success: function(response, opts) {
+ var obj = Ext.decode(response.responseText);
+ console.dir(obj);
+},
+failure: function(response, opts) {
+ console.log('server-side failure with status code ' + response.status);
+}
+});
+ * To execute a callback function in the correct scope, use the scope option.
+ * @param {Object} options An object which may contain the following properties:True if the form object is a file upload (will be set automatically if the form was + * configured with enctype "multipart/form-data").
+ *File uploads are not performed using normal "Ajax" techniques, that is they are not + * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the + * DOM <form> element temporarily modified to have its + * target set to refer + * to a dynamically generated, hidden <iframe> which is inserted into the document + * but removed after the return data has been gathered.
+ *The server response is parsed by the browser to create the document for the IFRAME. If the + * server is using JSON to send the return object, then the + * Content-Type header + * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
+ *The response text is retrieved from the document, and a fake XMLHttpRequest object + * is created containing a responseText property in order to conform to the + * requirements of event handlers and callbacks.
+ *Be aware that file upload packets are sent with the content type multipart/form + * and some server technologies (notably JEE) may require some custom processing in order to + * retrieve parameter names and parameter values from the packet content.
+ *The options object may also contain any other property which might be needed to perform + * postprocessing in a callback because it is passed to callback functions.
+ * @return {Object} request The request object. This may be used + * to cancel the request. + */ + request : function(options) { + options = options || {}; + var me = this, + scope = options.scope || window, + username = options.username || me.username, + password = options.password || me.password || '', + async, + requestOptions, + request, + headers, + xhr; + + if (me.fireEvent('beforerequest', me, options) !== false) { + + requestOptions = me.setOptions(options, scope); + + if (this.isFormUpload(options) === true) { + this.upload(options.form, requestOptions.url, requestOptions.data, options); + return null; + } + + // if autoabort is set, cancel the current transactions + if (options.autoAbort === true || me.autoAbort) { + me.abort(); + } + + // create a connection object + xhr = this.getXhrInstance(); + + async = options.async !== false ? (options.async || me.async) : false; + + // open the request + if (username) { + xhr.open(requestOptions.method, requestOptions.url, async, username, password); + } else { + xhr.open(requestOptions.method, requestOptions.url, async); + } + + headers = me.setupHeaders(xhr, options, requestOptions.data, requestOptions.params); + + // create the transaction object + request = { + id: ++Ext.data.Connection.requestId, + xhr: xhr, + headers: headers, + options: options, + async: async, + timeout: setTimeout(function() { + request.timedout = true; + me.abort(request); + }, options.timeout || me.timeout) + }; + me.requests[request.id] = request; + + // bind our statechange listener + if (async) { + xhr.onreadystatechange = Ext.Function.bind(me.onStateChange, me, [request]); + } + + // start the request! + xhr.send(requestOptions.data); + if (!async) { + return this.onComplete(request); + } + return request; + } else { + Ext.callback(options.callback, options.scope, [options, undefined, undefined]); + return null; + } + }, + + /** + * Upload a form using a hidden iframe. + * @param {Mixed} form The form to upload + * @param {String} url The url to post to + * @param {String} params Any extra parameters to pass + * @param {Object} options The initial options + */ + upload: function(form, url, params, options){ + form = Ext.getDom(form); + options = options || {}; + + var id = Ext.id(), + frame = document.createElement('iframe'), + hiddens = [], + encoding = 'multipart/form-data', + buf = { + target: form.target, + method: form.method, + encoding: form.encoding, + enctype: form.enctype, + action: form.action + }, hiddenItem; + + /* + * Originally this behaviour was modified for Opera 10 to apply the secure URL after + * the frame had been added to the document. It seems this has since been corrected in + * Opera so the behaviour has been reverted, the URL will be set before being added. + */ + Ext.fly(frame).set({ + id: id, + name: id, + cls: Ext.baseCSSPrefix + 'hide-display', + src: Ext.SSL_SECURE_URL + }); + + document.body.appendChild(frame); + + // This is required so that IE doesn't pop the response up in a new window. + if (document.frames) { + document.frames[id].name = id; + } + + Ext.fly(form).set({ + target: id, + method: 'POST', + enctype: encoding, + encoding: encoding, + action: url || buf.action + }); + + // add dynamic params + if (params) { + Ext.iterate(Ext.Object.fromQueryString(params), function(name, value){ + hiddenItem = document.createElement('input'); + Ext.fly(hiddenItem).set({ + type: 'hidden', + value: value, + name: name + }); + form.appendChild(hiddenItem); + hiddens.push(hiddenItem); + }); + } + + Ext.fly(frame).on('load', Ext.Function.bind(this.onUploadComplete, this, [frame, options]), null, {single: true}); + form.submit(); + + Ext.fly(form).set(buf); + Ext.each(hiddens, function(h) { + Ext.removeNode(h); + }); + }, + + onUploadComplete: function(frame, options){ + var me = this, + // bogus response object + response = { + responseText: '', + responseXML: null + }, doc, firstChild; + + try { + doc = frame.contentWindow.document || frame.contentDocument || window.frames[id].document; + if (doc) { + if (doc.body) { + if (/textarea/i.test((firstChild = doc.body.firstChild || {}).tagName)) { // json response wrapped in textarea + response.responseText = firstChild.value; + } else { + response.responseText = doc.body.innerHTML; + } + } + //in IE the document may still have a body even if returns XML. + response.responseXML = doc.XMLDocument || doc; + } + } catch (e) { + } + + me.fireEvent('requestcomplete', me, response, options); + + Ext.callback(options.success, options.scope, [response, options]); + Ext.callback(options.callback, options.scope, [options, true, response]); + + setTimeout(function(){ + Ext.removeNode(frame); + }, 100); + }, + + /** + * Detect whether the form is intended to be used for an upload. + * @private + */ + isFormUpload: function(options){ + var form = this.getForm(options); + if (form) { + return (options.isUpload || (/multipart\/form-data/i).test(form.getAttribute('enctype'))); + } + return false; + }, + + /** + * Get the form object from options. + * @private + * @param {Object} options The request options + * @return {HTMLElement} The form, null if not passed + */ + getForm: function(options){ + return Ext.getDom(options.form) || null; + }, + + /** + * Set various options such as the url, params for the request + * @param {Object} options The initial options + * @param {Object} scope The scope to execute in + * @return {Object} The params for the request + */ + setOptions: function(options, scope){ + var me = this, + params = options.params || {}, + extraParams = me.extraParams, + urlParams = options.urlParams, + url = options.url || me.url, + jsonData = options.jsonData, + method, + disableCache, + data; + + + // allow params to be a method that returns the params object + if (Ext.isFunction(params)) { + params = params.call(scope, options); + } + + // allow url to be a method that returns the actual url + if (Ext.isFunction(url)) { + url = url.call(scope, options); + } + + url = this.setupUrl(options, url); + + //