├── .gitignore
├── LICENSE
├── MANIFEST.in
├── README.rst
├── ajax_upload
    ├── __init__.py
    ├── admin.py
    ├── forms.py
    ├── models.py
    ├── settings.py
    ├── static
    │   └── ajax_upload
    │   │   ├── css
    │   │       └── ajax-upload-widget.css
    │   │   └── js
    │   │       ├── ajax-upload-widget.js
    │   │       └── jquery.iframe-transport.js
    ├── tests
    │   ├── __init__.py
    │   ├── files
    │   │   └── test.png
    │   ├── forms.py
    │   ├── tests.py
    │   ├── urls.py
    │   └── views.py
    ├── urls.py
    ├── views.py
    └── widgets.py
├── example
    ├── __init__.py
    ├── forms.py
    ├── models.py
    ├── templates
    │   └── example
    │   │   └── product.html
    ├── urls.py
    └── views.py
└── setup.py


/.gitignore:
--------------------------------------------------------------------------------
1 | *.py[co]
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2011, Zach Mathew
 2 | All rights reserved.
 3 | 
 4 | Redistribution and use in source and binary forms, with or without
 5 | modification, are permitted provided that the following conditions are met:
 6 | 
 7 |     * Redistributions of source code must retain the above copyright notice,
 8 |       this list of conditions and the following disclaimer.
 9 |     * Redistributions in binary form must reproduce the above copyright
10 |       notice, this list of conditions and the following disclaimer in the
11 |       documentation and/or other materials provided with the distribution.
12 |     * Neither the name of Trapeze Media nor the names of its contributors
13 |       may be used to endorse or promote products derived from this software
14 |       without specific prior written permission.
15 | 
16 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
17 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
18 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
19 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
20 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
21 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
22 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
23 | INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
24 | CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
25 | ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
26 | POSSIBILITY OF SUCH DAMAGE.


--------------------------------------------------------------------------------
/MANIFEST.in:
--------------------------------------------------------------------------------
1 | include README.rst
2 | include LICENSE
3 | include CHANGES
4 | recursive-include ajax_upload/static *
5 | recursive-include ajax_upload/templates *
6 | recursive-include ajax_upload/tests/files *
7 | include example/*.py
8 | recursive-include example/templates *
9 | 


--------------------------------------------------------------------------------
/README.rst:
--------------------------------------------------------------------------------
  1 | **This project is no longer maintained.**
  2 | 
  3 | Django Ajax Upload Widget
  4 | =========================
  5 | 
  6 | Provides AJAX file upload functionality for FileFields and ImageFields with a simple widget replacement in the form.
  7 | 
  8 | No change is required your model fields or app logic. This plugin acts transparently so your model forms can treat files as if they were uploaded by "traditional" browser file upload.
  9 | 
 10 | 
 11 | Features
 12 | --------
 13 | 
 14 | * Drop-in replacement for Django's built-in ``ClearableFileInput`` widget (no change required to your model).
 15 | * Works in all major browsers including IE 7+.
 16 | * Random hash string added to file names to ensure uploaded file paths are not guessable by others.
 17 | 
 18 | 
 19 | Usage
 20 | -----
 21 | 
 22 | Refer to the ``example`` app included in the package for a working example.
 23 | 
 24 | Server Side
 25 | '''''''''''
 26 | 
 27 | In your form, use the ``AjaxClearableFileInput`` on your ``FileField`` or ``ImageField``.
 28 | ::
 29 | 
 30 |     from django import forms
 31 |     from ajax_upload.widgets import AjaxClearableFileInput
 32 | 
 33 |     class MyForm(forms.Form):
 34 |         my_image_field = forms.ImageField(widget=AjaxClearableFileInput())
 35 | 
 36 | 
 37 | Or, if using a ``ModelForm`` you can just override the widget.
 38 | ::
 39 | 
 40 |     from django import forms
 41 |     from ajax_upload.widgets import AjaxClearableFileInput
 42 | 
 43 |     class MyForm(forms.ModelForm):
 44 |         class Meta:
 45 |             model = MyModel
 46 |             widgets = {
 47 |                 'my_image_field': AjaxClearableFileInput
 48 |             }
 49 | 
 50 | 
 51 | Client Side
 52 | '''''''''''
 53 | 
 54 | Include the Javascript (and optionally CSS) files in your page and call the ``autoDiscover`` function.
 55 | This will search the page for all the AJAX file input fields and apply the necessary Javascript.
 56 | ::
 57 | 
 58 |     <link href="{{ STATIC_URL }}ajax_upload/css/ajax-upload-widget.css" rel="stylesheet" type="text/css"/>
 59 |     <script src="{{ STATIC_URL }}ajax_upload/js/jquery.iframe-transport.js"></script>
 60 |     <script src="{{ STATIC_URL }}ajax_upload/js/ajax-upload-widget.js"></script>
 61 | 
 62 |     <script>
 63 |         $(function() {
 64 |             AjaxUploadWidget.autoDiscover();
 65 |         });
 66 |     </script>
 67 | 
 68 | 
 69 | You can also pass options to ``autoDiscover()``:
 70 | ::
 71 | 
 72 |     <script>
 73 |         $(function() {
 74 |             AjaxUploadWidget.autoDiscover({
 75 |                 changeButtonText: 'Click to change',
 76 |                 onError: function(data) { alert('Error!'); }
 77 |                 // see source for full list of options
 78 |             });
 79 |         });
 80 |     </script>
 81 | 
 82 | 
 83 | OR ... you can explicitly instantiate an AjaxUploadWidget on an AJAX file input field:
 84 | ::
 85 | 
 86 |     <input id="Foo" name="foo" type="file" data-upload-url="/ajax-upload/" data-filename="" data-required=""/>
 87 |     <!-- The input field needs to be outputed by Django to contain the appropriate data attributes -->
 88 | 
 89 |     <script>
 90 |         new AjaxUploadWidget($('#Foo'), {
 91 |             // options
 92 |         });
 93 |     </script>
 94 | 
 95 | 
 96 | Dependencies
 97 | ------------
 98 | * jQuery 1.7+
 99 | * jQuery Iframe Transport plugin (included in this package)
100 | 
101 | 
102 | App Installation
103 | ----------------
104 | 
105 | 1. Add ``ajax_upload`` to your ``INSTALLED_APPS`` setting.
106 | 
107 | 1. Hook in the urls.
108 | ::
109 | 
110 |     # urls.py
111 |     urlpatterns += patterns('',
112 |         (r'^ajax-upload/', include('ajax_upload.urls')),
113 |     )
114 | 
115 | 1. That's it (don't forget include the Javascript as mentioned above).
116 | 
117 | 
118 | Running the Tests
119 | -----------------
120 | ::
121 | 
122 |     ./manage.py test ajax_upload
123 | 
124 | 
125 | License
126 | -------
127 | 
128 | This app is licensed under the BSD license. See the LICENSE file for details.
129 | 


--------------------------------------------------------------------------------
/ajax_upload/__init__.py:
--------------------------------------------------------------------------------
1 | """Provides AJAX file upload functionality for FileFields and ImageFields with a simple widget replacement in the form."""
2 | 
3 | VERSION = (0, 5, 5)
4 | 
5 | __version__ = '.'.join(map(str, VERSION))
6 | 


--------------------------------------------------------------------------------
/ajax_upload/admin.py:
--------------------------------------------------------------------------------
 1 | from django.contrib import admin
 2 | 
 3 | from ajax_upload.models import UploadedFile
 4 | 
 5 | 
 6 | class UploadedFileAdmin(admin.ModelAdmin):
 7 |     list_display = ('__unicode__',)
 8 |     date_hierarchy = 'creation_date'
 9 |     search_fields = ('file',)
10 | 
11 | 
12 | admin.site.register(UploadedFile, UploadedFileAdmin)
13 | 


--------------------------------------------------------------------------------
/ajax_upload/forms.py:
--------------------------------------------------------------------------------
 1 | import uuid
 2 | 
 3 | from django import forms
 4 | 
 5 | from ajax_upload.models import UploadedFile
 6 | 
 7 | 
 8 | class UploadedFileForm(forms.ModelForm):
 9 | 
10 |     class Meta:
11 |         model = UploadedFile
12 |         fields = ('file',)
13 | 
14 |     def clean_file(self):
15 |         data = self.cleaned_data['file']
16 |         # Change the name of the file to something unguessable
17 |         # Construct the new name as <unique-hex>-<original>.<ext>
18 |         data.name = u'%s-%s' % (uuid.uuid4().hex, data.name)
19 |         return data
20 | 


--------------------------------------------------------------------------------
/ajax_upload/models.py:
--------------------------------------------------------------------------------
 1 | from django.db import models
 2 | from django.utils.translation import ugettext_lazy as _
 3 | 
 4 | from ajax_upload.settings import FILE_FIELD_MAX_LENGTH, UPLOAD_TO_DIRECTORY
 5 | 
 6 | 
 7 | class UploadedFile(models.Model):
 8 |     creation_date = models.DateTimeField(_('creation date'), auto_now_add=True)
 9 |     file = models.FileField(_('file'), max_length=FILE_FIELD_MAX_LENGTH, upload_to=UPLOAD_TO_DIRECTORY)
10 | 
11 |     class Meta:
12 |         ordering = ('id',)
13 |         verbose_name = _('uploaded file')
14 |         verbose_name_plural = _('uploaded files')
15 | 
16 |     def __unicode__(self):
17 |         return unicode(self.file)
18 | 
19 |     def delete(self, *args, **kwargs):
20 |         super(UploadedFile, self).delete(*args, **kwargs)
21 |         if self.file:
22 |             self.file.delete()
23 |     delete.alters_data = True
24 | 


--------------------------------------------------------------------------------
/ajax_upload/settings.py:
--------------------------------------------------------------------------------
1 | from django.conf import settings
2 | 
3 | 
4 | FILE_FIELD_MAX_LENGTH = getattr(settings, 'AJAX_UPLOAD_FILE_FIELD_MAX_LENGTH', 255)
5 | UPLOAD_TO_DIRECTORY = getattr(settings, 'AJAX_UPLOAD_FILE_TARGET_DIRECTORY', 'ajax_uploads/')
6 | 


--------------------------------------------------------------------------------
/ajax_upload/static/ajax_upload/css/ajax-upload-widget.css:
--------------------------------------------------------------------------------
 1 | .ajax-upload-preview-area {
 2 |     display: inline-block;
 3 |     background: #ddd;
 4 |     border-radius: 6px;
 5 |     border: 2px dashed #999;
 6 |     padding: 5px;
 7 |     margin-right: 5px;
 8 |     font-size: 12px;
 9 |     font-family: Arial, sans-serif;
10 |     text-align:  center;
11 | }
12 | .ajax-upload-preview-area img {
13 |     display: block;
14 |     max-width: 130px;
15 |     max-height: 130px;
16 |     border: 1px solid #666;
17 |     margin: 0 auto;
18 |     margin-top: 5px;
19 | }


--------------------------------------------------------------------------------
/ajax_upload/static/ajax_upload/js/ajax-upload-widget.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 |     var global = this;
  3 |     var $ = global.$;
  4 |     var console = global.console || {log: function() {}};
  5 | 
  6 |     var AjaxUploadWidget = global.AjaxUploadWidget = function(element, options) {
  7 |         this.options = {
  8 |             changeButtonText: 'Change',
  9 |             removeButtonText: 'Remove',
 10 |             previewAreaClass: 'ajax-upload-preview-area',
 11 |             previewFilenameLength: 30,
 12 |             onUpload: null, // right before uploading to the server
 13 |             onComplete: null,
 14 |             onError: null,
 15 |             onRemove: null
 16 |         };
 17 |         $.extend(this.options, options);
 18 |         this.$element = $(element);
 19 |         this.initialize();
 20 |     };
 21 | 
 22 |     AjaxUploadWidget.prototype.DjangoAjaxUploadError = function(message) {
 23 |         this.name = 'DjangoAjaxUploadError';
 24 |         this.message = message;
 25 |     };
 26 |     AjaxUploadWidget.prototype.DjangoAjaxUploadError.prototype = new Error();
 27 |     AjaxUploadWidget.prototype.DjangoAjaxUploadError.prototype.constructor = AjaxUploadWidget.prototype.DjangoAjaxUploadError;
 28 | 
 29 |     AjaxUploadWidget.prototype.initialize = function() {
 30 |         var self = this;
 31 |         this.name = this.$element.attr('name');
 32 | 
 33 |         // Create a hidden field to contain our uploaded file name
 34 |         this.$hiddenElement = $('<input type="hidden"/>')
 35 |             .attr('name', this.name)
 36 |             .val(this.$element.data('filename'));
 37 |         this.$element.attr('name', ''); // because we don't want to conflict with our hidden field
 38 |         this.$element.after(this.$hiddenElement);
 39 | 
 40 |         // Initialize preview area and action buttons
 41 |         this.$previewArea = $('<div class="'+this.options.previewAreaClass+'"></div>');
 42 |         this.$element.before(this.$previewArea);
 43 | 
 44 |         // Listen for when a file is selected, and perform upload
 45 |         this.$element.on('change', function(evt) {
 46 |             self.upload();
 47 |         });
 48 |         this.$changeButton = $('<button type="button" class="btn-change"></button>')
 49 |             .text(this.options.changeButtonText)
 50 |             .on('click', function(evt) {
 51 |                 self.$element.show();
 52 |                 $(this).hide();
 53 |             });
 54 |         this.$element.after(this.$changeButton);
 55 | 
 56 |         this.$removeButton = $('<button type="button" class="btn-remove"></button>')
 57 |             .text(this.options.removeButtonText)
 58 |             .on('click', function(evt) {
 59 |                 if(self.options.onRemove) {
 60 |                     var result = self.options.onRemove.call(self);
 61 |                     if(result === false) return;
 62 |                 }
 63 |                 self.$hiddenElement.val('');
 64 |                 self.displaySelection();
 65 |             });
 66 |         this.$changeButton.after(this.$removeButton);
 67 | 
 68 |         this.displaySelection();
 69 |     };
 70 | 
 71 |     AjaxUploadWidget.prototype.upload = function() {
 72 |         var self = this;
 73 |         if(!this.$element.val()) return;
 74 |         if(this.options.onUpload) {
 75 |             var result = this.options.onUpload.call(this);
 76 |             if(result === false) return;
 77 |         }
 78 |         this.$element.attr('name', 'file');
 79 |         $.ajax(this.$element.data('upload-url'), {
 80 |             iframe: true,
 81 |             files: this.$element,
 82 |             processData: false,
 83 |             type: 'POST',
 84 |             dataType: 'json',
 85 |             success: function(data) { self.uploadDone(data); },
 86 |             error: function(data) { self.uploadFail(data); }
 87 |         });
 88 |     };
 89 | 
 90 |     AjaxUploadWidget.prototype.uploadDone = function(data) {
 91 |         // This handles errors as well because iframe transport does not
 92 |         // distinguish between 200 response and other errors
 93 |         if(data.errors) {
 94 |             if(this.options.onError) {
 95 |                 this.options.onError.call(this, data);
 96 |             } else {
 97 |                 console.log('Upload failed:');
 98 |                 console.log(data);
 99 |             }
100 |         } else {
101 |             this.$hiddenElement.val(data.path);
102 |             var tmp = this.$element;
103 |             this.$element = this.$element.clone(true).val('');
104 |             tmp.replaceWith(this.$element);
105 |             this.displaySelection();
106 |             if(this.options.onComplete) this.options.onComplete.call(this, data.path);
107 |         }
108 |     };
109 | 
110 |     AjaxUploadWidget.prototype.uploadFail = function(xhr) {
111 |         if(this.options.onError) {
112 |             this.options.onError.call(this);
113 |         } else {
114 |             console.log('Upload failed:');
115 |             console.log(xhr);
116 |         }
117 |     };
118 | 
119 |     AjaxUploadWidget.prototype.displaySelection = function() {
120 |         var filename = this.$hiddenElement.val();
121 | 
122 |         if(filename !== '') {
123 |             this.$previewArea.empty();
124 |             this.$previewArea.append(this.generateFilePreview(filename));
125 | 
126 |             this.$previewArea.show();
127 |             this.$changeButton.show();
128 |             if(this.$element.data('required') === 'True') {
129 |                 this.$removeButton.hide();
130 |             } else {
131 |                 this.$removeButton.show();
132 |             }
133 |             this.$element.hide();
134 |         } else {
135 |             this.$previewArea.slideUp();
136 |             this.$changeButton.hide();
137 |             this.$removeButton.hide();
138 |             this.$element.show();
139 |         }
140 |     };
141 | 
142 |     AjaxUploadWidget.prototype.generateFilePreview = function(filename) {
143 |         // Returns the html output for displaying the given uploaded filename to the user.
144 |         var prettyFilename = this.prettifyFilename(filename);
145 |         var output = '<a href="'+filename+'" target="_blank">'+prettyFilename+'';
146 |         $.each(['jpg', 'jpeg', 'png', 'gif'], function(i, ext) {
147 |             if(filename.toLowerCase().slice(-ext.length) == ext) {
148 |                 output += '<img src="'+filename+'"/>';
149 |                 return false;
150 |             }
151 |         });
152 |         output += '</a>';
153 |         return output;
154 |     };
155 | 
156 |     AjaxUploadWidget.prototype.prettifyFilename = function(filename) {
157 |         // Get rid of the folder names
158 |         var cleaned = filename.slice(filename.lastIndexOf('/')+1);
159 | 
160 |         // Strip the random hex in the filename inserted by the backend (if present)
161 |         var re = /^[a-f0-9]{32}\-/i;
162 |         cleaned = cleaned.replace(re, '');
163 | 
164 |         // Truncate the filename
165 |         var maxChars = this.options.previewFilenameLength;
166 |         var elipsis = '...';
167 |         if(cleaned.length > maxChars) {
168 |             cleaned = elipsis + cleaned.slice((-1 * maxChars) + elipsis.length);
169 |         }
170 |         return cleaned;
171 |     };
172 | 
173 |     AjaxUploadWidget.autoDiscover = function(options) {
174 |         $('input[type="file"].ajax-upload').each(function(index, element) {
175 |             new AjaxUploadWidget(element, options);
176 |         });
177 |     };
178 | }).call(this);
179 | 


--------------------------------------------------------------------------------
/ajax_upload/static/ajax_upload/js/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 | 


--------------------------------------------------------------------------------
/ajax_upload/tests/__init__.py:
--------------------------------------------------------------------------------
1 | from ajax_upload.tests.tests import *
2 | 


--------------------------------------------------------------------------------
/ajax_upload/tests/files/test.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmathew/django-ajax-upload-widget/bfbeae54cd555e44a7ce7915aeb43ee32e16924a/ajax_upload/tests/files/test.png


--------------------------------------------------------------------------------
/ajax_upload/tests/forms.py:
--------------------------------------------------------------------------------
1 | from django import forms
2 | 
3 | from ajax_upload.widgets import AjaxClearableFileInput
4 | 
5 | 
6 | class TestForm(forms.Form):
7 |     my_file = forms.FileField(required=False, widget=AjaxClearableFileInput)
8 |     my_image = forms.ImageField(required=False, widget=AjaxClearableFileInput)
9 | 


--------------------------------------------------------------------------------
/ajax_upload/tests/tests.py:
--------------------------------------------------------------------------------
  1 | import json
  2 | import os
  3 | import unittest
  4 | 
  5 | from django.conf import settings
  6 | from django.core.urlresolvers import reverse
  7 | from django.test import TestCase
  8 | from django.utils.translation import ugettext as _
  9 | 
 10 | from ajax_upload.models import UploadedFile
 11 | from ajax_upload.widgets import AjaxUploadException
 12 | 
 13 | 
 14 | TEST_FILEPATH = os.path.dirname(__file__) + '/files/test.png'
 15 | 
 16 | 
 17 | class UploaderTestHelper(object):
 18 | 
 19 |     def tearDown(self):
 20 |         # Delete all uploaded files created during testing
 21 |         for up in UploadedFile.objects.all():
 22 |             if up.file:
 23 |                 up.file.delete()
 24 | 
 25 |     def create_uploaded_file(self, **kwargs):
 26 |         defaults = {
 27 |             'file': 'test.png'
 28 |         }
 29 |         defaults.update(kwargs)
 30 |         return UploadedFile.objects.create(**defaults)
 31 | 
 32 | 
 33 | class AjaxUploadTests(UploaderTestHelper, TestCase):
 34 | 
 35 |     def test_upload_file_submission_saves_file_with_different_name_and_returns_json_data(self):
 36 |         post_data = {
 37 |             'file': open(TEST_FILEPATH)
 38 |         }
 39 |         response = self.client.post(reverse('ajax-upload'), post_data)
 40 |         self.assertEqual(response.status_code, 200)
 41 |         json_data = json.loads(response.content)
 42 |         uploaded_file = UploadedFile.objects.get()
 43 |         self.assertTrue(os.path.exists(uploaded_file.file.path))
 44 |         self.assertEqual(json_data['path'], uploaded_file.file.url)
 45 |         # This is a not-so-good test to verify that the filename name is modified
 46 |         self.assertTrue(len(os.path.basename(uploaded_file.file.name)) > 16)
 47 | 
 48 |     def test_upload_file_submission_missing_file_returns_error(self):
 49 |         post_data = {
 50 |             'file': ''
 51 |         }
 52 |         response = self.client.post(reverse('ajax-upload'), post_data)
 53 |         self.assertEqual(response.status_code, 400)
 54 |         json_data = json.loads(response.content)
 55 |         self.assertTrue('errors' in json_data)
 56 |         self.assertEqual(json_data['errors']['file'][0], _('This field is required.'))
 57 | 
 58 |     def test_upload_file_get_request_returns_405(self):
 59 |         response = self.client.get(reverse('ajax-upload'))
 60 |         self.assertEqual(response.status_code, 405)
 61 | 
 62 | 
 63 | class AjaxFileInputTests(UploaderTestHelper, TestCase):
 64 |     urls = 'ajax_upload.tests.urls'
 65 | 
 66 |     def test_submit_form_with_uploaded_file_path(self):
 67 |         # First ajax upload the file to the uploader
 68 |         post_data = {
 69 |             'file': open(TEST_FILEPATH)
 70 |         }
 71 |         response = self.client.post(reverse('ajax-upload'), post_data)
 72 |         self.assertEqual(response.status_code, 200)
 73 |         json_data = json.loads(response.content)
 74 |         uploaded_file = UploadedFile.objects.get()
 75 |         self.assertTrue(os.path.exists(uploaded_file.file.path))
 76 | 
 77 |         # Now submit the original form with the path of the uploaded file
 78 |         post_data = {
 79 |             'my_file': json_data['path'],
 80 |             'my_image': json_data['path']  # We're testing both AjaxFileField and AjaxImageField
 81 |         }
 82 |         response = self.client.post(reverse('ajax-uploads-test'), post_data)
 83 |         self.assertEqual(response.status_code, 200)
 84 |         parsed = json.loads(response.content)
 85 |         self.assertEqual(parsed['uploaded_file_name'], json_data['path'].replace(settings.MEDIA_URL, ''))
 86 |         self.assertEqual(parsed['uploaded_image_name'], json_data['path'].replace(settings.MEDIA_URL, ''))
 87 | 
 88 |     def test_submit_form_with_empty_path_clears_existing_file(self):
 89 |         post_data = {
 90 |             'my_file': '',
 91 |             'my_image': ''
 92 |         }
 93 |         response = self.client.post(reverse('ajax-uploads-test'), post_data)
 94 |         self.assertEqual(response.status_code, 200)
 95 |         parsed = json.loads(response.content)
 96 |         self.assertEqual(parsed['uploaded_file_name'], 'False')
 97 |         self.assertEqual(parsed['uploaded_image_name'], 'False')
 98 | 
 99 |     @unittest.skipUnless(settings.MEDIA_URL, 'Requires non-empty MEDIAL_URL')
100 |     def test_submit_form_with_external_file_path_returns_error(self):
101 |         post_data = {
102 |             'my_file': 'http://www.google.com/invalid.txt',
103 |             'my_image': 'http://www.google.com/invalid.png'
104 |         }
105 |         try:
106 |             self.client.post(reverse('ajax-uploads-test'), post_data)
107 |         except AjaxUploadException, err:
108 |             self.assertTrue(str(err).startswith(_('File path not allowed:')))
109 |         else:
110 |             self.fail()
111 | 
112 |     def test_submit_form_with_internal_file_path_ignores_it_and_retains_original_value(self):
113 |         # In this scenario, we're simulating the submission of an form that had
114 |         # an existing file specified and didn't change/ajax upload it (eg. an update form).
115 |         post_data = {
116 |             'my_file': '%ssome/INVALID-path/file.txt' % settings.MEDIA_URL,  # invalid path
117 |             'my_image': '%ssome/path/image.png' % settings.MEDIA_URL  # valid path
118 |             # We ignore BOTH valid and invalid paths to prevent the user from setting
119 |             # the value to a file that they did not upload
120 |         }
121 |         response = self.client.post(reverse('ajax-uploads-test'), post_data)
122 |         self.assertEqual(response.status_code, 200)
123 |         parsed = json.loads(response.content)
124 |         self.assertEqual(parsed['uploaded_file_name'], 'some/path/file.txt')
125 |         self.assertEqual(parsed['uploaded_image_name'], 'some/path/image.png')
126 | 
127 |     def test_submit_form_normally_with_file_data_in_multipart_format(self):
128 |         # Here we will NOT use the AJAX uploader to ensure the file field works normally.
129 |         post_data = {
130 |             'my_file': open(TEST_FILEPATH),
131 |             'my_image': open(TEST_FILEPATH)
132 |         }
133 |         response = self.client.post(reverse('ajax-uploads-test'), post_data)
134 |         self.assertEqual(response.status_code, 200)
135 |         parsed = json.loads(response.content)
136 |         self.assertTrue('errors' not in parsed)
137 |         self.assertTrue('uploaded_file_name' in parsed)
138 |         self.assertTrue('uploaded_image_name' in parsed)
139 | 


--------------------------------------------------------------------------------
/ajax_upload/tests/urls.py:
--------------------------------------------------------------------------------
1 | from django.conf.urls import patterns, url
2 | 
3 | from ajax_upload.urls import urlpatterns
4 | 
5 | 
6 | urlpatterns += patterns('ajax_upload.tests.views',
7 |     url(r'^test/$', 'test_view', name='ajax-uploads-test'),
8 | )
9 | 


--------------------------------------------------------------------------------
/ajax_upload/tests/views.py:
--------------------------------------------------------------------------------
 1 | import json
 2 | 
 3 | from django.http import HttpResponse, HttpResponseBadRequest
 4 | 
 5 | from ajax_upload.tests.forms import TestForm
 6 | 
 7 | 
 8 | def test_view(request):
 9 |     form = TestForm(data=request.POST, files=request.FILES, initial={
10 |         'my_file': 'some/path/file.txt',
11 |         'my_image': 'some/path/image.png',
12 |     })
13 |     if form.is_valid():
14 |         data = {
15 |             'uploaded_file_name': str(form.cleaned_data['my_file']),
16 |             'uploaded_image_name': str(form.cleaned_data['my_image'])
17 |         }
18 |         return HttpResponse(
19 |             json.dumps(data), content_type='application/json'
20 |         )
21 |     else:
22 |         return HttpResponseBadRequest(
23 |             json.dumps({'errors': form.errors}),
24 |             content_type='application/json'
25 |         )
26 | 


--------------------------------------------------------------------------------
/ajax_upload/urls.py:
--------------------------------------------------------------------------------
1 | from django.conf.urls import patterns, url
2 | 
3 | 
4 | urlpatterns = patterns('ajax_upload.views',
5 |     url(r'^$', 'upload', name='ajax-upload'),
6 | )
7 | 


--------------------------------------------------------------------------------
/ajax_upload/views.py:
--------------------------------------------------------------------------------
 1 | import json
 2 | 
 3 | from django.http import HttpResponse, HttpResponseBadRequest
 4 | from django.views.decorators.csrf import csrf_exempt
 5 | from django.views.decorators.http import require_POST
 6 | 
 7 | from ajax_upload.forms import UploadedFileForm
 8 | 
 9 | 
10 | @csrf_exempt
11 | @require_POST
12 | def upload(request):
13 |     form = UploadedFileForm(data=request.POST, files=request.FILES)
14 |     if form.is_valid():
15 |         uploaded_file = form.save()
16 |         data = {
17 |             'path': uploaded_file.file.url,
18 |         }
19 |         return HttpResponse(json.dumps(data))
20 |     else:
21 |         return HttpResponseBadRequest(json.dumps({'errors': form.errors}))
22 | 


--------------------------------------------------------------------------------
/ajax_upload/widgets.py:
--------------------------------------------------------------------------------
 1 | from django import forms
 2 | from django.conf import settings
 3 | from django.core.files import File
 4 | from django.core.urlresolvers import reverse
 5 | from django.utils.safestring import mark_safe
 6 | from django.utils.translation import ugettext as _
 7 | 
 8 | import urllib2
 9 | 
10 | from ajax_upload.models import UploadedFile
11 | 
12 | 
13 | class AjaxUploadException(Exception):
14 |     pass
15 | 
16 | 
17 | class AjaxClearableFileInput(forms.ClearableFileInput):
18 |     template_with_clear = ''  # We don't need this
19 |     template_with_initial = '%(input)s'
20 | 
21 |     def render(self, name, value, attrs=None):
22 |         attrs = attrs or {}
23 |         if value:
24 |             filename = u'%s%s' % (settings.MEDIA_URL, value)
25 |         else:
26 |             filename = ''
27 |         attrs.update({
28 |             'class': attrs.get('class', '') + 'ajax-upload',
29 |             'data-filename': filename,  # This is so the javascript can get the actual value
30 |             'data-required': self.is_required or '',
31 |             'data-upload-url': reverse('ajax-upload')
32 |         })
33 |         output = super(AjaxClearableFileInput, self).render(name, value, attrs)
34 |         return mark_safe(output)
35 | 
36 |     def value_from_datadict(self, data, files, name):
37 |         # If a file was uploaded or the clear checkbox was checked, use that.
38 |         file = super(AjaxClearableFileInput, self).value_from_datadict(data, files, name)
39 |         if file is not None:  # super class may return a file object, False, or None
40 |             return file  # Default behaviour
41 |         elif name in data:  # This means a file path was specified in the POST field
42 |             file_path = data.get(name)
43 |             if not file_path:
44 |                 return False  # False means clear the existing file
45 |             elif file_path.startswith(settings.MEDIA_URL):
46 |                 # Strip and media url to determine the path relative to media url base
47 |                 relative_path = file_path[len(settings.MEDIA_URL):]
48 |                 relative_path = urllib2.unquote(relative_path.encode('utf8')).decode('utf8')
49 |                 try:
50 |                     uploaded_file = UploadedFile.objects.get(file=relative_path)
51 |                 except UploadedFile.DoesNotExist:
52 |                     # Leave the file unchanged (it could be the original file path)
53 |                     return None
54 |                 else:
55 |                     return File(uploaded_file.file)
56 |             else:
57 |                 raise AjaxUploadException(u'%s %s' % (_('File path not allowed:'), file_path))
58 |         return None
59 | 


--------------------------------------------------------------------------------
/example/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmathew/django-ajax-upload-widget/bfbeae54cd555e44a7ce7915aeb43ee32e16924a/example/__init__.py


--------------------------------------------------------------------------------
/example/forms.py:
--------------------------------------------------------------------------------
 1 | from django import forms
 2 | 
 3 | from ajax_upload.widgets import AjaxClearableFileInput
 4 | 
 5 | from example.models import Product
 6 | 
 7 | 
 8 | class ProductForm(forms.ModelForm):
 9 |     class Meta:
10 |         model = Product
11 |         widgets = {
12 |             'image': AjaxClearableFileInput
13 |         }
14 | 


--------------------------------------------------------------------------------
/example/models.py:
--------------------------------------------------------------------------------
1 | from django.db import models
2 | 
3 | 
4 | class Product(models.Model):
5 |     name = models.CharField(max_length=255)
6 |     description = models.TextField()
7 |     image = models.ImageField(upload_to='examples/', blank=True)
8 | 


--------------------------------------------------------------------------------
/example/templates/example/product.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <link href="{{ STATIC_URL }}ajax_upload/css/ajax-upload-widget.css" rel="stylesheet" type="text/css"/>
 4 | 
 5 |     <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 6 |     <script src="{{ STATIC_URL }}ajax_upload/js/jquery.iframe-transport.js"></script>
 7 |     <script src="{{ STATIC_URL }}ajax_upload/js/ajax-upload-widget.js"></script>
 8 | 
 9 |     <form action="" method="POST" enctype="multipart/form-data">
10 |         <h1>{% if product %}Editing Product: {{ product.name }}{% else %}Add Product{% endif %}</h1>
11 |         {% csrf_token %}
12 |         {{ form.as_p }}
13 |         <input type="submit" value="Save"/>
14 |     </form>
15 |         <script>
16 |             $(function() {
17 |                 AjaxUploadWidget.autoDiscover();
18 |             });
19 |         </script>
20 | </html>


--------------------------------------------------------------------------------
/example/urls.py:
--------------------------------------------------------------------------------
1 | from django.conf.urls.defaults import patterns, url
2 | 
3 | 
4 | urlpatterns = patterns('example.views',
5 |     url(r'^add/$', 'add_edit_product', name='example-add-product'),
6 |     url(r'^edit/(?P<product_id>\d+)/$', 'add_edit_product', name='example-edit-product'),
7 | )
8 | 


--------------------------------------------------------------------------------
/example/views.py:
--------------------------------------------------------------------------------
 1 | from django.core.urlresolvers import reverse
 2 | from django.shortcuts import get_object_or_404, render, redirect
 3 | 
 4 | from example.forms import ProductForm
 5 | from example.models import Product
 6 | 
 7 | 
 8 | def add_edit_product(request, product_id=None):
 9 |     if product_id:
10 |         product = get_object_or_404(Product, id=product_id)
11 |     else:
12 |         product = None
13 | 
14 |     if request.method == 'POST':
15 |         form = ProductForm(instance=product, data=request.POST, files=request.FILES)
16 |         if form.is_valid():
17 |             product = form.save()
18 |             return redirect(reverse('example-edit-product', args=[product.id]))
19 |     else:
20 |         form = ProductForm(instance=product)
21 | 
22 |     return render(request, 'example/product.html', dictionary={
23 |         'form': form,
24 |         'product': product,
25 |     })
26 | 


--------------------------------------------------------------------------------
/setup.py:
--------------------------------------------------------------------------------
 1 | from setuptools import setup, find_packages
 2 | 
 3 | import ajax_upload
 4 | 
 5 | 
 6 | setup(
 7 |     name='django-ajax-upload-widget',
 8 |     packages=find_packages(exclude=['example']),
 9 |     include_package_data=True,
10 |     zip_safe=False,  # Because of static and template files
11 |     version=ajax_upload.__version__,
12 |     description=ajax_upload.__doc__,
13 |     long_description=open('README.rst').read(),
14 |     classifiers=[
15 |         'Framework :: Django',
16 |         'Intended Audience :: Developers',
17 |         'License :: OSI Approved :: BSD License',
18 |         'Operating System :: OS Independent',
19 |         'Topic :: Software Development'
20 |     ],
21 |     author='Zach Mathew',
22 |     url='http://github.com/zmathew/django-ajax-upload-widget',
23 |     license='BSD',
24 | )
25 | 


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