Permalink
Browse files

added multiple image upload

  • Loading branch information...
1 parent 6b08a76 commit 5ed6f3a70f9613e0b94d2fc6938044828ae0786f @Tyrdall Tyrdall committed Sep 19, 2013
Showing with 12,382 additions and 35 deletions.
  1. +23 −0 README.rst
  2. +1 −0 docs/source/conf.py
  3. +6 −4 requirements.txt
  4. +1 −0 user_media/migrations/0001_initial.py
  5. +83 −0 user_media/static/user_media/css/libs/jquery.fileupload-ui.css
  6. +60 −0 user_media/static/user_media/js/image_upload.js
  7. +9,597 −0 user_media/static/user_media/js/libs/jquery-1.9.1.js
  8. +7 −0 user_media/static/user_media/js/libs/jquery-ui-1.10.3.custom.min.js
  9. +158 −0 user_media/static/user_media/js/libs/jquery.fileupload-process.js
  10. +630 −0 user_media/static/user_media/js/libs/jquery.fileupload-ui.js
  11. +116 −0 user_media/static/user_media/js/libs/jquery.fileupload-validate.js
  12. +1,301 −0 user_media/static/user_media/js/libs/jquery.fileupload.js
  13. +1 −0 user_media/static/user_media/js/libs/tmpl.min.js
  14. +90 −0 user_media/templates/user_media/partials/image_loop.html
  15. +5 −0 user_media/templates/user_media/partials/image_loop_item.html
  16. +6 −0 user_media/templates/user_media/partials/image_loop_scripts.html
  17. +7 −1 user_media/tests/factories.py
  18. +2 −2 user_media/tests/forms_tests.py
  19. 0 user_media/tests/integration_tests/__init__.py
  20. +2 −1 user_media/tests/runtests.py
  21. +1 −1 user_media/tests/south_settings.py
  22. +7 −0 user_media/tests/test_app/admin.py
  23. +13 −0 user_media/tests/test_app/models.py
  24. +20 −0 user_media/tests/test_app/templates/home.html
  25. +21 −0 user_media/tests/test_app/views.py
  26. +6 −0 user_media/tests/test_settings.py
  27. +10 −6 user_media/tests/urls.py
  28. +93 −5 user_media/tests/{integration_tests → }/views_tests.py
  29. +16 −14 user_media/urls.py
  30. +99 −1 user_media/views.py
View
@@ -208,6 +208,29 @@ The names of the alternative templates are
``user_media/partials/ajax_usermediaimage_confirm_delete.html``.
+AJAX multi image upload
+-----------------------
+
+If you want to upload multiple images at once, only prepare the following
+templates::
+
+ user_media/partials/image_loop.html
+ user_media/partials/image_loop_item.html
+
+Then add styles and jQuery scripts. We've used blueimp's file upload, so you
+make it work by adding jQuery & jQuery-UI plus the scripts in::
+
+ user_media/partials/image_loop_scripts.html
+
+Don't forget to add the css::
+
+ <link rel="stylesheet" href="{{ STATIC_URL }}user_media/css/libs/jquery.fileupload-ui.css">
+
+You can limit the maximum upload by using the following setting::
+
+ USER_MEDIA_UPLOAD_MAXIMUM = 5
+
+
Contribute
----------
View
@@ -1,3 +1,4 @@
+# flake8: noqa
# -*- coding: utf-8 -*-
#
# django-user-media documentation build configuration file, created by
View
@@ -3,12 +3,14 @@
# ===========================================================================
# Packages essential to this app. Needed by anyone who wants to use this app.
# ===========================================================================
-Django==1.4.2
+Django==1.5.4
Pillow
South
-django-libs==0.10
+django-libs==1.16
Sphinx
factory_boy
+easy_thumbnails==1.3
+simplejson==3.3.0
# ==============================================================
@@ -18,5 +20,5 @@ nose
django-nose
coverage
django-coverage
-django-jasmine
-selenium
+flake8
+ipdb==0.7
@@ -1,3 +1,4 @@
+# flake8: noqa
# -*- coding: utf-8 -*-
import datetime
from south.db import db
@@ -0,0 +1,83 @@
+@charset "UTF-8";
+/*
+ * jQuery File Upload UI Plugin CSS 6.10
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2010, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+.fileinput-button {
+ position: relative;
+ overflow: hidden;
+ float: left;
+}
+.fileinput-button input {
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin: 0;
+ opacity: 0;
+ filter: alpha(opacity=0);
+ transform: translate(-300px, 0) scale(4);
+ font-size: 23px;
+ direction: ltr;
+ cursor: pointer;
+}
+.fileupload-buttonbar .btn,
+.fileupload-buttonbar .toggle {
+ margin-bottom: 5px;
+}
+.files .progress {
+ width: 200px;
+}
+.progress-animated .bar {
+ background: url(../img/progressbar.gif) !important;
+ filter: none;
+}
+.fileupload-loading {
+ position: absolute;
+ left: 50%;
+ width: 128px;
+ height: 128px;
+ background: url(../../img/ajax.gif) center no-repeat;
+ display: none;
+}
+.fileupload-processing .fileupload-loading {
+ display: block;
+}
+
+/* Fix for IE 6: */
+* html .fileinput-button {
+ line-height: 24px;
+ margin: 1px -3px 0 0;
+}
+
+/* Fix for IE 7: */
+* + html .fileinput-button {
+ padding: 2px 15px;
+ margin: 1px 0 0 0;
+}
+
+@media (max-width: 767px) {
+ .files .btn span {
+ display: none;
+ }
+ .files .preview * {
+ width: 40px;
+ }
+ .files .name * {
+ width: 80px;
+ display: inline-block;
+ word-wrap: break-word;
+ }
+ .files .progress {
+ width: 20px;
+ }
+ .files .delete {
+ width: 60px;
+ }
+}
@@ -0,0 +1,60 @@
+window.locale = {
+ 'fileupload': {
+ 'error': gettext('Error')
+ ,'start': gettext('Start')
+ ,'cancel': gettext('Cancel')
+ ,'delete': gettext('Delete')
+ ,'success': gettext('Successfully uploaded!')
+ }
+};
+
+function initDeletion() {
+ $('.galleryList .btn-danger').click(function() {
+ var image = $(this).parents('.galleryList');
+ // Get the modal content
+ $.get($(this).attr('href'), function(data) {
+ $('#deletionModal .modal-body').html(data).find('form').submit(function() {
+ // If deletion form has been submitted, hide the modal and remove the image
+ $('#deletionModal').modal('hide');
+ image.hide();
+ $.post($(this).attr('action'), $(this).serializeArray());
+ return false;
+ });
+ $('#deletionModal').modal().modal('show');
+ });
+ return false;
+ });
+}
+
+$(function () {
+ $('#fileupload').each(function() {
+ var form = $(this);
+ form.fileupload({url: form.attr('action')});
+ form.fileupload('option', {
+ maxFileSize: 3000000
+ ,acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
+ ,autoUpload: true
+ ,sequentialUploads: true
+ });
+ form.bind('fileuploaddone', function (e, data) {
+ // After upload add the image to the gallery list
+ $('#galleryItems').append($.parseHTML(data.result.files[0].list_item_html)).show();
+ $('.fileupload-buttonbar .text-danger').remove();
+ setTimeout(function() {
+ $('.template-download').fadeOut('slow').remove();
+ }, 2000);
+ initDeletion();
+ });
+ form.bind('fileuploadfail', function (e, data) {
+ if ($('.fileupload-buttonbar .text-danger').length == 0) {
+ $('.fileupload-buttonbar').append('<span class="text-danger"><small>' + data._response.jqXHR.responseText + '</small></span>');
+ }
+ setTimeout(function() {
+ $('.template-download').fadeOut('slow').remove();
+ }, 2000);
+ });
+ });
+
+ // Prepare AJAX deletion
+ initDeletion();
+});
Oops, something went wrong.

0 comments on commit 5ed6f3a

Please sign in to comment.