File Upload Progress
********************

These snippets are not fully tested... or fully working... but thought they
might be useful:

Links
=====

- http://djangosnippets.org/snippets/678/
  Upload progress handler using cache framework.
- http://djangosnippets.org/snippets/679/
  Ajax progress bar.

Method
======

- Create a file upload handler:

  ::

    """
    Copied from:
    http://djangosnippets.org/snippets/678/
    """
    from django.core.files.uploadhandler import FileUploadHandler
    from django.core.cache import cache

    class UploadProgressCachedHandler(FileUploadHandler):
        """
        Tracks progress for file uploads.
        The http post request must contain a header or query parameter, 'X-Progress-ID'
        which should contain a unique string to identify the upload to be tracked.

        Copied from:
        http://djangosnippets.org/snippets/678/

        See views.py for upload_progress function...
        """

        def __init__(self, request=None):
            super(UploadProgressCachedHandler, self).__init__(request)
            self.progress_id = None
            self.cache_key = None

        def handle_raw_input(self, input_data, META, content_length, boundary, encoding=None):
            self.content_length = content_length
            if 'X-Progress-ID' in self.request.GET :
                self.progress_id = self.request.GET['X-Progress-ID']
            elif 'X-Progress-ID' in self.request.META:
                self.progress_id = self.request.META['X-Progress-ID']
            if self.progress_id:
                self.cache_key = "%s_%s" % (self.request.META['REMOTE_ADDR'], self.progress_id )
                cache.set(self.cache_key, {
                    'length': self.content_length,
                    'uploaded' : 0
                })

        def new_file(self, field_name, file_name, content_type, content_length, charset=None):
            pass

        def receive_data_chunk(self, raw_data, start):
            if self.cache_key:
                data = cache.get(self.cache_key)
                data['uploaded'] += self.chunk_size
                cache.set(self.cache_key, data)
            return raw_data

        def file_complete(self, file_size):
            pass

        def upload_complete(self):
            if self.cache_key:
                cache.delete(self.cache_key)

- Add the ``UploadProgressCachedHandler`` to your ``settings.py`` file:

  ::

    from django.conf import global_settings
    FILE_UPLOAD_HANDLERS = ('utils.upload.UploadProgressCachedHandler', ) + \
        global_settings.FILE_UPLOAD_HANDLERS

- Create a view to report progress on file uploads:

  ::

    from django.core.cache import cache
    from django.http import HttpResponse, HttpResponseServerError

    def upload_progress(request):
        """
        A view to report back on upload progress.
        Return JSON object with information about the progress of an upload.

        Copied from:
        http://djangosnippets.org/snippets/678/

        See upload.py for file upload handler.
        """
        #import ipdb
        #ipdb.set_trace()
        progress_id = ''
        if 'X-Progress-ID' in request.GET:
            progress_id = request.GET['X-Progress-ID']
        elif 'X-Progress-ID' in request.META:
            progress_id = request.META['X-Progress-ID']
        if progress_id:
            from django.utils import simplejson
            cache_key = "%s_%s" % (request.META['REMOTE_ADDR'], progress_id)
            data = cache.get(cache_key)
            return HttpResponse(simplejson.dumps(data))
        else:
            return HttpResponseServerError(
                'Server Error: You must provide X-Progress-ID header or query param.')

- Add the ``upload_progress`` view to ``urls.py``:

  ::

    url(r'^admin/upload_progress/$',
        'utils.views.upload_progress',
        name="admin-upload-progress"),

- In your template file:

  ::


    {% block extra-head %}
        <script type="text/javascript" >
            // Generate 32 char random uuid 
            function gen_uuid() {
                var uuid = ""
                for (var i=0; i < 32; i++) {
                    uuid += Math.floor(Math.random() * 16).toString(16); 
                }
                return uuid
            }

            // Add upload progress for multipart forms.
            $(function() {
                /*
                This throws a syntax error...
                $('form[@enctype=multipart/form-data]').submit(function(){
                */
                $('#upload').submit(function(){
                    // Prevent multiple submits
                    if ($.data(this, 'submitted')) return false;

                    var freq = 1000; // freqency of update in ms
                    var uuid = gen_uuid(); // id for this upload so we can fetch progress info.
                    var progress_url = '/feature/admin/upload_progress/'; // ajax view serving progress info

                    // Append X-Progress-ID uuid form action
                    this.action += (this.action.indexOf('?') == -1 ? '?' : '&') + 'X-Progress-ID=' + uuid;

                    var $progress = $('<div id="upload-progress" class="upload-progress"></div>').
                        appendTo(document.body).append('<div class="progress-container"><span class="progress-info">uploading 0%</span><div class="progress-bar"></div></div>');

                    // progress bar position
                    $progress.css({
                        position: ($.browser.msie && $.browser.version < 7 )? 'absolute' : 'fixed',  
                        left: '50%', marginLeft: 0-($progress.width()/2), bottom: '20%'
                    }).show();

                    // Update progress bar
                    function update_progress_info() {
                        $progress.show();
                        $.getJSON(progress_url, {'X-Progress-ID': uuid}, function(data, status){
                            if (data) {
                                var progress = parseInt(data.uploaded) / parseInt(data.length);
                                var width = $progress.find('.progress-container').width()
                                var progress_width = width * progress;
                                $progress.find('.progress-bar').width(progress_width);
                                $progress.find('.progress-info').text('uploading ' + parseInt(progress*100) + '%');
                            }
                            window.setTimeout(update_progress_info, freq);
                        });
                    };
                    window.setTimeout(update_progress_info, freq);

                    $.data(this, 'submitted', true); // mark form as submitted.
                });
            });
        </script>
    {% endblock %}

    {% block content %}
        <form id='upload' action="." enctype="multipart/form-data" method="POST">
            <table>
                {{ form.as_table }}
            </table>
            <p><input type="submit" value="Submit"></p>
        </form>
    {% endblock %}