├── .gitignore
├── demo
    ├── .gitignore
    ├── spinner.gif
    ├── README
    ├── layout.css
    ├── server.js
    ├── client.js
    └── index.html
├── README
└── jquery.iframe-transport.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/demo/spinner.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/html/jquery-iframe-transport/master/demo/spinner.gif


--------------------------------------------------------------------------------
/README:
--------------------------------------------------------------------------------
1 | jQuery Ajax transport plugin for iframe-based file uploads. For more
2 | information, see:
3 | 
4 |  http://cmlenz.github.com/jquery-iframe-transport/
5 | 


--------------------------------------------------------------------------------
/demo/README:
--------------------------------------------------------------------------------
 1 | This demo shows the basic transport functionality by allowing file uploads to
 2 | be done asynchronously (that is, without a full page load).
 3 | 
 4 | To run this example, you'll need node.js and npm, and the node modules
 5 | "formidable" and "paperboy".
 6 | 
 7 |     $ npm install formidable paperboy
 8 |     $ node server.js
 9 | 
10 | Then load the URL http://localhost:8080/ and do some uploading.
11 | 


--------------------------------------------------------------------------------
/demo/layout.css:
--------------------------------------------------------------------------------
 1 | html { background: #aaa; }
 2 | body { background: #fff; border: 1px outset #999; color: #333;
 3 |   font: normal 90%/1.8 Arial,Helvetica,sans-serif; margin: 1em auto;
 4 |   padding: 10px 2em; width: 45em;
 5 | }
 6 | h1 { font-size: 140%; margin-bottom: 0; }
 7 | #help { color: #666; font-size: smaller; font-style: italic; line-height: 1.4em;
 8 |   margin: 0 0 2em;
 9 | }
10 | #help p { margin-top: 0; }
11 | form { background: #eee; border: 1px inset #ccc; margin: 1em 0;
12 |   padding: 5px 0 5px 25px;
13 | }
14 | form.loading { background: #eee url(spinner.gif) 5px 50% no-repeat; }
15 | 
16 | #filelist { list-style: none; margin: 1em 0; padding: 0; }
17 | #filelist li { padding-left: 25px; }
18 | #filelist li:nth-child(odd) { background: #f4f4f4; }


--------------------------------------------------------------------------------
/demo/server.js:
--------------------------------------------------------------------------------
 1 | var formidable = require("formidable"),
 2 |     http = require("http"),
 3 |     paperboy = require("paperboy"),
 4 |     path = require("path");
 5 | 
 6 | http.createServer(function(req, res) {
 7 |   if (req.url == "/upload" && req.method.toUpperCase() == "POST") {
 8 |     var form = new formidable.IncomingForm(),
 9 |         files = [];
10 |     form.on("file", function(field, file) {
11 |       files.push(file);
12 |     });
13 |     form.on("end", function() {
14 |       res.writeHead(200, {"Content-Type": "application/json"});
15 |       res.end(JSON.stringify({files: files}));
16 |     });
17 |     form.parse(req);
18 |   } else if (req.url == "/jquery.iframe-transport.js") {
19 |     paperboy.deliver(path.dirname(__dirname), req, res)
20 |   } else {
21 |     paperboy.deliver(__dirname, req, res)
22 |   }
23 | }).listen(8080, "127.0.0.1");
24 | 
25 | console.log("Server ready at http://localhost:8080/");


--------------------------------------------------------------------------------
/demo/client.js:
--------------------------------------------------------------------------------
 1 | (function($) {
 2 |   "use strict";
 3 | 
 4 |   $("form").on("change", ":file", function() {
 5 |     var form = $(this.form).addClass("loading");
 6 |     $.ajax(form.prop("action"), {
 7 |       files: form.find(":file"),
 8 |       iframe: true,
 9 |       dataType: "json"
10 |     }).always(function() {
11 |       form.removeClass("loading");
12 |     }).done(function(data) {
13 |       $.each(data.files, function(idx, file) {
14 |         $("<li><b></b> (<span class='size'></span>, <span class='mime'></span>)</li>")
15 |           .find("b").text(file.filename).end()
16 |           .find(".size").text(formatSize(file.length)).end()
17 |           .find(".mime").text(file.mime).end()
18 |           .appendTo("#filelist");
19 |       });
20 |       form.find(":file").val("");
21 |     });
22 |   });
23 | 
24 |   function formatSize(size) {
25 |     var units = ["B", "KB", "MB", "GB"];
26 |     var idx = 0;
27 |     while (size >= 1024) {
28 |       size /= 1024;
29 |       idx++;
30 |     }
31 |     return size.toFixed(0) + " " + units[idx];
32 |   }
33 | 
34 | })(jQuery);
35 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>jQuery Iframe Transport Demo</title>
 5 |     <link rel="stylesheet" href="layout.css">
 6 |   </head>
 7 |   <body>
 8 |     <h1>jQuery Iframe Transport Demo</h1>
 9 |     <div id="help">
10 |       <p>This is a simple example showing a file upload field that gets
11 |       transmitted asynchronously using the iframe transport. Just choose one or
12 |       more files, and they will be uploaded to the server (but not stored). After
13 |       one upload has completed, you can upload more files.</p>
14 |       <p>Please note that this example needs to run via
15 |       <a href="http://nodejs.org/">node.js</a>, as uploads require a server-side
16 |       component to work properly.</p>
17 |     </div>
18 |     <form id="upload" action="/upload" method="post" enctype="multipart/form-data">
19 |       <div>
20 |         <label>
21 |           Select files to upload:
22 |           <input type="file" name="file" multiple>
23 |         </label>
24 |       </div>
25 |     </form>
26 |     <ul id="filelist">
27 |     </ul>
28 |   </body>
29 |   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
30 |   <script src="jquery.iframe-transport.js"></script>
31 |   <script src="client.js"></script>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/jquery.iframe-transport.js:
--------------------------------------------------------------------------------
  1 | // This [jQuery](http://jquery.com/) plugin implements an `<iframe>`
  2 | // [transport](http://api.jquery.com/extending-ajax/#Transports) 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](http://github.com/cmlenz/jquery-iframe-transport)
  8 | // is available on [Github](http://github.com/) and dual licensed under the MIT
  9 | // or GPL Version 2 licenses.
 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 determine communicate problems using
 74 | // the content of the response payload. For example, consider using a JSON
 75 | // response such as 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 |       return "iframe";
100 |     }
101 |   });
102 | 
103 |   // Register a transport for the "iframe" data type. It will only activate
104 |   // when the "files" option has been set to a non-empty list of enabled file
105 |   // inputs.
106 |   $.ajaxTransport("iframe", function(options, origOptions, jqXHR) {
107 |     var form = null,
108 |         iframe = null,
109 |         name = "iframe-" + $.now(),
110 |         files = $(options.files).filter(":file:enabled"),
111 |         markers = null;
112 | 
113 |     // This function gets called after a successful submission or an abortion
114 |     // and should revert all changes made to the page to enable the
115 |     // submission via this transport.
116 |     function cleanUp() {
117 |       markers.replaceWith(function(idx) {
118 |         return files.get(idx);
119 |       });
120 |       form.remove();
121 |       iframe.attr("src", "javascript:false;").remove();
122 |     }
123 | 
124 |     // Remove "iframe" from the data types list so that further processing is
125 |     // based on the content type returned by the server, without attempting an
126 |     // (unsupported) conversion from "iframe" to the actual type.
127 |     options.dataTypes.shift();
128 | 
129 |     if (files.length) {
130 |       form = $("<form enctype='multipart/form-data' method='post'></form>").
131 |         hide().attr({action: options.url, target: name});
132 | 
133 |       // If there is any additional data specified via the `data` option,
134 |       // we add it as hidden fields to the form. This (currently) requires
135 |       // the `processData` option to be set to false so that the data doesn't
136 |       // get serialized to a string.
137 |       if (typeof(options.data) === "string" && options.data.length > 0) {
138 |         $.error("data must not be serialized");
139 |       }
140 |       $.each(options.data || {}, function(name, value) {
141 |         if ($.isPlainObject(value)) {
142 |           name = value.name;
143 |           value = value.value;
144 |         }
145 |         $("<input type='hidden' />").attr({name:  name, value: value}).
146 |           appendTo(form);
147 |       });
148 | 
149 |       // Add a hidden `X-Requested-With` field with the value `IFrame` to the
150 |       // field, to help server-side code to determine that the upload happened
151 |       // through this transport.
152 |       $("<input type='hidden' value='IFrame' name='X-Requested-With' />").
153 |         appendTo(form);
154 | 
155 |       // Move the file fields into the hidden form, but first remember their
156 |       // original locations in the document by replacing them with disabled
157 |       // clones. This should also avoid introducing unwanted changes to the
158 |       // page layout during submission.
159 |       markers = files.after(function(idx) {
160 |         return $(this).clone().prop("disabled", true);
161 |       }).next();
162 |       files.appendTo(form);
163 | 
164 |       return {
165 | 
166 |         // The `send` function is called by jQuery when the request should be
167 |         // sent.
168 |         send: function(headers, completeCallback) {
169 |           iframe = $("<iframe src='javascript:false;' name='" + name +
170 |             "' id='" + name + "' style='display:none'></iframe>");
171 | 
172 |           // The first load event gets fired after the iframe has been injected
173 |           // into the DOM, and is used to prepare the actual submission.
174 |           iframe.bind("load", function() {
175 | 
176 |             // The second load event gets fired when the response to the form
177 |             // submission is received. The implementation detects whether the
178 |             // actual payload is embedded in a `<textarea>` element, and
179 |             // prepares the required conversions to be made in that case.
180 |             iframe.unbind("load").bind("load", function() {
181 |               var doc = this.contentWindow ? this.contentWindow.document :
182 |                 (this.contentDocument ? this.contentDocument : this.document),
183 |                 root = doc.documentElement ? doc.documentElement : doc.body,
184 |                 textarea = root.getElementsByTagName("textarea")[0],
185 |                 type = textarea ? textarea.getAttribute("data-type") : null,
186 |                 status = textarea ? textarea.getAttribute("data-status") : 200,
187 |                 statusText = textarea ? textarea.getAttribute("data-statusText") : "OK",
188 |                 content = {
189 |                   html: root.innerHTML,
190 |                   text: type ?
191 |                     textarea.value :
192 |                     root ? (root.textContent || root.innerText) : null
193 |                 };
194 |               cleanUp();
195 |               completeCallback(status, statusText, content, type ?
196 |                 ("Content-Type: " + type) :
197 |                 null);
198 |             });
199 | 
200 |             // Now that the load handler has been set up, submit the form.
201 |             form[0].submit();
202 |           });
203 | 
204 |           // After everything has been set up correctly, the form and iframe
205 |           // get injected into the DOM so that the submission can be
206 |           // initiated.
207 |           $("body").append(form, iframe);
208 |         },
209 | 
210 |         // The `abort` function is called by jQuery when the request should be
211 |         // aborted.
212 |         abort: function() {
213 |           if (iframe !== null) {
214 |             iframe.unbind("load").attr("src", "javascript:false;");
215 |             cleanUp();
216 |           }
217 |         }
218 | 
219 |       };
220 |     }
221 |   });
222 | 
223 | })(jQuery);
224 | 


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