Working now with inline 'add another'. Max length now has a default of 255 so is an optional param. Javascript refactor.

Author: andybak

README.rst

@@ -15,4 +15,4 @@ Installation
 * from browse_and_upload_field.fields import FileBrowseAndUploadField
 * Use in the same way as the existing FileBrowseField and UploadField
 
-    my_image = FileBrowseAndUploadField(max_length=512, null=True, blank=True, format="image", directory='images', upload_to='images')
+    my_image = FileBrowseAndUploadField(null=True, blank=True, format="image", directory='images', upload_to='images')

browse_and_upload_field/fields.py

@@ -31,9 +31,13 @@ class Media:
         js = (
             'filebrowser/js/AddFileBrowser.js',
             'filebrowser/js/fileuploader.js',
+            'filebrowser/js/insQ.js',
+            'filebrowser/js/custom_upload_field.js',
         )
         css = {
-            'all': (os.path.join('/static/filebrowser/css/uploadfield.css'),)
+            'all': (
+                'filebrowser/css/uploadfield.css',
+            )
         }
 
     def __init__(self, attrs=None):
@@ -59,18 +63,19 @@ def render(self, name, value, attrs=None):
         final_attrs = self.build_attrs(attrs, type=self.input_type, name=name)
         final_attrs['search_icon'] = static('filebrowser/img/filebrowser_icon_show.gif')
         final_attrs['url'] = url
-        final_attrs['directory'] = self.directory
+        final_attrs['directory'] = self.directory or self.upload_to
         final_attrs['filebrowser_directory'] = self.site.directory
         final_attrs['extensions'] = self.extensions
         final_attrs['format'] = self.format
         final_attrs['upload_to'] = self.upload_to
         final_attrs['temp_upload_dir'] = UPLOAD_TEMPDIR
         final_attrs['ADMIN_THUMBNAIL'] = ADMIN_THUMBNAIL
         filebrowser_site = self.site
-        if value != "":
+        if value:
+            # If we have an image then filebrowser should open to that directory rather than the default
             try:
                 final_attrs['directory'] = os.path.split(value.original.path_relative_directory)[0]
-            except:
+            except Exception:
                 pass
         return render_to_string("filebrowser/custom_browse_and_upload_field.html", locals())
 
@@ -114,6 +119,7 @@ def __init__(self, *args, **kwargs):
         self.format = kwargs.pop('format', '')
         self.upload_to = kwargs.pop('upload_to', '')
         self.temp_upload_dir = kwargs.pop('temp_upload_dir', '') or UPLOAD_TEMPDIR
+        kwargs['max_length'] = kwargs.get('max_length', False) or 255 
         return super(FileBrowseAndUploadField, self).__init__(*args, **kwargs)
 
     def to_python(self, value):
@@ -158,19 +164,15 @@ def formfield(self, **kwargs):
         return super(FileBrowseAndUploadField, self).formfield(**defaults)
 
     def upload_callback(self, sender, instance, created, using, **kwargs):
-
+        
         opts = instance._meta
         fields = [f.name for f in opts.fields]
 
-        if "image" in fields and instance.image:
-            
-            try:
-                filename = os.path.basename(smart_text(instance.image)).split("__")[1]
-            except:
-                filename = os.path.basename(smart_text(instance.image))
+        if "image" in fields and instance.image:  # TODO this hardcodes 'image' as the field name
 
+            filename = os.path.basename(smart_text(instance.image))
             upload_to = opts.get_field("image").upload_to
-            filebrowser_directory = opts.get_field("image").directory or self.site.directory
+            filebrowser_directory = self.site.directory
 
             if getattr(upload_to, '__call__', None):
                 upload_to = os.path.split(upload_to(instance, filename))[0]

browse_and_upload_field/static/filebrowser/js/custom_upload_field.js

@@ -0,0 +1,151 @@
+(function($){
+    $(document).ready(function() {
+        
+        function initUploader($el) {
+
+            var action = $el.data('action');
+            var csrf_token = $el.data('title');
+            var dir = $el.data('directory');
+            var folder = $el.data('folder');
+            var format = $el.data('format');
+            var id_prefix = $el.data('input-id');
+            var title = $el.data('title');
+            var url = $el.data('url') + '?pop=1';
+            
+            if (dir !== undefined) {
+                url += '&dir=' + dir;
+            }
+            if (format !== undefined) {
+                url += '&type=' + format;
+            }
+            
+            $('#' + id_prefix + '-fb_show').click(function() {
+                
+                FileBrowser.show(
+                    id_prefix,
+                    url,
+                    function(){
+                        // Set the text label when the filebrowser window is closed
+                        var pathParts = $('#' + id_prefix).val().split('/');
+                        var filename = pathParts[pathParts.length -1 ];
+                        $('#' + id_prefix + '-textLabel').text(filename); 
+                    });
+            });
+            var uploader = new qq.FileUploader({
+
+                element: $el[0],
+                action: action,
+
+                template: '<div class="fb-uploader">' +
+                            '<div class="fb-upload-list"></div>' +
+                            '<a href="javascript://" class="fb-upload-button" title="' + title + '">&nbsp;</a>' +
+                            '<div class="fb-upload-drop-area"><span>Drop files here to upload</span></div>' +
+                          '</div>',
+
+                // Template for one item in file list
+                fileTemplate: '<div class="fb-upload-item">' +
+                                '<span class="fb-upload-file"></span>' +
+                                '<span class="fb-upload-spinner">&nbsp;</span>' +
+                                '<span class="fb-upload-size"></span>' +
+                                '<a class="fb-upload-cancel" href="#"></a>' +
+                                '<span class="fb-upload-failed-text"></span>' +
+                                '<div class="progress-bar">' +
+                                    '<div class="content"></div>' +
+                                '</div>' +
+                              '</div>',
+
+                classes: {
+                    // Used to get elements from templates
+                    button: 'fb-upload-button',
+                    drop: 'fb-upload-drop-area',
+                    dropActive: 'fb-upload-drop-area-active',
+                    list: 'fb-upload-list',
+
+                    file: 'fb-upload-file',
+                    spinner: 'fb-upload-spinner',
+                    size: 'fb-upload-size',
+                    cancel: 'fb-upload-cancel',
+
+                    // Added to list item when upload completes
+                    // Used in css to hide progress spinner
+                    success: 'fb-upload-success',
+                    fail: 'fb-upload-fail'
+                },
+
+                params: {
+                    'csrf_token': csrf_token,
+                    'csrf_name': 'csrfmiddlewaretoken',
+                    'csrf_xname': 'X-CSRFToken',
+                    'temporary': 'true',
+                    'folder': folder
+                },
+
+                minSizeLimit: 0,
+                debug: false,
+
+                getItem: function(id) {
+                    var items = $(this.element).find('.fb-upload-file').get();
+                    var item = items.pop();
+
+                    while (typeof item != "undefined") {
+                        if (item.qqFileId == id) {
+                            return $(item);
+                        }
+                        item = items.pop();
+                    }
+                },
+
+                onProgress: function(id, fileName, loaded, total){
+                    var bar = $(this.element).find('.progress-bar .content');
+                    var new_width = '' + (loaded/total * 100) + '%';
+                    bar.css('width', new_width);
+                },
+
+                onComplete: function(id, fileName, resp){
+                    if (resp.success) {
+                        $(this.element).find('.progress-bar').fadeOut();
+                        $('#' + id_prefix).val(resp.temp_filename);
+                        $('#' + id_prefix + '-textLabel').text(resp.filename);
+                        var previewContainer = $el.parent().parent().find('p.preview');
+                        previewContainer.find('a').attr('href', resp.url);
+                        previewContainer.find('img').attr('src', resp.admin_thumbnail_url);
+                        previewContainer.show();
+                    }
+                },
+
+                showMessage: function(message){
+                    alert(message);
+                }
+                
+            });
+
+            // Fix error in django.formset.js caused by the hidden uploader input with no id
+            var container = $el.closest('.fb-uploadfield');
+            var id = container.find('.vFileBrowseField').get(-1).id;
+            container.find('.fb-upload-button input').attr('id', id + '-uploadInput');
+
+        }
+        
+        // See https://github.com/naugtur/insertionQuery
+        // Hook to run code after 'add another' has been used on inlines
+        // Hooking into the add-row click was unreliable and the only other options were timeout polling
+        // For Django 1.9+ we can use https://code.djangoproject.com/ticket/15760 instead
+        insertionQ('.fb-uploadfield').every(function(element){
+            
+            var $el = $(element);
+            var container = $el.find('.fb-uploader-container');
+            var inlineRowCount = container.closest('.inline-group').find('.form-row').not('.empty-form').length - 1;
+            var inputId = container.data('input-id');
+            container.data('input-id', inputId.replace('__prefix__', inlineRowCount));
+            initUploader(container);
+            
+        });        
+        
+        $('.fb-uploader-container').each(function(index) {
+            var $el = $(this);
+            initUploader($el);
+        });
+
+    });
+    
+})(django.jQuery);

browse_and_upload_field/static/filebrowser/js/insQ.js

@@ -0,0 +1,163 @@
+var insertionQ = (function () {
+    "use strict";
+
+    var sequence = 100,
+        isAnimationSupported = false,
+        animationstring = 'animationName',
+        keyframeprefix = '',
+        domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+        pfx = '',
+        elm = document.createElement('div'),
+        options = {
+            strictlyNew: true,
+            timeout: 20
+        };
+
+    if (elm.style.animationName) {
+        isAnimationSupported = true;
+    }
+
+    if (isAnimationSupported === false) {
+        for (var i = 0; i < domPrefixes.length; i++) {
+            if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
+                pfx = domPrefixes[i];
+                animationstring = pfx + 'AnimationName';
+                keyframeprefix = '-' + pfx.toLowerCase() + '-';
+                isAnimationSupported = true;
+                break;
+            }
+        }
+    }
+
+
+    function listen(selector, callback) {
+        var styleAnimation, animationName = 'insQ_' + (sequence++);
+
+        var eventHandler = function (event) {
+            if (event.animationName === animationName || event[animationstring] === animationName) {
+                if (!isTagged(event.target)) {
+                    callback(event.target);
+                }
+            }
+        };
+
+        styleAnimation = document.createElement('style');
+        styleAnimation.innerHTML = '@' + keyframeprefix + 'keyframes ' + animationName + ' {  from {  outline: 1px solid transparent  } to {  outline: 0px solid transparent }  }' +
+            "\n" + selector + ' { animation-duration: 0.001s; animation-name: ' + animationName + '; ' +
+            keyframeprefix + 'animation-duration: 0.001s; ' + keyframeprefix + 'animation-name: ' + animationName + '; ' +
+            ' } ';
+
+        document.head.appendChild(styleAnimation);
+
+        var bindAnimationLater = setTimeout(function () {
+            document.addEventListener('animationstart', eventHandler, false);
+            document.addEventListener('MSAnimationStart', eventHandler, false);
+            document.addEventListener('webkitAnimationStart', eventHandler, false);
+            //event support is not consistent with DOM prefixes
+        }, options.timeout); //starts listening later to skip elements found on startup. this might need tweaking
+
+        return {
+            destroy: function () {
+                clearTimeout(bindAnimationLater);
+                if (styleAnimation) {
+                    document.head.removeChild(styleAnimation);
+                    styleAnimation = null;
+                }
+                document.removeEventListener('animationstart', eventHandler);
+                document.removeEventListener('MSAnimationStart', eventHandler);
+                document.removeEventListener('webkitAnimationStart', eventHandler);
+            }
+        };
+    }
+
+
+    function tag(el) {
+        el.QinsQ = true; //bug in V8 causes memory leaks when weird characters are used as field names. I don't want to risk leaking DOM trees so the key is not '-+-' anymore
+    }
+
+    function isTagged(el) {
+        return (options.strictlyNew && (el.QinsQ === true));
+    }
+
+    function topmostUntaggedParent(el) {
+        if (isTagged(el.parentNode)) {
+            return el;
+        } else {
+            return topmostUntaggedParent(el.parentNode);
+        }
+    }
+
+    function tagAll(e) {
+        tag(e);
+        e = e.firstChild;
+        for (; e; e = e.nextSibling) {
+            if (e !== undefined && e.nodeType === 1) {
+                tagAll(e);
+            }
+        }
+    }
+
+    //aggregates multiple insertion events into a common parent
+    function catchInsertions(selector, callback) {
+        var insertions = [];
+        //throttle summary
+        var sumUp = (function () {
+            var to;
+            return function () {
+                clearTimeout(to);
+                to = setTimeout(function () {
+                    insertions.forEach(tagAll);
+                    callback(insertions);
+                    insertions = [];
+                }, 10);
+            };
+        })();
+
+        return listen(selector, function (el) {
+            if (isTagged(el)) {
+                return;
+            }
+            tag(el);
+            var myparent = topmostUntaggedParent(el);
+            if (insertions.indexOf(myparent) < 0) {
+                insertions.push(myparent);
+            }
+            sumUp();
+        });
+    }
+
+    //insQ function
+    var exports = function (selector) {
+        if (isAnimationSupported && selector.match(/[^{}]/)) {
+
+            if (options.strictlyNew) {
+                tagAll(document.body); //prevents from catching things on show
+            }
+            return {
+                every: function (callback) {
+                    return listen(selector, callback);
+                },
+                summary: function (callback) {
+                    return catchInsertions(selector, callback);
+                }
+            };
+        } else {
+            return false;
+        }
+    };
+
+    //allows overriding defaults
+    exports.config = function (opt) {
+        for (var o in opt) {
+            if (opt.hasOwnProperty(o)) {
+                options[o] = opt[o];
+            }
+        }
+    };
+
+    return exports;
+})();
+
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = insertionQ;
+}