├── .gitignore
├── .jshintrc
├── Gruntfile.js
├── LICENSE
├── README.md
├── bower.json
├── demo
    ├── client.js
    ├── index.html
    ├── layout.css
    └── spinner.gif
├── jquery.iframe-transport.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .grunt
3 | .sizecache.json
4 | build
5 | docs
6 | node_modules
7 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "browser": true,
 3 |   "camelcase": true,
 4 |   "curly": true,
 5 |   "eqeqeq": true,
 6 |   "eqnull": true,
 7 |   "es3": true,
 8 |   "expr": true,
 9 |   "evil": true,
10 |   "indent": 2,
11 |   "newcap": true,
12 |   "noarg": true,
13 |   "scripturl": true,
14 |   "undef": true,
15 |   "globals": {
16 |     "jQuery": true
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | /*jshint node: true, camelcase: false */
 2 | 
 3 | 'use strict';
 4 | 
 5 | module.exports = function (grunt) {
 6 | 
 7 |   grunt.initConfig({
 8 |     pkg: grunt.file.readJSON('package.json'),
 9 |     jshint: {
10 |       files: [
11 |         'Gruntfile.js',
12 |         'jquery.iframe-transport.js'
13 |       ],
14 |       options: {
15 |         jshintrc: '.jshintrc'
16 |       }
17 |     },
18 |     uglify: {
19 |       options: {
20 |         banner: '/*! <%= pkg.name %> v<%= pkg.version %> | <%= pkg.license %> */\n'
21 |       },
22 |       build: {
23 |         files: {
24 |           'build/jquery.iframe-transport-<%= pkg.version %>.min.js': 'jquery.iframe-transport.js'
25 |         }
26 |       }
27 |     },
28 |     docco: {
29 |       debug: {
30 |         src: ['jquery.iframe-transport.js'],
31 |         options: {
32 |           output: 'docs/'
33 |         }
34 |       }
35 |     },
36 |     copy: {
37 |       doc: {
38 |         src: 'docs/jquery.iframe-transport.html',
39 |         dest: 'docs/index.html',
40 |         nonull: true
41 |       }
42 |     },
43 |     'gh-pages': {
44 |       options: {
45 |         base: 'docs'
46 |       },
47 |       src: ['**']
48 |     },
49 |     connect: {
50 |       server: {
51 |         options: {
52 |           port: 3000,
53 |           base: 'demo',
54 |           keepalive: true,
55 |           middleware: function(connect, options, middlewares) {
56 |             var multiparty = require('multiparty'),
57 |                 util = require('util');
58 |             middlewares.unshift(function(req, res, next) {
59 |               if (req.url === '/jquery.iframe-transport.js') {
60 |                 return connect.static(__dirname)(req, res, next);
61 |               }
62 |               if (req.url !== '/upload' || req.method.toUpperCase() !== 'POST') {
63 |                 return next();
64 |               }
65 | 
66 |               var form = new multiparty.Form();
67 |               form.parse(req, function(error, fields, files) {
68 |                 res.writeHead(200, {'Content-Type': 'application/json'});
69 |                 setTimeout(function() {
70 |                   res.end(JSON.stringify({
71 |                     files: files['file'],
72 |                     comment: fields['comment']
73 |                   }));
74 |                 }, 500);
75 |               });
76 |             });
77 |             return middlewares;
78 |           }
79 |         }
80 |       }
81 |     }
82 |   });
83 | 
84 |   // Loading dependencies
85 |   for (var key in grunt.file.readJSON('package.json').devDependencies) {
86 |     if (key !== 'grunt' && key.indexOf('grunt') === 0) {
87 |       grunt.loadNpmTasks(key);
88 |     }
89 |   }
90 | 
91 |   grunt.registerTask('default', ['jshint', 'uglify']);
92 |   grunt.registerTask('demo', ['connect']);
93 |   grunt.registerTask('doc', ['docco', 'copy:doc', 'gh-pages']);
94 | };
95 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License
 2 | 
 3 | Copyright (c) 2014 Christopher Lenz
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # jQuery Iframe Transport
 2 | 
 3 | jQuery Ajax transport plugin for iframe-based file uploads. For documentation, see:
 4 | 
 5 | [https://cmlenz.github.io/jquery-iframe-transport/](https://cmlenz.github.io/jquery-iframe-transport/)
 6 | 
 7 | # Demo
 8 | 
 9 | To run the included simple demo application, you'll need [node.js](http://nodejs.org/).
10 | 
11 | In the `jquery-iframe-transport` source directory, run:
12 | 
13 |     $ npm install
14 | 
15 | That should download and install all dependencies required for the build, including running the demo app. Then simply run:
16 | 
17 |     $ grunt connect
18 | 
19 | Point your browser to http://localhost:3000/ and you should be able to play with the demo.
20 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery.iframe-transport",
 3 |   "version": "1.0.0",
 4 |   "homepage": "https://cmlenz.github.io/jquery-iframe-transport/",
 5 |   "authors": [
 6 |     "Christopher Lenz <cmlenz@gmail.com>"
 7 |   ],
 8 |   "description": "jQuery plugin that implements an iframe transport so that ajax calls support the uploading of files using standard HTML file input fields",
 9 |   "main": "jquery.iframe-transport.js",
10 |   "dependencies": {
11 |     "jquery": ">=1.6"
12 |   },
13 |   "keywords": [
14 |     "jquery",
15 |     "iframe",
16 |     "upload",
17 |     "file",
18 |     "form",
19 |     "ajax"
20 |   ],
21 |   "license": "MIT",
22 |   "ignore": [
23 |     "**/.*",
24 |     "node_modules",
25 |     "bower_components",
26 |     "Gruntfile.js"
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/demo/client.js:
--------------------------------------------------------------------------------
 1 | (function($) {
 2 |   'use strict';
 3 | 
 4 |   $('form').on('click', 'button[type=submit]', function(evt) {
 5 |     var form = $(this.form).addClass('loading');
 6 |     evt.preventDefault();
 7 |     $.ajax(form.prop('action'), {
 8 |       data: form.find('textarea').serializeArray(),
 9 |       dataType: 'json',
10 |       files: form.find(':file'),
11 |       iframe: true,
12 |       processData: false
13 |     }).always(function() {
14 |       form.removeClass('loading');
15 |     }).done(function(data) {
16 |       console.log(data);
17 |       $.each(data.files, function(idx, file) {
18 |         $('<li class="list-group-item">' +
19 |           '<h4 class="list-group-item-heading"></h4>' +
20 |           '<p class="list-group-item-text"><span class="size"></span>, <span class="mime"></span></p>' +
21 |           '<blockquote class="list-group-item-text comment"></blockquote></li>')
22 |           .find('h4').text(file.originalFilename).end()
23 |           .find('.size').text(formatSize(file.size)).end()
24 |           .find('.mime').text(file.headers['content-type']).end()
25 |           .find('.comment').text(data.comment || '').end()
26 |           .appendTo('#filelist');
27 |       });
28 |       form.find(':file').val('');
29 |     });
30 |   });
31 | 
32 |   function formatSize(size) {
33 |     var units = ['B', 'KB', 'MB', 'GB'],
34 |         idx = 0;
35 |     if (!size) {
36 |       return '0 bytes';
37 |     }
38 |     while (size >= 1024) {
39 |       size /= 1024;
40 |       idx++;
41 |     }
42 |     return size.toFixed(0) + ' ' + units[idx];
43 |   }
44 | 
45 | })(jQuery);
46 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>jQuery Iframe Transport Demo</title>
 5 |     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 6 |     <style>
 7 |       form.loading { background: url(spinner.gif) 100% 0 no-repeat; }
 8 |     </style>
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div class="page-header">
13 |         <h1>jQuery Iframe Transport Demo</h1>
14 |       </div>
15 |       <p class="help-block">
16 |         This is a simple example showing a file upload field that gets
17 |         transmitted asynchronously using the iframe transport. Just choose one or
18 |         more files, and they will be uploaded to the server (but not stored). After
19 |         one upload has completed, you can upload more files.
20 |       </p>
21 |       <p class="help-block">
22 |         Please note that this example needs to run via
23 |         <code>grunt connect</code>, as uploads require a server-side
24 |         component to work properly.
25 |       </p>
26 |       <div class="panel panel-default">
27 |         <div class="panel-body">
28 |           <form role="form" id="upload" action="/upload" method="post" enctype="multipart/form-data">
29 |             <div class="form-group">
30 |               <label for="file-field">Select files to upload:</label>
31 |               <input type="file" id="file-field" name="file" multiple>
32 |             </div>
33 |             <div class="form-group">
34 |               <label for="comment-field">Comment:</label>
35 |               <textarea name="comment" id="comment-field" class="form-control"
36 |                 placeholder="Enter comment" rows="2" cols="50"></textarea>
37 |             </div>
38 |             <div class="form-group">
39 |               <button type="submit" class="btn btn-default btn-submit">Upload</button>
40 |             </div>
41 |           </form>
42 |         </div>
43 |       </div>
44 |       <ul id="filelist" class="list-group"></ul>
45 |     </div>
46 |   </body>
47 |   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
48 |   <script src="jquery.iframe-transport.js"></script>
49 |   <script src="client.js"></script>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/demo/layout.css:
--------------------------------------------------------------------------------
1 | form.loading { background: url(spinner.gif) 100% 0 no-repeat; }
2 | 


--------------------------------------------------------------------------------
/demo/spinner.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cmlenz/jquery-iframe-transport/f9a5446f5f8a9d7bc4659ea9c49349b1f585316b/demo/spinner.gif


--------------------------------------------------------------------------------
/jquery.iframe-transport.js:
--------------------------------------------------------------------------------
  1 | // This [jQuery](https://jquery.com/) plugin implements an `<iframe>`
  2 | // [transport](https://api.jquery.com/jQuery.ajax/#extending-ajax) so that
  3 | // `$.ajax()` calls support the uploading of files using standard HTML file
  4 | // input fields. This is done by switching the exchange from `XMLHttpRequest`
  5 | // to a hidden `iframe` element containing a form that is submitted.
  6 | 
  7 | // The [source for the plugin](https://github.com/cmlenz/jquery-iframe-transport)
  8 | // is available on [Github](https://github.com/) and licensed under the [MIT
  9 | // license](https://github.com/cmlenz/jquery-iframe-transport/blob/master/LICENSE).
 10 | 
 11 | // ## Usage
 12 | 
 13 | // To use this plugin, you simply add an `iframe` option with the value `true`
 14 | // to the Ajax settings an `$.ajax()` call, and specify the file fields to
 15 | // include in the submssion using the `files` option, which can be a selector,
 16 | // jQuery object, or a list of DOM elements containing one or more
 17 | // `<input type="file">` elements:
 18 | 
 19 | //     $("#myform").submit(function() {
 20 | //         $.ajax(this.action, {
 21 | //             files: $(":file", this),
 22 | //             iframe: true
 23 | //         }).complete(function(data) {
 24 | //             console.log(data);
 25 | //         });
 26 | //     });
 27 | 
 28 | // The plugin will construct hidden `<iframe>` and `<form>` elements, add the
 29 | // file field(s) to that form, submit the form, and process the response.
 30 | 
 31 | // If you want to include other form fields in the form submission, include
 32 | // them in the `data` option, and set the `processData` option to `false`:
 33 | 
 34 | //     $("#myform").submit(function() {
 35 | //         $.ajax(this.action, {
 36 | //             data: $(":text", this).serializeArray(),
 37 | //             files: $(":file", this),
 38 | //             iframe: true,
 39 | //             processData: false
 40 | //         }).complete(function(data) {
 41 | //             console.log(data);
 42 | //         });
 43 | //     });
 44 | 
 45 | // ### Response Data Types
 46 | 
 47 | // As the transport does not have access to the HTTP headers of the server
 48 | // response, it is not as simple to make use of the automatic content type
 49 | // detection provided by jQuery as with regular XHR. If you can't set the
 50 | // expected response data type (for example because it may vary depending on
 51 | // the outcome of processing by the server), you will need to employ a
 52 | // workaround on the server side: Send back an HTML document containing just a
 53 | // `<textarea>` element with a `data-type` attribute that specifies the MIME
 54 | // type, and put the actual payload in the textarea:
 55 | 
 56 | //     <textarea data-type="application/json">
 57 | //       {"ok": true, "message": "Thanks so much"}
 58 | //     </textarea>
 59 | 
 60 | // The iframe transport plugin will detect this and pass the value of the
 61 | // `data-type` attribute on to jQuery as if it was the "Content-Type" response
 62 | // header, thereby enabling the same kind of conversions that jQuery applies
 63 | // to regular responses. For the example above you should get a Javascript
 64 | // object as the `data` parameter of the `complete` callback, with the
 65 | // properties `ok: true` and `message: "Thanks so much"`.
 66 | 
 67 | // ### Handling Server Errors
 68 | 
 69 | // Another problem with using an `iframe` for file uploads is that it is
 70 | // impossible for the javascript code to determine the HTTP status code of the
 71 | // servers response. Effectively, all of the calls you make will look like they
 72 | // are getting successful responses, and thus invoke the `done()` or
 73 | // `complete()` callbacks. You can only communicate problems using the content
 74 | // of the response payload. For example, consider using a JSON response such as
 75 | // the following to indicate a problem with an uploaded file:
 76 | 
 77 | //     <textarea data-type="application/json">
 78 | //       {"ok": false, "message": "Please only upload reasonably sized files."}
 79 | //     </textarea>
 80 | 
 81 | // ### Compatibility
 82 | 
 83 | // This plugin has primarily been tested on Safari 5 (or later), Firefox 4 (or
 84 | // later), and Internet Explorer (all the way back to version 6). While I
 85 | // haven't found any issues with it so far, I'm fairly sure it still doesn't
 86 | // work around all the quirks in all different browsers. But the code is still
 87 | // pretty simple overall, so you should be able to fix it and contribute a
 88 | // patch :)
 89 | 
 90 | // ## Annotated Source
 91 | 
 92 | (function($, undefined) {
 93 |   "use strict";
 94 | 
 95 |   // Register a prefilter that checks whether the `iframe` option is set, and
 96 |   // switches to the "iframe" data type if it is `true`.
 97 |   $.ajaxPrefilter(function(options, origOptions, jqXHR) {
 98 |     if (options.iframe) {
 99 |       options.originalURL = options.url;
100 |       return "iframe";
101 |     }
102 |   });
103 | 
104 |   // Register a transport for the "iframe" data type. It will only activate
105 |   // when the "files" option has been set to a non-empty list of enabled file
106 |   // inputs.
107 |   $.ajaxTransport("iframe", function(options, origOptions, jqXHR) {
108 |     var form = null,
109 |         iframe = null,
110 |         name = "iframe-" + $.now(),
111 |         files = $(options.files).filter(":file:enabled"),
112 |         markers = null,
113 |         accepts = null;
114 | 
115 |     // This function gets called after a successful submission or an abortion
116 |     // and should revert all changes made to the page to enable the
117 |     // submission via this transport.
118 |     function cleanUp() {
119 |       files.each(function(i, file) {
120 |         var $file = $(file);
121 |         $file.data("clone").replaceWith($file);
122 |       });
123 |       form.remove();
124 |       iframe.one("load", function() { iframe.remove(); });
125 |       iframe.attr("src", "about:blank");
126 |     }
127 | 
128 |     // Remove "iframe" from the data types list so that further processing is
129 |     // based on the content type returned by the server, without attempting an
130 |     // (unsupported) conversion from "iframe" to the actual type.
131 |     options.dataTypes.shift();
132 | 
133 |     // Use the data from the original AJAX options, as it doesn't seem to be 
134 |     // copied over since jQuery 1.7.
135 |     // See https://github.com/cmlenz/jquery-iframe-transport/issues/6
136 |     options.data = origOptions.data;
137 | 
138 |     if (files.length) {
139 |       form = $("<form enctype='multipart/form-data' method='post'></form>").
140 |         hide().attr({action: options.originalURL, target: name});
141 | 
142 |       // If there is any additional data specified via the `data` option,
143 |       // we add it as hidden fields to the form. This (currently) requires
144 |       // the `processData` option to be set to false so that the data doesn't
145 |       // get serialized to a string.
146 |       if (typeof(options.data) === "string" && options.data.length > 0) {
147 |         $.error("data must not be serialized");
148 |       }
149 |       $.each(options.data || {}, function(name, value) {
150 |         if ($.isPlainObject(value)) {
151 |           name = value.name;
152 |           value = value.value;
153 |         }
154 |         $("<input type='hidden' />").attr({name:  name, value: value}).
155 |           appendTo(form);
156 |       });
157 | 
158 |       // Add a hidden `X-Requested-With` field with the value `IFrame` to the
159 |       // field, to help server-side code to determine that the upload happened
160 |       // through this transport.
161 |       $("<input type='hidden' value='IFrame' name='X-Requested-With' />").
162 |         appendTo(form);
163 | 
164 |       // Borrowed straight from the JQuery source.
165 |       // Provides a way of specifying the accepted data type similar to the
166 |       // HTTP "Accept" header
167 |       if (options.dataTypes[0] && options.accepts[options.dataTypes[0]]) {
168 |         accepts = options.accepts[options.dataTypes[0]] +
169 |                   (options.dataTypes[0] !== "*" ? ", */*; q=0.01" : "");
170 |       } else {
171 |         accepts = options.accepts["*"];
172 |       }
173 |       $("<input type='hidden' name='X-HTTP-Accept'>").
174 |         attr("value", accepts).appendTo(form);
175 | 
176 |       // Move the file fields into the hidden form, but first remember their
177 |       // original locations in the document by replacing them with disabled
178 |       // clones. This should also avoid introducing unwanted changes to the
179 |       // page layout during submission.
180 |       markers = files.after(function(idx) {
181 |         var $this = $(this),
182 |             $clone = $this.clone().prop("disabled", true);
183 |         $this.data("clone", $clone);
184 |         return $clone;
185 |       }).next();
186 |       files.appendTo(form);
187 | 
188 |       return {
189 | 
190 |         // The `send` function is called by jQuery when the request should be
191 |         // sent.
192 |         send: function(headers, completeCallback) {
193 |           iframe = $("<iframe src='about:blank' name='" + name +
194 |             "' id='" + name + "' style='display:none'></iframe>");
195 | 
196 |           // The first load event gets fired after the iframe has been injected
197 |           // into the DOM, and is used to prepare the actual submission.
198 |           iframe.one("load", function() {
199 | 
200 |             // The second load event gets fired when the response to the form
201 |             // submission is received. The implementation detects whether the
202 |             // actual payload is embedded in a `<textarea>` element, and
203 |             // prepares the required conversions to be made in that case.
204 |             iframe.one("load", function() {
205 |               var doc = this.contentWindow ? this.contentWindow.document :
206 |                 (this.contentDocument ? this.contentDocument : this.document),
207 |                 root = doc.documentElement ? doc.documentElement : doc.body,
208 |                 textarea = root.getElementsByTagName("textarea")[0],
209 |                 type = textarea && textarea.getAttribute("data-type") || null,
210 |                 status = textarea && textarea.getAttribute("data-status") || 200,
211 |                 statusText = textarea && textarea.getAttribute("data-statusText") || "OK",
212 |                 content = {
213 |                   html: root.innerHTML,
214 |                   text: type ?
215 |                     textarea.value :
216 |                     root ? (root.textContent || root.innerText) : null
217 |                 };
218 |               cleanUp();
219 |               completeCallback(status, statusText, content, type ?
220 |                 ("Content-Type: " + type) :
221 |                 null);
222 |             });
223 | 
224 |             // Now that the load handler has been set up, submit the form.
225 |             form[0].submit();
226 |           });
227 | 
228 |           // After everything has been set up correctly, the form and iframe
229 |           // get injected into the DOM so that the submission can be
230 |           // initiated.
231 |           $("body").append(form, iframe);
232 |         },
233 | 
234 |         // The `abort` function is called by jQuery when the request should be
235 |         // aborted.
236 |         abort: function() {
237 |           if (iframe !== null) {
238 |             iframe.unbind("load").attr("src", "about:blank");
239 |             cleanUp();
240 |           }
241 |         }
242 | 
243 |       };
244 |     }
245 |   });
246 | 
247 | })(jQuery);
248 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery.iframe-transport",
 3 |   "version": "1.0.0",
 4 |   "description": "jQuery plugin that implements an iframe transport so that ajax calls support the uploading of files using standard HTML file input fields",
 5 |   "main": "jquery.iframe-transport.js",
 6 |   "directories": {
 7 |     "demo": "demo"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "http://github.com/cmlenz/jquery-iframe-transport"
12 |   },
13 |   "author": "Christopher Lenz",
14 |   "license": "MIT",
15 |   "readmeFilename": "README.md",
16 |   "devDependencies": {
17 |     "grunt": "~0.4.1",
18 |     "grunt-contrib-clean": "~0.5.0",
19 |     "grunt-contrib-connect": "~0.7.1",
20 |     "grunt-contrib-copy": "~0.5.0",
21 |     "grunt-contrib-jshint": "~0.9.2",
22 |     "grunt-contrib-uglify": "~0.4.0",
23 |     "grunt-docco": "~0.3.3",
24 |     "grunt-gh-pages": "~0.9.1",
25 |     "grunt-shell": "~0.6.4",
26 |     "multiparty": "~3.2.4"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------