├── .gitignore
├── CHANGELOG.rst
├── LICENSE
├── MANIFEST.in
├── README.rst
├── example
    ├── .gitignore
    ├── README.rst
    ├── manage.py
    ├── project
    │   ├── __init__.py
    │   ├── admin.py
    │   ├── asgi.py
    │   ├── forms.py
    │   ├── migrations
    │   │   ├── 0001_initial.py
    │   │   └── __init__.py
    │   ├── models.py
    │   ├── settings.py
    │   ├── static
    │   │   ├── example.css
    │   │   └── images
    │   │   │   ├── big-ben-horizontal.jpg
    │   │   │   ├── big-ben-vertical.jpg
    │   │   │   └── spinner.jpg
    │   ├── templates
    │   │   ├── base.html
    │   │   ├── navbar.html
    │   │   └── pages
    │   │   │   ├── compress_images_test.html
    │   │   │   └── index.html
    │   ├── templatetags
    │   │   ├── __init__.py
    │   │   └── utils_tags.py
    │   ├── urls.py
    │   ├── utils.py
    │   ├── views.py
    │   └── wsgi.py
    └── requirements.txt
├── screenshots
    ├── 001.png
    ├── 002.png
    ├── 003.png
    ├── 004.png
    └── example
    │   ├── 001.png
    │   ├── 002.png
    │   └── 003.png
├── setup.cfg
├── setup.py
└── upload_form
    ├── __init__.py
    ├── app_settings.py
    ├── apps.py
    ├── forms.py
    ├── locale
        └── it
        │   └── LC_MESSAGES
        │       ├── django.mo
        │       └── django.po
    ├── static
        └── upload_form
        │   ├── filelist.js
        │   ├── icons
        │       ├── cloud-upload-svgrepo-com.svg
        │       ├── trash-svgrepo-com.svg
        │       └── upload-svgrepo-com.svg
        │   ├── upload_form.css
        │   ├── upload_form.js
        │   └── utils.js
    ├── templates
        └── upload_form
        │   ├── test.html
        │   └── upload_form.html
    ├── urls.py
    └── views.py


/.gitignore:
--------------------------------------------------------------------------------
 1 | *~
 2 | *.py[cod]
 3 | __pycache__
 4 | 
 5 | # C extensions
 6 | *.so
 7 | .vscode
 8 | 
 9 | # Packages
10 | *.egg
11 | *.egg-info
12 | dist
13 | build
14 | eggs
15 | parts
16 | bin
17 | var
18 | sdist
19 | develop-eggs
20 | .installed.cfg
21 | lib
22 | lib64
23 | 
24 | # Installer logs
25 | pip-log.txt
26 | 
27 | # Unit test / coverage reports
28 | .coverage
29 | .tox
30 | nosetests.xml
31 | htmlcov
32 | 
33 | # Mr Developer
34 | .mr.developer.cfg
35 | .project
36 | .pydevproject
37 | 
38 | # Pycharm/Intellij
39 | .idea
40 | 
41 | # Complexity
42 | output/*.html
43 | output/*/index.html
44 | 
45 | # Sphinx
46 | docs/_build
47 | 
48 | .vagrant
49 | db.sqlite3
50 | 
51 | .ipynb*
52 | .cache
53 | 


--------------------------------------------------------------------------------
/CHANGELOG.rst:
--------------------------------------------------------------------------------
 1 | .. :changelog:
 2 | 
 3 | History
 4 | =======
 5 | 
 6 | v0.5.0
 7 | ------
 8 | * typo fixes
 9 | * per-class "allowed_file_types" list
10 | * better explanation of the difference between "accept" and "allowed_file_types"
11 | 
12 | v0.4.3
13 | ------
14 | * fix a js error when uploading non-image files; this was a regression introduced with image resizing
15 | * fix to use multiple upload forms in a single HTML page
16 | 
17 | v0.4.2
18 | ------
19 | * Include optional extra form fields in upload form
20 | 
21 | v0.4.1
22 | ------
23 | * Readme updated and fixed
24 | 
25 | v0.4.0
26 | ------
27 | * optionally resize images before uploading
28 | * parallel uploading (experimental)
29 | * Example project added
30 | * some miscellaneous improvements recovered from experimental branches
31 | * removed dependency on sprintf js library
32 | 
33 | v0.3.1
34 | ------
35 | * fix Readme to keep twine happy
36 | 
37 | v0.3.0
38 | ------
39 | * published on PyPI
40 | 
41 | v0.2.3
42 | ------
43 | * prepare for publishing on PyPI
44 | 
45 | v0.2.2
46 | ------
47 | * improved Readme
48 | 
49 | v0.2.1
50 | ------
51 | * package renamed "django-upload-form" (was "django_upload_form")
52 | * cleanup
53 | * improved documentation
54 | 
55 | v0.2.0
56 | ------
57 | * fixes for Django 2.x
58 | * user can now add more file to the list before submission
59 | 
60 | v0.0.5
61 | ------
62 | * green send button
63 | 
64 | v0.0.4
65 | ------
66 | * App settings removed
67 | 
68 | v0.0.3
69 | ------
70 | * Minor fixes
71 | 
72 | v0.0.2
73 | ------
74 | * Italian translation added
75 | 
76 | v0.0.1
77 | ------
78 | * Basic release
79 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | 
 2 | MIT License
 3 | 
 4 | Copyright (c) 2018, Mario Orlandi
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 7 | 
 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 9 | 
10 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | 


--------------------------------------------------------------------------------
/MANIFEST.in:
--------------------------------------------------------------------------------
1 | include README.rst
2 | include LICENSE
3 | include CHANGELOG.rst
4 | recursive-include upload_form/locale *
5 | recursive-include upload_form/static *
6 | recursive-include upload_form/templates *
7 | 


--------------------------------------------------------------------------------
/README.rst:
--------------------------------------------------------------------------------
  1 | 
  2 | django-upload-form
  3 | ==================
  4 | 
  5 | A minimal (yet careful about UX) solution to upload multiple files in a Django project,
  6 | using a Django-like Form Class.
  7 | 
  8 | 
  9 | Purpose
 10 | -------
 11 | 
 12 | The purpose of this module is that of providing a simple yet effective tool
 13 | for managing the user interaction for files uploading in a Django projects,
 14 | with the following features:
 15 | 
 16 | 1) before submission:
 17 | 
 18 |     - files can be added to the upload list either via drag&drop or with an file-open dialog
 19 |     - user can revise the upload list by adding or removing files
 20 |     - the list displays informations about the files (name, tipe, size)
 21 | 
 22 | 2) during submission:
 23 | 
 24 |     - image files are optionally resized up to a configurabile max resolution
 25 |     - a progress bar is shown during files upload
 26 | 
 27 | 3) after submission:
 28 | 
 29 |     - a target view receives the uploaded files via an Ajax POST request
 30 |     - here, you will validate the form ...
 31 |     - ... and use the received `files` at your will
 32 | 
 33 | All this is obtained by leveraging HTML5 specific capabilities, and applying some clever (in my opinion)
 34 | and sometimes hacky techniques I learned from a few selected articles, listed in the `References`
 35 | section below.
 36 | 
 37 | No external dependencies are required (other than jQuery).
 38 | 
 39 | The codebase is deliberately minimal.
 40 | 
 41 | 
 42 | How to use `django-upload-form`
 43 | -------------------------------
 44 | 
 45 | The only purpose of the package is that of:
 46 | 
 47 | - managing user interaction
 48 | - upload the files upon form submission
 49 | 
 50 | **What you do with the uploaded files is entirely up to you, and you're responsible for this.**
 51 | 
 52 | These are the steps required to use `django-upload-form`:
 53 | 
 54 | - derive your own Form class from UploadForm, and override a few methods
 55 | - provide a view which will be the target for files upload
 56 | 
 57 | 
 58 | The UploadForm-derived class
 59 | ----------------------------
 60 | 
 61 | At the very minimum, you need to override the following methods:
 62 | 
 63 | - form_valid(self, request)
 64 |     Here is where you receive the list of (in-memory) uploaded files after submission;
 65 |     What you do with the uploaded files is entirely up to you.
 66 |     This method should normally return `get_success_url()`.
 67 | 
 68 | - get_success_url(self)
 69 |     Determine the URL to redirect to when the form is successfully validated.
 70 | 
 71 | - get_action(self, request=None)
 72 |     Returns the url of the `target view` (see below).
 73 | 
 74 | Optionally, you can customize the following instance properties:
 75 | 
 76 | - self.allowed_file_types
 77 |     List of allowed file types (ex: '.xls .xlsx .pdf');
 78 |     Default to: None, which means we'll use the corresponding setting `UPLOAD_FORM_ALLOWED_FILE_TYPES`
 79 | 
 80 | - self.accept
 81 |     Returns the value for the "accept" attribute of the file input element;
 82 |     Defaults to: None, which means we'll build it from `self.allowed_file_types` list;
 83 |     Example: `image/\*` - which also trigger the lookup into the image gallery on mobile devices
 84 | 
 85 | - self.max_image_size
 86 |     When > 0, images will be resized accordingly before uploading.
 87 |     The required size is expressed in pixels.
 88 |     Default: 0
 89 | 
 90 | or override the corresponding methods:
 91 | 
 92 | - def get_accept(self, request=None)
 93 | - def get_max_image_size(self, request=None)
 94 | 
 95 | Note: while "accept" is applied to the file input element, "allowed_file_types" is
 96 | used during form validation; it is your responsability to supply coherent values.
 97 | 
 98 | When "accept" is None, on the other side, this is guaranteed by UploadForm.
 99 | 
100 | 
101 | The target view
102 | ---------------
103 | 
104 | The target view will receive the uploaded files with a POST request, and normally should:
105 | 
106 |     - build a bounded form
107 |     - validate it
108 |     - invoke form_valid()
109 | 
110 | You will probably use the same view for form rendering (GET); this is quite common
111 | practice, but entirely optional.
112 | 
113 | Also note that, since upon form submission the POST request will be issued via Ajax,
114 | the target view should cooperate by returning a JsonResponse().
115 | 
116 | In practice, in the target view **you should always follow the pattern below**,
117 | then cope with your specific needs in `MyUploadForm.form_valid()`:
118 | 
119 | .. code:: python
120 | 
121 |     def sample_view(request):
122 | 
123 |         if request.method == 'GET':
124 |             form = TestUploadForm()
125 |         else:
126 |             form = TestUploadForm(request.POST, request.FILES)
127 |             if form.is_valid():
128 |                 url = form.form_valid(request)
129 |                 return JsonResponse({'action': 'redirect', 'url': url, })
130 |             else:
131 |                 return JsonResponse({'action': 'replace', 'html': form.as_html(request), })
132 | 
133 |         return render(
134 |             request,
135 |             'upload_form/test_view.html', {
136 |                 'form': form,
137 |                 'form_as_html': form.as_html(request),
138 |             }
139 |         )
140 | 
141 | or (when the initial rendering if provided by some other view):
142 | 
143 | .. code:: python
144 | 
145 |     def sample_view(request):
146 | 
147 |         assert request.method == 'POST'
148 |         assert request.is_ajax()
149 | 
150 |         form = MyUploadForm(request.POST, request.FILES)
151 |         if form.is_valid():
152 |             url = form.form_valid(request)
153 |             return JsonResponse({'action': 'redirect', 'url': url, })
154 |         else:
155 |             return JsonResponse({'action': 'replace', 'html': form.as_html(request), })
156 | 
157 | 
158 | Installation
159 | ------------
160 | 
161 | Install the package from Python Package Index running:
162 | 
163 | .. code:: bash
164 | 
165 |     pip install django-upload-form
166 | 
167 | or from GitHub:
168 | 
169 | .. code:: bash
170 | 
171 |     pip install git+https://github.com/morlandi/django-upload-form@master
172 | 
173 | then add 'upload_form' to your INSTALLED_APPS:
174 | 
175 | .. code:: bash
176 | 
177 |     INSTALLED_APPS = [
178 |         ...
179 |         'upload_form',
180 |     ]
181 | 
182 | 
183 | App Settings
184 | ------------
185 | 
186 | Some settings are provided for optional customization.
187 | 
188 | The library will search these settings in the following order:
189 | 
190 |     - as `Django Constance` dynamic settings (see `https://github.com/jazzband/django-constance <https://github.com/jazzband/django-constance>`_)
191 |     - failing that, in project's settings
192 |     - failing that, a suitable "safe" default value is used
193 | 
194 | .. code:: python
195 | 
196 |     UPLOAD_FORM_MAX_FILE_SIZE_MB = 12
197 |     UPLOAD_FORM_ALLOWED_FILE_TYPES = ".png .jpg .jpeg .gif"
198 |     UPLOAD_FORM_PARALLEL_UPLOAD = False  (experimental)
199 | 
200 | or:
201 | 
202 | .. code:: python
203 | 
204 |     CONSTANCE_CONFIG = {
205 |         ...
206 |         'UPLOAD_FORM_ALLOWED_FILE_TYPES': (".png .jpg .jpeg .gif", "Tipi di files abilitati all'upload"),
207 |         'UPLOAD_FORM_MAX_FILE_SIZE_MB': (12, 'Dimensione massima files in upload (MB)'),
208 |         'UPLOAD_FORM_PARALLEL_UPLOAD': (False, "Activate concurrent files upload"),
209 |     }
210 | 
211 | Using multiple upload forms in a single HTML page
212 | -------------------------------------------------
213 | 
214 | The technique used to collect files for upload is:
215 | 
216 | - render an **hidden** file input element with "multiple" attribute
217 | - use a label styled to look like a button, so people will realize they can click it to bring up the file selection dialog
218 | 
219 | This works, since pressing a label basically triggers the focus event for the bound input;
220 | if it is a file input, it works out as a click event, resulting in opening a file browser.
221 | 
222 | .. code:: html
223 | 
224 |     <input style="display: none;" type="file" name="files[]" accept="{{accept}}" id="uploadform_file_input" multiple onchange="UploadForm.handleFiles(this.files)">
225 |     <label class="button" for="uploadform_file_input">
226 |         <img src="{% static 'upload_form/icons/cloud-upload-svgrepo-com.svg' %}" alt="{% trans 'upload' %}">
227 |         <p>
228 |             {% trans 'Select some files' %}
229 |         </p>
230 |     </label>
231 | 
232 | Unfortunately, this means we had to assign a specific id to the <input> element;
233 | which in turn means we can't use two upload forms in a single HTML page.
234 | 
235 | However, you can also implicitly bind a label to an input by inclusion, thus avoiding the id altoghether:
236 | 
237 | .. code:: html
238 | 
239 |     <label class="button">
240 |         <input style="display: none;" type="file" name="files[]" accept="{{accept}}" multiple onchange="UploadForm.handleFiles(this.files)">
241 |         <img src="{% static 'upload_form/icons/cloud-upload-svgrepo-com.svg' %}" alt="{% trans 'upload' %}">
242 |         <p>
243 |             {% trans 'Select some files' %}
244 |         </p>
245 |     </label>
246 | 
247 | This fix has been added in `v0.4.3`.
248 | 
249 | Example project
250 | ---------------
251 | 
252 | A simple Django project is available in folder 'example'; use it as follows:
253 | 
254 | .. code-block:: bash
255 | 
256 |     # Move to the project folder
257 |     cd ./example
258 | 
259 |     # Install Django dependencies
260 |     pip install -r requirements.txt
261 | 
262 |     # Initialize database tables
263 |     python manage.py migrate
264 | 
265 |     # Create a super-user for the admin:
266 |     python manage.py createsuperuser
267 | 
268 |     # Run the project
269 |     python manage.py runserver
270 | 
271 | the visit either http://127.0.0.1:8000/ or http://127.0.0.1:8000/admin/
272 | 
273 | .. image:: screenshots/example/001.png
274 | 
275 | .. image:: screenshots/example/002.png
276 | 
277 | .. image:: screenshots/example/003.png
278 | 
279 | Sample usage
280 | ------------
281 | 
282 | The `upoad_form` app provides a sample test view which uploads multiple files
283 | for illustration purposes.
284 | 
285 | You can run, study, and possibly duplicate it for further customizations.
286 | 
287 | To use it, add this to your main urls mapping:
288 | 
289 | `file urls.py`:
290 | 
291 | .. code:: bash
292 | 
293 |     urlpatterns = [
294 |         ...
295 |         path('upload_form/', include('upload_form.urls', namespace='upload_form')),
296 |         ...
297 |     ]
298 | 
299 | then visit this url::
300 | 
301 |     http://127.0.0.1:8000/upload_form/test/
302 | 
303 | Below is the source code of the whole test.
304 | 
305 | 
306 | `file upload_form/views.py`
307 | 
308 | .. code:: python
309 | 
310 |     from django.shortcuts import render
311 |     try:
312 |         from django.urls import reverse
313 |     except ModuleNotFoundError as e:
314 |         # for Django < v1.10
315 |         from django.core.urlresolvers import reverse
316 |     from django.http import JsonResponse
317 |     from .forms import UploadForm
318 | 
319 | 
320 |     class TestUploadForm(UploadForm):
321 | 
322 |         def form_valid(self, request):
323 |             print("*")
324 |             print("* TestUploadForm.form_valid() ...")
325 |             print("* Here, we just log the list of received files;")
326 |             print("* What you do with these files in a real project is entirely up to you.")
327 |             print("*")
328 |             self.dump()
329 |             return self.get_success_url(request)
330 | 
331 |         def get_success_url(self, request=None):
332 |             return '/'
333 | 
334 |         def get_action(self, request=None):
335 |             return reverse('upload_form:test_view')
336 | 
337 | 
338 |     def test_view(request):
339 | 
340 |         if request.method == 'GET':
341 |             form = TestUploadForm()
342 |         else:
343 |             form = TestUploadForm(request.POST, request.FILES)
344 |             if form.is_valid():
345 |                 url = form.form_valid(request)
346 |                 return JsonResponse({'action': 'redirect', 'url': url, })
347 |             else:
348 |                 return JsonResponse({'action': 'replace', 'html': form.as_html(request), })
349 | 
350 |         return render(
351 |             request,
352 |             'upload_form/test_view.html', {
353 |                 'form': form,
354 |                 'form_as_html': form.as_html(request),
355 |             }
356 |         )
357 | 
358 | 
359 | `file templates/upload_form/test.html`
360 | 
361 | .. code:: html
362 | 
363 |     {% extends "base.html" %}
364 |     {% load static %}
365 | 
366 | 
367 |     {% block extrajs %}
368 |         {{form.media}}
369 |     {% endblock %}
370 | 
371 | 
372 |     {% block content %}
373 | 
374 |         <div class="container">
375 |             <div class="row">
376 |                 <div id="upload-box" class="text-center col-md-6 col-md-offset-3" style="">
377 | 
378 |                     {{ form_as_html }}
379 | 
380 |                 </div>
381 |             </div>
382 |         </div>
383 | 
384 |     {% endblock content %}
385 | 
386 | 
387 | Howto upload a video
388 | --------------------
389 | 
390 | .. code:: python
391 | 
392 |     class MyUploadForm(UploadForm):
393 | 
394 |         ...
395 | 
396 |         def get_accept(self, request=None):
397 |             return 'video/*'
398 | 
399 | Other options to consider::
400 | 
401 |     - accept="video/*" capture=""       ... only from camera
402 |     - accept="video/*"                  ... either camera or album
403 | 
404 | Howto upload an image from the camera
405 | -------------------------------------
406 | 
407 | ::
408 | 
409 |     - accept="image/*" capture="camera"
410 | 
411 | 
412 | Screenshots
413 | -----------
414 | 
415 | .. image:: screenshots/001.png
416 | 
417 | .. image:: screenshots/002.png
418 | 
419 | .. image:: screenshots/003.png
420 | 
421 | .. image:: screenshots/004.png
422 | 
423 | 
424 | License
425 | -------
426 | 
427 | The app is intended to be open source.
428 | 
429 | Feel free to use it we at your will with no restrictions at all.
430 | 
431 | 
432 | References
433 | ----------
434 | 
435 | - `How To Make A Drag-and-Drop File Uploader With Vanilla JavaScript <https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/>`_
436 | - `Multiple File Upload Input <https://davidwalsh.name/multiple-file-upload>`_
437 | - `Styling & Customizing File Inputs the Smart Way <https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/>`_
438 | - `How to set file input value when dropping file on page? <https://stackoverflow.com/questions/47515232/how-to-set-file-input-value-when-dropping-file-on-page>`_
439 | - `A strategy for handling multiple file uploads using JavaScript <https://medium.com/typecode/a-strategy-for-handling-multiple-file-uploads-using-javascript-eb00a77e15f>`_
440 | - `Use HTML5 to resize an image before upload <https://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload#24015367>`_
441 | - `How to package a Django app to be test-friendly? <https://stackoverflow.com/questions/41636794/how-to-package-a-django-app-to-be-test-friendly>`_
442 | - `HTML Label name instead of ID? <https://stackoverflow.com/questions/28031001/html-label-name-instead-of-id#28031213>`_
443 | 


--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
1 | public/
2 | 


--------------------------------------------------------------------------------
/example/README.rst:
--------------------------------------------------------------------------------
 1 | 
 2 | Install
 3 | =======
 4 | 
 5 | Install Django dependencies:
 6 | 
 7 | .. code-block:: bash
 8 | 
 9 |     pip install -r requirements.txt
10 | 
11 | Initialize database tables:
12 | 
13 | .. code-block:: bash
14 | 
15 |     python manage.py migrate
16 | 
17 | Create a super-user for the admin:
18 | 
19 | .. code-block:: bash
20 | 
21 |     python manage.py createsuperuser
22 | 
23 | Run
24 | ===
25 | 
26 | .. code-block:: bash
27 | 
28 |     python manage.py runserver
29 | 
30 | The map visible on http://127.0.0.1:8000/ can be edited from the AdminSite at ``/admin``.
31 | 


--------------------------------------------------------------------------------
/example/manage.py:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env python
 2 | """Django's command-line utility for administrative tasks."""
 3 | import os
 4 | import sys
 5 | 
 6 | 
 7 | def main():
 8 |     os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'project.settings')
 9 |     try:
10 |         from django.core.management import execute_from_command_line
11 |     except ImportError as exc:
12 |         raise ImportError(
13 |             "Couldn't import Django. Are you sure it's installed and "
14 |             "available on your PYTHONPATH environment variable? Did you "
15 |             "forget to activate a virtual environment?"
16 |         ) from exc
17 |     execute_from_command_line(sys.argv)
18 | 
19 | 
20 | if __name__ == '__main__':
21 |     main()
22 | 


--------------------------------------------------------------------------------
/example/project/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/morlandi/django-upload-form/d126ae28dca30e78f82fd20e4a7170aa18989c3f/example/project/__init__.py


--------------------------------------------------------------------------------
/example/project/admin.py:
--------------------------------------------------------------------------------
 1 | from django.contrib import admin
 2 | from django.utils.safestring import mark_safe
 3 | from django.utils.translation import ugettext_lazy as _
 4 | from django.utils import timezone
 5 | from .models import File
 6 | 
 7 | 
 8 | ################################################################################
 9 | # BaseModelAdmin
10 | 
11 | class BaseModelAdmin(admin.ModelAdmin):
12 |     """
13 |     Base class for 'shared' model admins;
14 |     manages common metadata
15 |     """
16 |     date_hierarchy = 'created'
17 |     search_fields = ['=id', ]
18 |     list_display = [
19 |         '__str__',
20 |         'view_on_site_link',
21 |         'created_display',
22 |         'updated_display',
23 |     ]
24 |     list_filter = ['created', ]
25 |     readonly_fields = ['id', 'created', 'created_by', 'updated', 'updated_by', ]
26 | 
27 |     save_on_top = False
28 |     list_per_page = 100
29 | 
30 |     def view_on_site_link(self, obj):
31 |         url = obj.get_absolute_url()
32 |         html = '<a href="%s" class="link-with-icon link-view">view</a>' % url
33 |         return mark_safe(html)
34 |     view_on_site_link.short_description = 'View'
35 | 
36 |     def save_model(self, request, obj, form, change):
37 |         today = timezone.now()
38 |         if not change:
39 |             obj.created_by = request.user
40 |             obj.created = today
41 |         obj.updated_by = request.user
42 |         obj.updated = today
43 |         # obj.save()
44 |         super(BaseModelAdmin, self).save_model(request, obj, form, change)
45 | 
46 | 
47 | @admin.register(File)
48 | class FileAdmin(BaseModelAdmin):
49 | 
50 |     def get_list_display(self, request):
51 |         list_display = BaseModelAdmin.list_display[:]
52 |         list_display.insert(1, 'description')
53 |         return list_display
54 | 


--------------------------------------------------------------------------------
/example/project/asgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | ASGI config for project project.
 3 | 
 4 | It exposes the ASGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/3.0/howto/deployment/asgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.asgi import get_asgi_application
13 | 
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'project.settings')
15 | 
16 | application = get_asgi_application()
17 | 


--------------------------------------------------------------------------------
/example/project/forms.py:
--------------------------------------------------------------------------------
 1 | try:
 2 |     from django.urls import reverse
 3 | except ModuleNotFoundError as e:
 4 |     # for Django < v1.10
 5 |     from django.core.urlresolvers import reverse
 6 | from django import forms
 7 | from django.contrib import messages
 8 | from upload_form.forms import UploadForm
 9 | from django.conf import settings
10 | from.models import File
11 | 
12 | 
13 | class MyUploadForm(UploadForm):
14 | 
15 |     description = forms.CharField(required=False)
16 | 
17 |     def __init__(self, *args, **kwargs):
18 |         super().__init__(*args, **kwargs)
19 |         self.accept = settings.MY_UPLOAD_FORM_ACCEPT
20 |         self.max_image_size = settings.MY_UPLOAD_FORM_MAX_IMAGE_SIZE
21 | 
22 |     def form_valid(self, request):
23 |         print("*")
24 |         print("* TestUploadForm.form_valid() ...")
25 |         print("* Here, we just log the list of received files;")
26 |         print("* What you do with these files in a real project is entirely up to you.")
27 |         print("*")
28 | 
29 |         self.dump()
30 |         files = self.files.getlist('files')
31 |         description = self.cleaned_data['description']
32 |         for i, file in enumerate(files):
33 |             messages.info(request, '[%d]: "%s" received' % (i, file))
34 |             # image = form.cleaned_data.get('img')
35 |             # foo.imagefield.save(image.name, image)
36 |             obj = File.objects.create(description=description if description else file.name)
37 |             obj.file.save(file.name, file)
38 | 
39 |         return self.get_success_url(request)
40 | 
41 |     def get_success_url(self, request=None):
42 |         return '/'
43 | 
44 |     def get_action(self, request=None):
45 |         #return reverse('upload_form:test_view')
46 |         return reverse('my_upload_target_view')
47 | 
48 |     # def get_accept(self, request=None):
49 |     #     return 'image/*'
50 | 


--------------------------------------------------------------------------------
/example/project/migrations/0001_initial.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 3.0.8 on 2020-08-03 07:15
 2 | 
 3 | from django.conf import settings
 4 | from django.db import migrations, models
 5 | import django.db.models.deletion
 6 | import uuid
 7 | 
 8 | 
 9 | class Migration(migrations.Migration):
10 | 
11 |     initial = True
12 | 
13 |     dependencies = [
14 |         migrations.swappable_dependency(settings.AUTH_USER_MODEL),
15 |     ]
16 | 
17 |     operations = [
18 |         migrations.CreateModel(
19 |             name='File',
20 |             fields=[
21 |                 ('id', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True, verbose_name='id')),
22 |                 ('created', models.DateTimeField(blank=True, null=True, verbose_name='created')),
23 |                 ('updated', models.DateTimeField(blank=True, null=True, verbose_name='updated')),
24 |                 ('description', models.CharField(blank=True, max_length=256, verbose_name='description')),
25 |                 ('file', models.FileField(blank=True, null=True, upload_to='uploads/', verbose_name='File')),
26 |                 ('created_by', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to=settings.AUTH_USER_MODEL, verbose_name='created by')),
27 |                 ('updated_by', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to=settings.AUTH_USER_MODEL, verbose_name='updated by')),
28 |             ],
29 |             options={
30 |                 'verbose_name': 'File',
31 |                 'verbose_name_plural': 'Files',
32 |                 'ordering': ('-created',),
33 |                 'get_latest_by': '-created',
34 |                 'abstract': False,
35 |             },
36 |         ),
37 |     ]
38 | 


--------------------------------------------------------------------------------
/example/project/migrations/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/morlandi/django-upload-form/d126ae28dca30e78f82fd20e4a7170aa18989c3f/example/project/migrations/__init__.py


--------------------------------------------------------------------------------
/example/project/models.py:
--------------------------------------------------------------------------------
 1 | import uuid
 2 | import os
 3 | from django.db import models
 4 | from django.urls import reverse
 5 | from django.utils import timezone
 6 | from django.conf import settings
 7 | from django.utils.translation import ugettext_lazy as _
 8 | from project.templatetags.utils_tags import format_datetime
 9 | from .utils import auto_delete_filefields_on_delete
10 | 
11 | 
12 | ################################################################################
13 | # BaseModel
14 | 
15 | class BaseModel(models.Model):
16 |     """
17 |     Base class for all models;
18 |     defines common metadata
19 |     """
20 |     class Meta:
21 |         abstract = True
22 |         ordering = ('-created', )  # better choice for UI
23 |         get_latest_by = "-created"
24 | 
25 |     # Primary key
26 |     id = models.UUIDField('id', default=uuid.uuid4, primary_key=True, unique=True,
27 |         null=False, blank=False, editable=False)
28 | 
29 |     # metadata
30 |     created = models.DateTimeField(_('created'), null=True, blank=True, )
31 |     created_by = models.ForeignKey(settings.AUTH_USER_MODEL, verbose_name=_('created by'), null=True, blank=True, related_name='+', on_delete=models.SET_NULL)
32 |     updated = models.DateTimeField(_('updated'), null=True, blank=True, )
33 |     updated_by = models.ForeignKey(settings.AUTH_USER_MODEL, verbose_name=_('updated by'), null=True, blank=True, related_name='+', on_delete=models.SET_NULL)
34 | 
35 |     def __str__(self):
36 |         return str(self.id)
37 | 
38 |     def get_admin_url(self):
39 |         return reverse("admin:%s_%s_change" %
40 |             (self._meta.app_label, self._meta.model_name), args=(self.id,))
41 | 
42 |     def get_absolute_url(self):
43 |         return self.get_admin_url()
44 | 
45 |     def created_display(self):
46 |         return format_datetime(self.created)
47 |     created_display.short_description = _('Created')
48 |     created_display.admin_order_field = 'created'
49 | 
50 |     def updated_display(self):
51 |         return format_datetime(self.updated)
52 |     updated_display.short_description = _('Updated')
53 |     updated_display.admin_order_field = 'updated'
54 | 
55 |     def save(self, *args, **kwargs):
56 |         today = timezone.now()
57 |         if self.created is None:
58 |             self.created = today
59 |         self.updated = today
60 |         return super(BaseModel, self).save(*args, **kwargs)
61 | 
62 | 
63 | class File(BaseModel):
64 | 
65 |     class Meta(BaseModel.Meta):
66 |         abstract = False
67 |         verbose_name = _("File")
68 |         verbose_name_plural = _("Files")
69 | 
70 |     description = models.CharField(_('description'), max_length=256, null=False, blank=True)
71 |     file = models.FileField(_('File'), null=True, blank=True, upload_to='uploads/')
72 | 
73 |     def __str__(self):
74 |         text = self.description
75 |         if len(text) <= 0:
76 |             text = str(self.id)
77 |         return text
78 | 
79 | models.signals.post_delete.connect(auto_delete_filefields_on_delete, sender=File)
80 | 
81 | 


--------------------------------------------------------------------------------
/example/project/settings.py:
--------------------------------------------------------------------------------
  1 | """
  2 | Django settings for project project.
  3 | 
  4 | Generated by 'django-admin startproject' using Django 3.0.8.
  5 | 
  6 | For more information on this file, see
  7 | https://docs.djangoproject.com/en/3.0/topics/settings/
  8 | 
  9 | For the full list of settings and their values, see
 10 | https://docs.djangoproject.com/en/3.0/ref/settings/
 11 | """
 12 | 
 13 | import os
 14 | 
 15 | # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 16 | BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 17 | 
 18 | 
 19 | # Quick-start development settings - unsuitable for production
 20 | # See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/
 21 | 
 22 | # SECURITY WARNING: keep the secret key used in production secret!
 23 | SECRET_KEY = 's917$+d8re=1@0sg39l985abmhlen3mo(o7=xy4v86#ka2pdsa'
 24 | 
 25 | # SECURITY WARNING: don't run with debug turned on in production!
 26 | DEBUG = True
 27 | 
 28 | #ALLOWED_HOSTS = []
 29 | ALLOWED_HOSTS = ['*', ]
 30 | 
 31 | 
 32 | # Application definition
 33 | 
 34 | INSTALLED_APPS = [
 35 |     'django.contrib.admin',
 36 |     'django.contrib.auth',
 37 |     'django.contrib.contenttypes',
 38 |     'django.contrib.sessions',
 39 |     'django.contrib.messages',
 40 |     'django.contrib.staticfiles',
 41 |     'project',
 42 |     'upload_form',
 43 | ]
 44 | 
 45 | MIDDLEWARE = [
 46 |     'django.middleware.security.SecurityMiddleware',
 47 |     'django.contrib.sessions.middleware.SessionMiddleware',
 48 |     'django.middleware.common.CommonMiddleware',
 49 |     'django.middleware.csrf.CsrfViewMiddleware',
 50 |     'django.contrib.auth.middleware.AuthenticationMiddleware',
 51 |     'django.contrib.messages.middleware.MessageMiddleware',
 52 |     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 53 | ]
 54 | 
 55 | ROOT_URLCONF = 'project.urls'
 56 | 
 57 | TEMPLATES = [
 58 |     {
 59 |         'BACKEND': 'django.template.backends.django.DjangoTemplates',
 60 |         'DIRS': [],
 61 |         'APP_DIRS': True,
 62 |         'OPTIONS': {
 63 |             'context_processors': [
 64 |                 'django.template.context_processors.debug',
 65 |                 'django.template.context_processors.request',
 66 |                 'django.contrib.auth.context_processors.auth',
 67 |                 'django.contrib.messages.context_processors.messages',
 68 |             ],
 69 |         },
 70 |     },
 71 | ]
 72 | 
 73 | WSGI_APPLICATION = 'project.wsgi.application'
 74 | 
 75 | 
 76 | # Database
 77 | # https://docs.djangoproject.com/en/3.0/ref/settings/#databases
 78 | 
 79 | DATABASES = {
 80 |     'default': {
 81 |         'ENGINE': 'django.db.backends.sqlite3',
 82 |         'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
 83 |     }
 84 | }
 85 | 
 86 | 
 87 | # Password validation
 88 | # https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators
 89 | 
 90 | AUTH_PASSWORD_VALIDATORS = [
 91 |     {
 92 |         'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
 93 |     },
 94 |     {
 95 |         'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
 96 |     },
 97 |     {
 98 |         'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
 99 |     },
100 |     {
101 |         'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
102 |     },
103 | ]
104 | 
105 | 
106 | # Internationalization
107 | # https://docs.djangoproject.com/en/3.0/topics/i18n/
108 | 
109 | LANGUAGE_CODE = 'en-us'
110 | 
111 | TIME_ZONE = 'UTC'
112 | 
113 | USE_I18N = True
114 | 
115 | USE_L10N = True
116 | 
117 | USE_TZ = True
118 | 
119 | 
120 | # Static files (CSS, JavaScript, Images)
121 | # https://docs.djangoproject.com/en/3.0/howto/static-files/
122 | 
123 | STATIC_URL = '/static/'
124 | STATIC_ROOT = os.path.abspath(os.path.join(BASE_DIR, 'public', 'static'))
125 | 
126 | MEDIA_URL = '/media/'
127 | MEDIA_ROOT = os.path.abspath(os.path.join(BASE_DIR, 'public', 'media'))
128 | 
129 | 
130 | UPLOAD_FORM_PARALLEL_UPLOAD = False
131 | UPLOAD_FORM_MAX_FILE_SIZE_MB = 10
132 | UPLOAD_FORM_ALLOWED_FILE_TYPES = ".jpg .jpeg .png .gif .bmp .tif .tiff .pic .doc .docx .odt .dot .xls .xlsx .pdf .dwg .dxf .txt .mp4"
133 | 
134 | MY_UPLOAD_FORM_ACCEPT = "image/*"
135 | MY_UPLOAD_FORM_MAX_IMAGE_SIZE = 1920
136 | 
137 | 


--------------------------------------------------------------------------------
/example/project/static/example.css:
--------------------------------------------------------------------------------
 1 | 
 2 | body {
 3 |      padding-top: 5rem;
 4 |      background-color: #fefefe;
 5 | }
 6 | 
 7 | .messages {
 8 |     border: 1px dashed gray;
 9 |     color: gray;
10 |     padding: 10px;
11 |     background-color: #ddd;
12 | }
13 | .messages li {
14 |     margin-left: 20px;
15 | }
16 | 
17 | #content {
18 |     margin-bottom: 30px;
19 | }
20 | 
21 | main {
22 | }
23 | 
24 | body.page-index a.nav-link.page-index,
25 | body.page-compress-image a.nav-link.page-compress-image,
26 | body.page-test a.nav-link.page-test {
27 |     color: #fff;
28 | }
29 | 
30 | h3 {
31 |     color: #127EC5;
32 | }
33 | 
34 | .numeric {
35 |     text-align: right;
36 | }
37 | 
38 | .nowrap {
39 |     white-space: nowrap;
40 | }
41 | 
42 | table.simpletable {
43 |     border-collapse: collapse;
44 | }
45 | table.simpletable td {
46 |     border: 1px solid #ddd;
47 |     padding: 2px 4px;
48 |     font-size: 12px;
49 | }
50 | 


--------------------------------------------------------------------------------
/example/project/static/images/big-ben-horizontal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/morlandi/django-upload-form/d126ae28dca30e78f82fd20e4a7170aa18989c3f/example/project/static/images/big-ben-horizontal.jpg


--------------------------------------------------------------------------------
/example/project/static/images/big-ben-vertical.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/morlandi/django-upload-form/d126ae28dca30e78f82fd20e4a7170aa18989c3f/example/project/static/images/big-ben-vertical.jpg


--------------------------------------------------------------------------------
/example/project/static/images/spinner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/morlandi/django-upload-form/d126ae28dca30e78f82fd20e4a7170aa18989c3f/example/project/static/images/spinner.jpg


--------------------------------------------------------------------------------
/example/project/templates/base.html:
--------------------------------------------------------------------------------
 1 | {% load i18n static %}
 2 | 
 3 | <!doctype html>
 4 | <html lang="en">
 5 | 
 6 | <head>
 7 |     <meta charset="utf-8">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 9 | 
10 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
11 |     <link rel="stylesheet" href="{% static 'example.css' %}">
12 |     {% block extrastyle %}
13 |     {% endblock extrastyle %}
14 | </head>
15 | 
16 | <body class="page-{% block body-class%}{% endblock body-class%}">
17 |     {% include 'navbar.html' %}
18 | 
19 |     <main role="main" class="container">
20 | 
21 |         <div id="page-title"><h1>{% block page-title %}{% endblock page-title %}</h1></div>
22 | 
23 |         {% block messages %}
24 |             {% if messages %}
25 |             <ul class="messages">
26 |                 {% for message in messages %}
27 |                     <li class="{{message.tag}}">{{ message }}</li>
28 |                 {% endfor %}
29 |             </ul>
30 |             {% endif %}
31 |         {% endblock messages %}
32 | 
33 |         <div id="content">
34 |         {% block content %}
35 |             <h1>Content goes here</h1>
36 |         {% endblock content %}
37 |         </div>
38 | 
39 |     </main>
40 | 
41 |     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
42 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
43 |     {% block extrajs %}
44 |     {% endblock extrajs %}
45 | 
46 | </body>
47 | 
48 | </html>
49 | 


--------------------------------------------------------------------------------
/example/project/templates/navbar.html:
--------------------------------------------------------------------------------
 1 | {% load i18n %}
 2 | 
 3 | <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
 4 |     <a class="navbar-brand" href="https://github.com/morlandi/django-upload-form">django-upload-form</a>
 5 |     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
 6 |         <span class="navbar-toggler-icon"></span>
 7 |     </button>
 8 |     <div class="collapse navbar-collapse" id="navbarsExampleDefault">
 9 |         <ul class="navbar-nav mr-auto">
10 |             <li class="nav-item">
11 |                 <a class="nav-link page-index" href="{% url 'index' %}">{% trans 'Home' %}</a>
12 |             </li>
13 |             <li class="nav-item">
14 |                 <a class="nav-link page-compress-image" href="{% url 'compress_images_test' %}">{% trans 'Compress image test' %}</a>
15 |             </li>
16 |             <li class="nav-item">
17 |                 <a class="nav-link page-test" href="/upload_form/test/">{% trans 'Test view' %}</a>
18 |             </li>
19 |             {% comment %}
20 |             <li class="nav-item">
21 |                 <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
22 |             </li>
23 |             <li class="nav-item dropdown">
24 |                 <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
25 |                 <div class="dropdown-menu" aria-labelledby="dropdown01">
26 |                     <a class="dropdown-item" href="#">Action</a>
27 |                     <a class="dropdown-item" href="#">Another action</a>
28 |                     <a class="dropdown-item" href="#">Something else here</a>
29 |                 </div>
30 |             </li>
31 |             {% endcomment %}
32 |         </ul>
33 |         {% comment %}
34 |         <form class="form-inline my-2 my-lg-0">
35 |             <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
36 |             <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
37 |         </form>
38 |         {% endcomment %}
39 |     </div>
40 | </nav>
41 | 


--------------------------------------------------------------------------------
/example/project/templates/pages/compress_images_test.html:
--------------------------------------------------------------------------------
 1 | {% extends 'base.html' %}
 2 | {% load i18n static %}
 3 | 
 4 | {% block page-title %}{% trans 'Compress image test' %}{% endblock page-title %}
 5 | {% block body-class%}compress-image{% endblock body-class %}
 6 | 
 7 | 
 8 | {% block content %}
 9 | 
10 | <div class="container">
11 | 
12 |     <div class="row">
13 |         <div class="col-md-6">
14 |             <img id="source-image-vertical" src="{% static 'images/big-ben-vertical.jpg' %}">
15 |         </div>
16 |         <div class="col-md-6">
17 |             <img id="target-image-vertical" src="{% static 'images/spinner.jpg' %}">
18 |         </div>
19 |     </div>
20 |     <br />
21 |     <div class="row">
22 |         <div class="col-md-6">
23 |             <img id="source-image-horizontal" src="{% static 'images/big-ben-horizontal.jpg' %}">
24 |         </div>
25 |         <div class="col-md-6">
26 |             <img id="target-image-horizontal" src="{% static 'images/spinner.jpg' %}">
27 |         </div>
28 |     </div>
29 | 
30 | </div>
31 | 
32 | {% endblock content %}
33 | 
34 | 
35 | {% block extrastyle %}
36 |     {{ block.super }}
37 | 
38 |     <style>
39 |         img {
40 |             border: 2px solid black;
41 |             width: 300px;
42 |         }
43 |     </style>
44 | 
45 | {% endblock extrastyle %}
46 | 
47 | 
48 | {% block extrajs %}
49 |     {{ block.super }}
50 |     <script src="https://unpkg.com/blob-util/dist/blob-util.min.js"></script>
51 |     <script src="{% static 'upload_form/utils.js' %}"></script>
52 |     <script>
53 | 
54 |         function display_image_size(element) {
55 |             var item = $(element);
56 |             var parent = item.parent();
57 |             var w = item.get(0).naturalWidth;
58 |             var h = item.get(0).naturalHeight;
59 |             var html = '<div class="imgsize">' + w + 'x' + h + '</div>';
60 |             parent.find('.imgsize').empty();
61 |             parent.append(html);
62 |         }
63 | 
64 |         function do_resize_image(source_image, target_image) {
65 |             var max_size = 1920;
66 |             blobUtil.imgSrcToBlob(source_image.get(0).src).then(function(blob) {
67 |                 UploadFormUtils.resize_image(blob, max_size).done(function(dataurl_or_blob) {
68 |                     if (dataurl_or_blob instanceof Blob) {
69 |                         UploadFormUtils.blobToDataURL(dataurl_or_blob, function(dataUrl) {
70 |                             target_image.attr('src', dataUrl);
71 |                         });
72 |                     }
73 |                     else {
74 |                         target_image.attr('src', dataurl_or_blob);
75 |                     }
76 |                 })
77 |             });
78 |         }
79 | 
80 |         $(document).ready(function($) {
81 |             $('img').on('load', function(event) {
82 |                 display_image_size(event.target);
83 |             });
84 |             display_image_size($('#source-image-vertical'));
85 |             display_image_size($('#source-image-horizontal'));
86 |             do_resize_image($('#source-image-vertical'), $('#target-image-vertical'));
87 |             do_resize_image($('#source-image-horizontal'), $('#target-image-horizontal'));
88 |         });
89 | 
90 |     </script>
91 | {% endblock extrajs %}
92 | 
93 | 


--------------------------------------------------------------------------------
/example/project/templates/pages/index.html:
--------------------------------------------------------------------------------
  1 | {% extends 'base.html' %}
  2 | {% load i18n utils_tags %}
  3 | 
  4 | {% block page-title %}django-upload-form example{% endblock page-title %}
  5 | {% block body-class%}index{% endblock body-class %}
  6 | 
  7 | 
  8 | {% block content %}
  9 | 
 10 | <div class="container">
 11 | 
 12 |     <div class="row">
 13 |         <div class="col-md-6">
 14 |             <div id="form-container">
 15 |                 {{ form_as_html }}
 16 |             </div>
 17 |         </div>
 18 |         <div class="col-md-6">
 19 |             <h3>{% trans 'Saved files' %} ({{files|length}})</h3>
 20 |             {% if files.count > 0 %}
 21 |                 <table class="simpletable">
 22 |                     <tr>
 23 |                         <th>{% trans 'created' %}</th>
 24 |                         <th>{% trans 'file' %}</th>
 25 |                         <th>{% trans 'size' %}</th>
 26 |                         <th>{% trans 'image info' %}</th>
 27 |                         <th>{% trans 'description' %}</th>
 28 |                     </tr>
 29 |                     {% for file in files %}
 30 |                     <tr>
 31 |                         <td class="nowrap">{{file.created|format_datetime}}</td>
 32 |                         <td>
 33 |                             {% if file.file %}
 34 |                             <a href="{{file.file.url}}">{{file}}</a>
 35 |                             {% endif %}
 36 |                         </td>
 37 |                         <td class="numeric">
 38 |                             {% if file.file %}
 39 |                             {{file.file.size|filesizeformat}}
 40 |                             {% endif %}
 41 |                         </td>
 42 |                         <td class="nowrap">
 43 |                             {% if file.file %}
 44 |                             {{file.file|imagesize}}
 45 |                             {% endif %}
 46 |                         </td>
 47 |                         <td>
 48 |                             {{file.description}}
 49 |                         </td>
 50 |                     </tr>
 51 |                     {% endfor %}
 52 |                 </table>
 53 |                 <a href="{% url 'clear_all_files' %}">{% trans 'Clear all' %}</a>
 54 |             {% else %}
 55 |                 <p>{% trans 'No files uploaded yet' %}</p>
 56 |             {% endif %}
 57 |         </div>
 58 |     </div>
 59 | 
 60 |     <div class="row">
 61 |         <div class="col-md-12">
 62 |             <h3>{% trans 'Settings' %}</h3>
 63 |             <table class="simpletable">
 64 |                 <tr>
 65 |                     <th>{% trans 'key' %}</th>
 66 |                     <th>{% trans 'value' %}</th>
 67 |                 </tr>
 68 |                 {% for row in app_settings %}
 69 |                 <tr>
 70 |                     <td>{{row.0}}</td><td>{{row.1}}</td>
 71 |                 </tr>
 72 |                 {% endfor %}
 73 |             </table>
 74 |         </div>
 75 |     </div>
 76 | </div>
 77 | 
 78 | {% endblock content %}
 79 | 
 80 | 
 81 | {% block extrajs %}
 82 |     {{ block.super }}
 83 |     {{form.media}}
 84 | {% endblock extrajs %}
 85 | 
 86 | 
 87 | {% block extrastyle %}
 88 |     {{ block.super }}
 89 | 
 90 |     <style>
 91 |     #form-container .uploadform_drop_area {
 92 |         background-color: #ffc;
 93 |     }
 94 |     table.container td {
 95 |         padding: 40px;
 96 |         vertical-align: top;
 97 |     }
 98 |     </style>
 99 | 
100 | {% endblock extrastyle %}
101 | 


--------------------------------------------------------------------------------
/example/project/templatetags/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/morlandi/django-upload-form/d126ae28dca30e78f82fd20e4a7170aa18989c3f/example/project/templatetags/__init__.py


--------------------------------------------------------------------------------
/example/project/templatetags/utils_tags.py:
--------------------------------------------------------------------------------
 1 | import datetime
 2 | import imghdr
 3 | from PIL import Image
 4 | from django import template
 5 | from django.utils import timezone
 6 | from django.utils import formats
 7 | 
 8 | register = template.Library()
 9 | 
10 | 
11 | @register.filter
12 | def pdb(element):
13 |     """ Usage: {{ template_var|pdb }}
14 |         then inspect 'element' from pdb
15 |     """
16 |     import pdb
17 |     pdb.set_trace()
18 |     return element
19 | 
20 | 
21 | @register.filter
22 | def ipdb(element):
23 |     """ Usage: {{ template_var|pdb }}
24 |         then inspect 'element' from pdb
25 |     """
26 |     import ipdb
27 |     ipdb.set_trace()
28 |     return element
29 | 
30 | 
31 | @register.filter
32 | def format_datetime(dt, include_time=True, include_seconds=False, exclude_date=False):
33 |     """
34 |     Apply datetime format suggested for all admin views.
35 | 
36 |     Here we adopt the following rule:
37 |     1) format date according to active localization
38 |     2) append time in military format
39 |     """
40 | 
41 |     if dt is None:
42 |         return ''
43 | 
44 |     if not isinstance(dt, datetime.datetime):
45 |         include_time = False
46 | 
47 |     if include_time:
48 |         dt = timezone.localtime(dt)
49 | 
50 |     if exclude_date:
51 |         text = ''
52 |     else:
53 |         text = formats.date_format(dt, use_l10n=True, format='SHORT_DATE_FORMAT')
54 |     if include_time:
55 |         if len(text):
56 |             text += ' '
57 |         text += dt.strftime('%H:%M')
58 |         if include_seconds:
59 |             text += dt.strftime(':%S')
60 |     return text
61 | 
62 | 
63 | @register.filter
64 | def imagesize(obj):
65 |     image_type = imghdr.what(obj.file)
66 |     if image_type is None:
67 |         return ''
68 | 
69 |     image = Image.open(obj.file)
70 |     w, h = image.size
71 |     text = '%s (%dx%d)' % (image_type, w, h)
72 |     return text
73 | 


--------------------------------------------------------------------------------
/example/project/urls.py:
--------------------------------------------------------------------------------
 1 | """project URL Configuration
 2 | 
 3 | The `urlpatterns` list routes URLs to views. For more information please see:
 4 |     https://docs.djangoproject.com/en/3.0/topics/http/urls/
 5 | Examples:
 6 | Function views
 7 |     1. Add an import:  from my_app import views
 8 |     2. Add a URL to urlpatterns:  path('', views.home, name='home')
 9 | Class-based views
10 |     1. Add an import:  from other_app.views import Home
11 |     2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
12 | Including another URLconf
13 |     1. Import the include() function: from django.urls import include, path
14 |     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
15 | """
16 | from django.contrib import admin
17 | from django.urls import path, include
18 | from django.views.generic import TemplateView
19 | from django.shortcuts import redirect
20 | from django.conf.urls.static import static
21 | from django.conf import settings
22 | from . import views
23 | 
24 | 
25 | urlpatterns = [
26 |     path('admin/', admin.site.urls),
27 |     path('upload_form/', include('upload_form.urls', namespace='upload_form')),
28 |     #path('', TemplateView.as_view(template_name='index.html'), name='home'),
29 |     path('', views.index, name='index'),
30 |     path('compress_images_test/', views.compress_images_test, name='compress_images_test'),
31 |     path('clear_all_files/', views.clear_all_files, name='clear_all_files'),
32 |     path('my_upload_target_view/', views.my_upload_target_view, name="my_upload_target_view")
33 |     #path('', lambda x: redirect('upload_form/test_view/')),
34 | ] \
35 | + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) \
36 | + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
37 | 


--------------------------------------------------------------------------------
/example/project/utils.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | from django.db import models
 3 | 
 4 | 
 5 | def _remove_file_and_cleanup(filepath):
 6 |     """
 7 |     Helper to remove a media file;
 8 |     also removes the containing folder, if left empty
 9 |     """
10 |     folder = os.path.dirname(filepath)
11 |     # remove file
12 |     if os.path.isfile(filepath):
13 |         os.remove(filepath)
14 |     # finally, remove folder if empty
15 |     if os.path.isdir(folder) and len(os.listdir(folder)) <= 0:
16 |         os.rmdir(folder)
17 | 
18 | 
19 | def auto_delete_filefields_on_delete(sender, instance, **kwargs):
20 |     """ Deletes file from filesystem when corresponding `MediaFile` object is deleted.
21 |         Adapted: http://stackoverflow.com/questions/16041232/django-delete-filefield
22 | 
23 |         Connect the receiver as follows:
24 | 
25 |             models.signals.post_delete.connect(auto_delete_filefields_on_delete, sender=Picture)
26 |     """
27 | 
28 |     # Collect names of FileFields
29 |     fieldnames = [f.name for f in instance._meta.get_fields() if isinstance(f, models.FileField)]
30 |     for fieldname in fieldnames:
31 |         field = getattr(instance, fieldname)
32 |         if bool(field):
33 |             _remove_file_and_cleanup(field.path)
34 | 


--------------------------------------------------------------------------------
/example/project/views.py:
--------------------------------------------------------------------------------
 1 | from django.shortcuts import render
 2 | from django.http import JsonResponse
 3 | from django.http import HttpResponseRedirect
 4 | from django.contrib import messages
 5 | from django.conf import settings
 6 | try:
 7 |     from django.urls import reverse
 8 | except ModuleNotFoundError as e:
 9 |     # for Django < v1.10
10 |     from django.core.urlresolvers import reverse
11 | from upload_form import app_settings as upload_form_app_settings
12 | from .forms import MyUploadForm
13 | from .models import File
14 | 
15 | 
16 | def index(request):
17 | 
18 |     assert request.method == 'GET'
19 |     form = MyUploadForm()
20 | 
21 |     app_settings = [
22 |         ['UPLOAD_FORM_MAX_FILE_SIZE_MB', upload_form_app_settings.get_max_file_size_MB()],
23 |         ['UPLOAD_FORM_PARALLEL_UPLOAD', upload_form_app_settings.get_parallel_upload()],
24 |         ['UPLOAD_FORM_ALLOWED_FILE_TYPES', upload_form_app_settings.get_allowed_file_types()],
25 |         ['MY_UPLOAD_FORM_ACCEPT', settings.MY_UPLOAD_FORM_ACCEPT],
26 |         ['MY_UPLOAD_FORM_MAX_IMAGE_SIZE', settings.MY_UPLOAD_FORM_MAX_IMAGE_SIZE],
27 |     ]
28 | 
29 |     return render(
30 |         request,
31 |         'pages/index.html', {
32 |             'app_settings': app_settings,
33 |             'form': form,
34 |             'form_as_html': form.as_html(request),
35 |             'files': File.objects.all()
36 |         }
37 |     )
38 | 
39 | 
40 | def compress_images_test(request):
41 |     return render(
42 |         request,
43 |         'pages/compress_images_test.html', {
44 |         }
45 |     )
46 | 
47 | 
48 | def my_upload_target_view(request):
49 | 
50 |     assert request.method == 'POST'
51 |     assert request.is_ajax()
52 | 
53 |     form = MyUploadForm(request.POST, request.FILES)
54 | 
55 |     if form.is_valid():
56 |         url = form.form_valid(request)
57 |         return JsonResponse({'action': 'redirect', 'url': url, })
58 |     else:
59 |         return JsonResponse({'action': 'replace', 'html': form.as_html(request), })
60 | 
61 | 
62 | def clear_all_files(request):
63 |     File.objects.all().delete()
64 |     return HttpResponseRedirect(reverse('index'))
65 | 


--------------------------------------------------------------------------------
/example/project/wsgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | WSGI config for project project.
 3 | 
 4 | It exposes the WSGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/3.0/howto/deployment/wsgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.wsgi import get_wsgi_application
13 | 
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'project.settings')
15 | 
16 | application = get_wsgi_application()
17 | 


--------------------------------------------------------------------------------
/example/requirements.txt:
--------------------------------------------------------------------------------
1 | Django==3.0.8
2 | pillow==7.2.0
3 | -e ../
4 | 
5 | 


--------------------------------------------------------------------------------
/screenshots/001.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/morlandi/django-upload-form/d126ae28dca30e78f82fd20e4a7170aa18989c3f/screenshots/001.png


--------------------------------------------------------------------------------
/screenshots/002.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/morlandi/django-upload-form/d126ae28dca30e78f82fd20e4a7170aa18989c3f/screenshots/002.png


--------------------------------------------------------------------------------
/screenshots/003.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/morlandi/django-upload-form/d126ae28dca30e78f82fd20e4a7170aa18989c3f/screenshots/003.png


--------------------------------------------------------------------------------
/screenshots/004.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/morlandi/django-upload-form/d126ae28dca30e78f82fd20e4a7170aa18989c3f/screenshots/004.png


--------------------------------------------------------------------------------
/screenshots/example/001.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/morlandi/django-upload-form/d126ae28dca30e78f82fd20e4a7170aa18989c3f/screenshots/example/001.png


--------------------------------------------------------------------------------
/screenshots/example/002.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/morlandi/django-upload-form/d126ae28dca30e78f82fd20e4a7170aa18989c3f/screenshots/example/002.png


--------------------------------------------------------------------------------
/screenshots/example/003.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/morlandi/django-upload-form/d126ae28dca30e78f82fd20e4a7170aa18989c3f/screenshots/example/003.png


--------------------------------------------------------------------------------
/setup.cfg:
--------------------------------------------------------------------------------
 1 | [bumpversion]
 2 | current_version = 0.5.0
 3 | commit = True
 4 | tag = True
 5 | 
 6 | [bumpversion:file:upload_form/__init__.py]
 7 | 
 8 | [wheel]
 9 | universal = 1
10 | 


--------------------------------------------------------------------------------
/setup.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | import re
 3 | from setuptools import find_packages, setup
 4 | 
 5 | 
 6 | def get_version(*file_paths):
 7 |     """Retrieves the version from specific file"""
 8 |     filename = os.path.join(os.path.dirname(__file__), *file_paths)
 9 |     version_file = open(filename).read()
10 |     version_match = re.search(r"^__version__ = ['\"]([^'\"]*)['\"]", version_file, re.M)
11 |     if version_match:
12 |         return version_match.group(1)
13 |     raise RuntimeError('Unable to find version string.')
14 | 
15 | 
16 | version = get_version("upload_form", "__init__.py")
17 | readme = open('README.rst').read()
18 | history = open('CHANGELOG.rst').read().replace('.. :changelog:', '')
19 | 
20 | 
21 | setup(name='django-upload-form',
22 |       version=version,
23 |       description='A minimal (yet careful about UX) solution to upload multiple files in a Django project, using a Django-like Form Class',
24 |       long_description=readme + '\n\n' + history,
25 |       url='http://github.com/morlandi/django-upload-form',
26 |       author='Mario Orlandi',
27 |       author_email='morlandi@brainstorm.it',
28 |       license='MIT',
29 |       include_package_data=True,
30 |       packages=find_packages(),
31 |       zip_safe=False,
32 |       classifiers=[
33 |         'Development Status :: 5 - Production/Stable',
34 |         'Operating System :: OS Independent',
35 |         'Programming Language :: Python',
36 |         'Framework :: Django',
37 |         'Framework :: Django :: 1.11',
38 |         'Framework :: Django :: 2.2',
39 |         'Framework :: Django :: 3.0',
40 |         'Intended Audience :: Developers',
41 |         'License :: OSI Approved :: BSD License',
42 |         'Natural Language :: English',
43 |         'Programming Language :: Python :: 3.7',
44 |     ],
45 | )
46 | 


--------------------------------------------------------------------------------
/upload_form/__init__.py:
--------------------------------------------------------------------------------
1 | __version__ = '0.5.0'
2 | 


--------------------------------------------------------------------------------
/upload_form/app_settings.py:
--------------------------------------------------------------------------------
 1 | from django.conf import settings
 2 | 
 3 | 
 4 | def get_allowed_file_types(request=None):
 5 |     try:
 6 |         from constance import config
 7 |         str_types = config.UPLOAD_FORM_ALLOWED_FILE_TYPES
 8 |     except:
 9 |         str_types = getattr(
10 |             settings,
11 |             'UPLOAD_FORM_ALLOWED_FILE_TYPES',
12 |             ".jpg .jpeg .png .gif .bmp .tif .tiff .pic .doc .docx .odt .dot .xls .xlsx .pdf .dwg .dxf .txt")
13 |     return str_types
14 | 
15 | 
16 | def get_max_file_size_MB(request=None):
17 |     try:
18 |         from constance import config
19 |         value = config.UPLOAD_FORM_MAX_FILE_SIZE_MB
20 |     except:
21 |         value = getattr(settings, 'UPLOAD_FORM_MAX_FILE_SIZE_MB', 10)
22 |     return value
23 | 
24 | 
25 | def get_parallel_upload(request=None):
26 |     try:
27 |         from constance import config
28 |         value = config.UPLOAD_FORM_PARALLEL_UPLOAD
29 |     except:
30 |         value = getattr(settings, 'UPLOAD_FORM_PARALLEL_UPLOAD', False)
31 |     return value
32 | 
33 | 
34 | 


--------------------------------------------------------------------------------
/upload_form/apps.py:
--------------------------------------------------------------------------------
1 | from django.apps import AppConfig
2 | 
3 | 
4 | class UploadFormConfig(AppConfig):
5 |     name = 'upload_form'
6 | 


--------------------------------------------------------------------------------
/upload_form/forms.py:
--------------------------------------------------------------------------------
  1 | import os
  2 | from django.conf import settings
  3 | from django.template.loader import render_to_string
  4 | from django.utils.translation import ugettext_lazy as _
  5 | from django import forms
  6 | from . import app_settings
  7 | 
  8 | 
  9 | class UploadForm(forms.Form):
 10 |     """
 11 |     This class behaves much like a Django form.
 12 | 
 13 |     See upload_form.views.test() for a usage example.
 14 |     """
 15 | 
 16 |     class Media:
 17 |         css = {
 18 |             'all': ('upload_form/upload_form.css',)
 19 |         }
 20 |         js = (
 21 |             'upload_form/upload_form.js',
 22 |             'upload_form/filelist.js',
 23 |             'upload_form/utils.js',
 24 |         )
 25 | 
 26 |     def __init__(self, data=None, files=None):
 27 |         super().__init__(data, files)
 28 |         self.data = data
 29 |         self.files = files
 30 |         self.file_errors = []
 31 |         self.accept = None
 32 |         self.allowed_file_types = None
 33 |         self.max_image_size = 0
 34 | 
 35 |     def form_valid(self, request):
 36 |         """
 37 |         Example:
 38 |             self.dump()
 39 |             return self.get_success_url()
 40 |         """
 41 |         assert False, 'To be overridden'
 42 | 
 43 |     def get_success_url(self, request=None):
 44 |         """
 45 |         Example:
 46 |             return '/'
 47 |         """
 48 |         assert False, 'To be overridden'
 49 | 
 50 |     def get_action(self, request=None):
 51 |         """
 52 |         Example:
 53 |             return reverse('upload_form:test')
 54 |         """
 55 |         assert False, 'To be overridden'
 56 | 
 57 |     def get_accept(self, request=None):
 58 |         """
 59 |         Might be overridden
 60 |         Example:
 61 |             return 'image/*'
 62 |         Defaults to: list of allowed file types
 63 |         """
 64 |         return self.accept
 65 | 
 66 |     def get_max_image_size(self, request=None):
 67 |         """
 68 |         Might be overridden
 69 |         """
 70 |         return self.max_image_size
 71 | 
 72 |     def _list_allowed_file_types(self):
 73 |         text = self.allowed_file_types if self.allowed_file_types is not None else app_settings.get_allowed_file_types()
 74 |         # Allow multiple separators
 75 |         tokens = text.lower().replace(',',' ').replace(';',' ').split()
 76 |         # Add leading dot when required
 77 |         tokens = [t if t.startswith('.') else ('.'+t) for t in tokens]
 78 |         return tokens
 79 | 
 80 |     def as_html(self, request):
 81 |         accept = self.get_accept(request)
 82 |         if accept is None:
 83 |             # Build from list of allowed file types
 84 |             accept = ','.join(self._list_allowed_file_types())
 85 | 
 86 |         html = render_to_string(
 87 |             'upload_form/upload_form.html', {
 88 |                 'form': self,
 89 |                 'file_errors': self.file_errors,
 90 |                 'action': self.get_action(request),
 91 |                 'accept': accept,
 92 |                 'max_image_size': self.get_max_image_size(request),
 93 |                 'UPLOAD_FORM_PARALLEL_UPLOAD': app_settings.get_parallel_upload(),
 94 |             },
 95 |             request
 96 |         )
 97 |         return html
 98 | 
 99 |     def has_errors(self):
100 |         return len(self.file_errors) > 0
101 | 
102 |     def dump(self):
103 |         print('=' * 128)
104 |         print(self.data)
105 |         print('-' * 128)
106 |         print(self.files)
107 |         files = self.files.getlist('files')
108 |         for i, file in enumerate(files):
109 |             print('[%d]: "%s"' % (i, file))
110 |         print('=' * 128)
111 | 
112 |     def is_valid(self):
113 | 
114 |         allowed_file_types = self._list_allowed_file_types()
115 |         max_file_size_MB = app_settings.get_max_file_size_MB()
116 | 
117 |         self.file_errors = []
118 |         files = self.files.getlist('files')
119 |         for file in files:
120 |             name, extension = os.path.splitext(file.name)
121 |             extension = extension.lower()
122 |             size_MB = file.size / (1024 * 1024)
123 |             if extension not in allowed_file_types:
124 |                 self.file_errors.append("%s: %s" % (file.name, _('File type not allowed')))
125 |             if size_MB > max_file_size_MB:
126 |                 self.file_errors.append("%s: %s" % (file.name, _('File size exceeds %s MB limit') % str(max_file_size_MB)))
127 | 
128 |         #return len(self.file_errors) <= 0
129 |         valid = super().is_valid() and len(self.file_errors) <= 0
130 |         return valid
131 | 


--------------------------------------------------------------------------------
/upload_form/locale/it/LC_MESSAGES/django.mo:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/morlandi/django-upload-form/d126ae28dca30e78f82fd20e4a7170aa18989c3f/upload_form/locale/it/LC_MESSAGES/django.mo


--------------------------------------------------------------------------------
/upload_form/locale/it/LC_MESSAGES/django.po:
--------------------------------------------------------------------------------
 1 | # SOME DESCRIPTIVE TITLE.
 2 | # Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
 3 | # This file is distributed under the same license as the PACKAGE package.
 4 | # FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
 5 | #
 6 | msgid ""
 7 | msgstr ""
 8 | "Project-Id-Version: \n"
 9 | "Report-Msgid-Bugs-To: \n"
10 | "POT-Creation-Date: 2020-08-05 16:39+0000\n"
11 | "PO-Revision-Date: 2020-08-05 18:41+0200\n"
12 | "Last-Translator: Mario Orlandi <morlandi@brainstorm.it>\n"
13 | "Language-Team: \n"
14 | "Language: it\n"
15 | "MIME-Version: 1.0\n"
16 | "Content-Type: text/plain; charset=UTF-8\n"
17 | "Content-Transfer-Encoding: 8bit\n"
18 | "Plural-Forms: nplurals=2; plural=(n != 1);\n"
19 | "X-Generator: Poedit 2.4\n"
20 | 
21 | #: forms.py:114
22 | msgid "File type not allowed"
23 | msgstr "Tipo di file non ammesso"
24 | 
25 | #: forms.py:116
26 | #, python-format
27 | msgid "File size exceeds %s MB limit"
28 | msgstr "Il file supera la dimensione massima consentita di %s MB"
29 | 
30 | #: templates/upload_form/upload_form.html:13
31 | msgid ""
32 | "Select multiple files with the file dialog or by dragging and dropping them "
33 | "onto the dashed region"
34 | msgstr ""
35 | "Seleziona uno o più files premendo il bottone o trascinandoli nell'area "
36 | "tratteggiata"
37 | 
38 | #: templates/upload_form/upload_form.html:17
39 | msgid "Please correct the errors below"
40 | msgstr "Si prega di correggere gli errori di seguito evidenziati"
41 | 
42 | #: templates/upload_form/upload_form.html:28
43 | msgid "upload"
44 | msgstr "caricamento"
45 | 
46 | #: templates/upload_form/upload_form.html:30
47 | msgid "Select some files"
48 | msgstr "Seleziona uno o più files"
49 | 
50 | #: templates/upload_form/upload_form.html:37
51 | msgid "Press the button below to proceed with files upload"
52 | msgstr ""
53 | "Premere il pulsante qui sotto per procedere con il caricamento dei file"
54 | 
55 | #: templates/upload_form/upload_form.html:40
56 | msgid "Send"
57 | msgstr "Invia"
58 | 
59 | #: templates/upload_form/upload_form.html:51
60 | msgid "type"
61 | msgstr "tipo"
62 | 
63 | #: templates/upload_form/upload_form.html:52
64 | msgid "name"
65 | msgstr "nome"
66 | 
67 | #: templates/upload_form/upload_form.html:53
68 | msgid "size"
69 | msgstr "dimensione"
70 | 


--------------------------------------------------------------------------------
/upload_form/static/upload_form/filelist.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Today we feel zealous enough to use the Module Pattern ;)
  4 | window.UploadFormFileList = (function() {
  5 | 
  6 |     var fileList = [];
  7 |     var wrapper = null;
  8 | 
  9 |     function initialize(wrapper_element) {
 10 |         wrapper = $(wrapper_element);
 11 |         wrapper.find('.uploadform_remove_all_files').on('click', clear);
 12 |         fileList = [];
 13 |     }
 14 | 
 15 |     function get_filelist() {
 16 |         return fileList;
 17 |     }
 18 | 
 19 |     function removeByFilename(filename) {
 20 |         // Remove specified item from fileList array;
 21 |         // returns true if successfull, false if not found
 22 |         var rc = false;
 23 |         $(fileList).each(function(index, item) {
 24 |             if (item.name == filename) {
 25 |                 fileList.splice(index, 1);  // remove
 26 |                 console.log('"%o" removed', filename);
 27 |                 rc = true;
 28 |                 return false;  // break
 29 |             }
 30 |         });
 31 |         return rc;
 32 |     }
 33 | 
 34 |     function add(file) {
 35 |         // Append this 'file' to fileList array;
 36 |         // To avoid duplicates, first removes the previoulsy inserted item
 37 |         // with same filename, if exists
 38 |         removeByFilename(file.name);
 39 |         fileList.push(file);
 40 |     }
 41 | 
 42 |     function deleteFileListRow(element) {
 43 |         // Delete the file associated to this row,
 44 |         // then refresh UI
 45 |         event.preventDefault();
 46 |         var row = $(event.target).closest('tr');
 47 |         var filename = row.find('.filename').text();
 48 |         removeByFilename(filename);
 49 |         refreshUI();
 50 |     }
 51 | 
 52 |     function clear(event) {
 53 |         // Remove all files in fileList array,
 54 |         // then refresh UI
 55 |         if (event) {
 56 |             event.preventDefault();
 57 |         }
 58 |         fileList = [];
 59 |         refreshUI();
 60 |     }
 61 | 
 62 |     function _fileSize(b) {
 63 |         var u = 0;
 64 |         var s = 1024;
 65 |         while (b >= s || -b >= s) {
 66 |             b /= s;
 67 |             u++;
 68 |         }
 69 |         return (u ? b.toFixed(1) + ' ' : b) + ' KMGTPEZY'[u] + 'B';
 70 |     }
 71 | 
 72 |     function refreshUI() {
 73 |         // Update UI by refreshing the file display table;
 74 |         // also, restore row event handlers
 75 |         console.log('fileList: %o', fileList);
 76 |         if (fileList.length <= 0) {
 77 |             wrapper.hide();
 78 |             wrapper.find('.uploadform_remove_file').off();
 79 |         }
 80 |         else {
 81 |             wrapper.show();
 82 |             var fileDisplay = wrapper.find('table tbody');
 83 | 
 84 |             fileDisplay.html('');
 85 |             $(fileList).each(function(index, file) {
 86 | 
 87 |                 // fileDisplay.append(sprintf(
 88 |                 //     '<tr><td class="filetype">%s</td><td class="filename">%s</td><td class="numeric">%s</td><td class="delete">%s</td></tr>',
 89 |                 //     file.name.split('.').pop(),
 90 |                 //     file.name,
 91 |                 //     _fileSize(file.size),
 92 |                 //     '<a href="#" class="uploadform_remove_file" title="remove this"><img src="/static/upload_form/icons/trash-svgrepo-com.svg" class="icon"></a>'
 93 |                 // ));
 94 | 
 95 |                 var fname = file.name;
 96 |                 var ftype = file.name.split('.').pop();
 97 |                 var fsize = _fileSize(file.size);
 98 |                 var rmlink = '<a href="#" class="uploadform_remove_file" title="remove this"><img src="/static/upload_form/icons/trash-svgrepo-com.svg" class="icon"></a>';
 99 |                 fileDisplay.append(
100 |                     '<tr>' +
101 |                     '<td class="filetype">' + ftype + '</td>' +
102 |                     '<td class="filename">' + fname + '</td>' +
103 |                     '<td class="numeric">' + fsize + '</td>' +
104 |                     '<td class="delete">' + rmlink + '</td>' +
105 |                     '</tr>'
106 |                 );
107 |             });
108 |             wrapper.find('.uploadform_remove_file').off().on('click', deleteFileListRow);
109 |         }
110 |     }
111 | 
112 |     return {
113 |         initialize: initialize,
114 |         get_filelist: get_filelist,
115 |         add: add,
116 |         refreshUI: refreshUI
117 |     };
118 | 
119 | })();
120 | 


--------------------------------------------------------------------------------
/upload_form/static/upload_form/icons/cloud-upload-svgrepo-com.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 184.69 184.69" style="enable-background:new 0 0 184.69 184.69;" xml:space="preserve">
 5 | <g>
 6 | 	<g>
 7 | 		<g>
 8 | 			<path style="fill:#010002;" d="M149.968,50.186c-8.017-14.308-23.796-22.515-40.717-19.813
 9 | 				C102.609,16.43,88.713,7.576,73.087,7.576c-22.117,0-40.112,17.994-40.112,40.115c0,0.913,0.036,1.854,0.118,2.834
10 | 				C14.004,54.875,0,72.11,0,91.959c0,23.456,19.082,42.535,42.538,42.535h33.623v-7.025H42.538
11 | 				c-19.583,0-35.509-15.929-35.509-35.509c0-17.526,13.084-32.621,30.442-35.105c0.931-0.132,1.768-0.633,2.326-1.392
12 | 				c0.555-0.755,0.795-1.704,0.644-2.63c-0.297-1.904-0.447-3.582-0.447-5.139c0-18.249,14.852-33.094,33.094-33.094
13 | 				c13.703,0,25.789,8.26,30.803,21.04c0.63,1.621,2.351,2.534,4.058,2.14c15.425-3.568,29.919,3.883,36.604,17.168
14 | 				c0.508,1.027,1.503,1.736,2.641,1.897c17.368,2.473,30.481,17.569,30.481,35.112c0,19.58-15.937,35.509-35.52,35.509H97.391
15 | 				v7.025h44.761c23.459,0,42.538-19.079,42.538-42.535C184.69,71.545,169.884,53.901,149.968,50.186z"/>
16 | 		</g>
17 | 		<g>
18 | 			<path style="fill:#010002;" d="M108.586,90.201c1.406-1.403,1.406-3.672,0-5.075L88.541,65.078
19 | 				c-0.701-0.698-1.614-1.045-2.534-1.045l-0.064,0.011c-0.018,0-0.036-0.011-0.054-0.011c-0.931,0-1.85,0.361-2.534,1.045
20 | 				L63.31,85.127c-1.403,1.403-1.403,3.672,0,5.075c1.403,1.406,3.672,1.406,5.075,0L82.296,76.29v97.227
21 | 				c0,1.99,1.603,3.597,3.593,3.597c1.979,0,3.59-1.607,3.59-3.597V76.165l14.033,14.036
22 | 				C104.91,91.608,107.183,91.608,108.586,90.201z"/>
23 | 		</g>
24 | 	</g>
25 | </g>
26 | <g>
27 | </g>
28 | <g>
29 | </g>
30 | <g>
31 | </g>
32 | <g>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | <g>
39 | </g>
40 | <g>
41 | </g>
42 | <g>
43 | </g>
44 | <g>
45 | </g>
46 | <g>
47 | </g>
48 | <g>
49 | </g>
50 | <g>
51 | </g>
52 | <g>
53 | </g>
54 | <g>
55 | </g>
56 | </svg>
57 | 


--------------------------------------------------------------------------------
/upload_form/static/upload_form/icons/trash-svgrepo-com.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 458.5 458.5" style="enable-background:new 0 0 458.5 458.5;" xml:space="preserve">
 5 | <g>
 6 | 	<g>
 7 | 		<g>
 8 | 			<path d="M382.078,57.069h-89.78C289.128,25.075,262.064,0,229.249,0S169.37,25.075,166.2,57.069H76.421
 9 | 				c-26.938,0-48.854,21.916-48.854,48.854c0,26.125,20.613,47.524,46.429,48.793V399.5c0,32.533,26.467,59,59,59h192.508
10 | 				c32.533,0,59-26.467,59-59V154.717c25.816-1.269,46.429-22.668,46.429-48.793C430.933,78.985,409.017,57.069,382.078,57.069z
11 | 				 M229.249,30c16.244,0,29.807,11.673,32.76,27.069h-65.52C199.442,41.673,213.005,30,229.249,30z M354.503,399.501
12 | 				c0,15.991-13.009,29-29,29H132.995c-15.991,0-29-13.009-29-29V154.778c12.244,0,240.932,0,250.508,0V399.501z M382.078,124.778
13 | 				c-3.127,0-302.998,0-305.657,0c-10.396,0-18.854-8.458-18.854-18.854S66.025,87.07,76.421,87.07h305.657
14 | 				c10.396,0,18.854,8.458,18.854,18.854S392.475,124.778,382.078,124.778z"/>
15 | 			<path d="M229.249,392.323c8.284,0,15-6.716,15-15V203.618c0-8.284-6.715-15-15-15c-8.284,0-15,6.716-15,15v173.705
16 | 				C214.249,385.607,220.965,392.323,229.249,392.323z"/>
17 | 			<path d="M306.671,392.323c8.284,0,15-6.716,15-15V203.618c0-8.284-6.716-15-15-15s-15,6.716-15,15v173.705
18 | 				C291.671,385.607,298.387,392.323,306.671,392.323z"/>
19 | 			<path d="M151.828,392.323c8.284,0,15-6.716,15-15V203.618c0-8.284-6.716-15-15-15c-8.284,0-15,6.716-15,15v173.705
20 | 				C136.828,385.607,143.544,392.323,151.828,392.323z"/>
21 | 		</g>
22 | 	</g>
23 | </g>
24 | <g>
25 | </g>
26 | <g>
27 | </g>
28 | <g>
29 | </g>
30 | <g>
31 | </g>
32 | <g>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | <g>
39 | </g>
40 | <g>
41 | </g>
42 | <g>
43 | </g>
44 | <g>
45 | </g>
46 | <g>
47 | </g>
48 | <g>
49 | </g>
50 | <g>
51 | </g>
52 | <g>
53 | </g>
54 | </svg>
55 | 


--------------------------------------------------------------------------------
/upload_form/static/upload_form/icons/upload-svgrepo-com.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 296.999 296.999" style="enable-background:new 0 0 296.999 296.999;" xml:space="preserve">
 5 | <g>
 6 | 	<g>
 7 | 		<path d="M222.312,58.625c-4.286,0-8.566,0.371-12.793,1.107c-15.427-23.63-41.682-38.013-70.246-38.013
 8 | 			c-35.722,0-67.176,22.489-79.004,55.563C26.591,79.937,0,108.191,0,142.539c0,36.096,29.366,65.462,65.461,65.462h39.6v57.177
 9 | 			c0,5.579,4.523,10.102,10.102,10.102h66.673c5.579,0,10.102-4.523,10.102-10.102v-57.177h30.373
10 | 			c41.184,0,74.688-33.504,74.688-74.688S263.496,58.625,222.312,58.625z M181.838,155.066c-5.58,0-10.103,4.524-10.103,10.102
11 | 			v89.908h-46.469v-89.908c0-5.579-4.523-10.102-10.102-10.102h-8.948l42.285-42.285l42.285,42.285H181.838z M222.312,187.797
12 | 			h-30.373V175.27h23.235c4.086,0,7.77-2.461,9.334-6.236c1.563-3.775,0.698-8.12-2.19-11.01l-66.673-66.673
13 | 			c-3.946-3.944-10.341-3.944-14.287,0l-66.673,66.673c-2.889,2.89-3.753,7.234-2.19,11.01c1.564,3.774,5.247,6.236,9.334,6.236
14 | 			h23.235v12.527h-39.6c-24.955,0-45.257-20.303-45.257-45.258s20.302-45.257,45.257-45.257c0.636,0,1.267,0.024,1.898,0.049
15 | 			c4.78,0.217,9.014-2.965,10.2-7.583c7.222-28.158,32.601-47.825,61.714-47.825c23.685,0,45.282,13.032,56.364,34.011
16 | 			c2.23,4.222,7.11,6.303,11.702,4.997c4.889-1.395,9.926-2.101,14.973-2.101c30.043,0,54.484,24.441,54.484,54.484
17 | 			C276.799,163.357,252.355,187.797,222.312,187.797z"/>
18 | 	</g>
19 | </g>
20 | <g>
21 | </g>
22 | <g>
23 | </g>
24 | <g>
25 | </g>
26 | <g>
27 | </g>
28 | <g>
29 | </g>
30 | <g>
31 | </g>
32 | <g>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | <g>
39 | </g>
40 | <g>
41 | </g>
42 | <g>
43 | </g>
44 | <g>
45 | </g>
46 | <g>
47 | </g>
48 | <g>
49 | </g>
50 | </svg>
51 | 


--------------------------------------------------------------------------------
/upload_form/static/upload_form/upload_form.css:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | .uploadform_drop_area {
  4 |     border: 2px dashed #ccc;
  5 |     border-radius: 20px;
  6 |     font-family: sans-serif;
  7 |     margin: 0 auto;
  8 |     padding: 20px;
  9 |     text-align: center;
 10 | }
 11 | 
 12 | .uploadform_drop_area.highlight {
 13 |     border-color: #69f;
 14 |     background-color: #666;
 15 | }
 16 | 
 17 | 
 18 | .uploadform_drop_area .file_list_input label {
 19 |     width: 60%;
 20 |     padding: 10px;
 21 |     font-size: 1.8em;
 22 |     text-overflow: ellipsis;
 23 |     /*white-space: nowrap;*/
 24 |     cursor: pointer;
 25 |     display: inline-block;
 26 |     overflow: hidden;
 27 |     color: #444;
 28 |     background-color: #999;
 29 |     border-radius: 20px;
 30 | }
 31 | 
 32 | .uploadform_drop_area label p {
 33 |     text-align: center;
 34 | }
 35 | 
 36 | .uploadform_drop_area label img {
 37 |     text-align: center;
 38 |     height: 60px;
 39 |     width: 100%;
 40 |     color: #444 !important;
 41 | }
 42 | 
 43 | .uploadform_drop_area .file_list_wrapper table {
 44 |     margin: 0 auto;
 45 |     width: 80%;
 46 |     color: #999;
 47 |     border: 1px solid #999;
 48 | }
 49 | 
 50 | .uploadform_drop_area .file_list_wrapper table th,
 51 | .uploadform_drop_area .file_list_wrapper table td {
 52 |     border: 1px solid #999;
 53 |     padding: 0 4px;
 54 | }
 55 | 
 56 | .uploadform_drop_area .file_list_wrapper table th {
 57 |     text-align: center;
 58 |     font-weight: bold;
 59 |     font-style: italic;
 60 | }
 61 | 
 62 | .uploadform_drop_area .file_list_wrapper td.delete {
 63 |     text-align: center;
 64 | }
 65 | 
 66 | .uploadform_drop_area .file_list_wrapper button img.icon {
 67 |     height: 20px;
 68 | }
 69 | 
 70 | .uploadform_drop_area .errorlist {
 71 |     list-style: dash;
 72 | }
 73 | 
 74 | .uploadform_drop_area .errorlist li {
 75 |     padding: 0;
 76 |     margin: 0;
 77 |     text-align: left;
 78 | }
 79 | 
 80 | .uploadform_drop_area .submit button {
 81 |     margin: 10px 0;
 82 | }
 83 | 
 84 | .uploadform_drop_area .uploadform_file_list img.icon {
 85 |     height: 12px;
 86 |     /*width: 100%;*/
 87 | }
 88 | 
 89 | .uploadform_drop_area .file_list_wrapper .progress {
 90 |     margin-bottom: 10px;
 91 | }
 92 | 
 93 | .uploadform_drop_area .extra_fields {
 94 |     margin-bottom: 10px;
 95 | }
 96 | 
 97 | .uploadform_drop_area .extra_fields .form-row.errors {
 98 |     border: 1px solid red;
 99 | }
100 | 
101 | 


--------------------------------------------------------------------------------
/upload_form/static/upload_form/upload_form.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | $(document).ready(function($) {
  4 |     UploadForm.initialize($('.uploadform_drop_area'));
  5 | });
  6 | 
  7 | /*
  8 | TODO: Use HTML5 to resize an image before upload
  9 | 
 10 | https://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload
 11 | */
 12 | 
 13 | // Today we feel zealous enough to use the Module Pattern ;)
 14 | window.UploadForm = (function() {
 15 | 
 16 |     function initialize(dropArea) {
 17 |         //UploadFormFileList.initialize('.uploadform_drop_area .file_list_wrapper');
 18 |         //var dropArea = $('.uploadform_drop_area');
 19 |         UploadFormFileList.initialize(dropArea.find('.file_list_wrapper'));
 20 |         dropArea.on('dragenter dragover', function(event) {
 21 |             event.preventDefault();
 22 |             dropArea.addClass('highlight');
 23 |         });
 24 |         dropArea.on('dragleave', function(event) {
 25 |             event.preventDefault();
 26 |             dropArea.removeClass('highlight');
 27 |         });
 28 |         dropArea.on('drop', onDropAreaDrop);
 29 |         dropArea.find('form').on('submit', onFormSubmit);
 30 |     }
 31 | 
 32 |     function onDropAreaDrop(event) {
 33 | 
 34 |         event.preventDefault();
 35 |         var target = $(event.target);
 36 |         var dropArea = target.closest('.uploadform_drop_area');
 37 | 
 38 |         dropArea.removeClass('highlight');
 39 |         //var files = event.dataTransfer.files;
 40 |         //event.originalEvent.dataTransfer.dropEffect = 'copy';
 41 |         var files = event.originalEvent.dataTransfer.files;
 42 |         dropArea.find('form input[type="file"]').prop('files', files);
 43 |         handleFiles(files);
 44 |     }
 45 | 
 46 |     function handleFiles(files) {
 47 |         // Append new files to fileList
 48 |         $(files).each(function(index, file) {
 49 |             UploadFormFileList.add(file);
 50 |         });
 51 | 
 52 |         // Update UI
 53 |         UploadFormFileList.refreshUI();
 54 |     }
 55 | 
 56 |     function getCookie(name) {
 57 |         var value = '; ' + document.cookie;
 58 |         var parts = value.split('; ' + name + '=');
 59 |         if (parts.length == 2) return parts.pop().split(';').shift();
 60 |     }
 61 | 
 62 |     function onFormSubmit(event)
 63 |     {
 64 |         event.preventDefault();
 65 | 
 66 |         var target = $(event.target);
 67 |         var dropArea = target.closest('.uploadform_drop_area');
 68 |         //var dropArea = $('.uploadform_drop_area');
 69 |         var form = $(dropArea.find('form'));
 70 | 
 71 |         dropArea.find('.progress').show();
 72 |         var progressBar = dropArea.find('.progress-bar');
 73 |         var url = form.attr('action');
 74 | 
 75 |         var filelist = UploadFormFileList.get_filelist();
 76 | 
 77 |         // if (UPLOAD_FORM_PARALLEL_UPLOAD) {
 78 |         //     $(filelist).each(function(index, file) {
 79 |         //         sendSingleFile(dropArea, file, url);
 80 |         //     });
 81 |         // }
 82 |         // else {
 83 |         //     sendMultipleFiles(dropArea, filelist, url, progressBar);
 84 |         // }
 85 | 
 86 |         if (UPLOAD_FORM_PARALLEL_UPLOAD) {
 87 |             // EXPERIMENTAL
 88 |             // wait for multiple AJAX requests to finish [duplicate]
 89 |             // see: https://stackoverflow.com/questions/6538470/jquery-deferred-waiting-for-multiple-ajax-requests-to-finish
 90 |             var promises = [];
 91 |             $(filelist).each(function(index, file) {
 92 |                 var data = new FormData();
 93 |                 //data.append('title', 'ciao');
 94 |                 data.set('files', file);
 95 |                 promises.push(sendFormData(data, url, null));
 96 |             });
 97 |             $.when.apply($, promises)
 98 |                 .done(function(data) {
 99 |                     onSendFormDataDone(dropArea, data)
100 |                 })
101 |                 .fail(onSendFormDataFail);
102 |         }
103 |         else {
104 |             var data = new FormData();
105 | 
106 |             var inputs = form.serializeArray();
107 |             $.each(inputs, function (i, input) {
108 |                 data.append(input.name, input.value);
109 |             });
110 |             //data.append('title', 'ciao');
111 | 
112 |             if (MAX_IMAGE_SIZE <= 0 ) {
113 |                 $(filelist).each(function(index, file) {
114 |                     data.append('files', file);
115 |                 });
116 |                 var promise = sendFormData(data, url, progressBar);
117 |                 promise
118 |                     .done(function(data) {
119 |                         onSendFormDataDone(dropArea, data)
120 |                     })
121 |                     .fail(onSendFormDataFail);
122 |             }
123 |             else {
124 |                 var deferreds = [];
125 |                 $(filelist).each(function(index, file) {
126 |                     deferreds.push(
127 |                         UploadFormUtils.resize_image(file, MAX_IMAGE_SIZE)
128 |                     )
129 |                 });
130 | 
131 |                 // https://stackoverflow.com/questions/5627284/pass-in-an-array-of-deferreds-to-when
132 |                 $.when.apply($, deferreds).then(function() {
133 |                     var objects = arguments;
134 |                     $(objects).each(function(index, file) {
135 |                         // debugger
136 |                         // var file = new File([obj], "ciao.jpg");
137 |                         data.append('files', file);
138 |                     });
139 | 
140 |                     var promise = sendFormData(data, url, progressBar);
141 |                     promise
142 |                         .done(function(data) {
143 |                             onSendFormDataDone(dropArea, data)
144 |                         })
145 |                         .fail(onSendFormDataFail);
146 |                 });
147 |             }
148 |         }
149 |     }
150 | 
151 |     function sendFormData(data, url, progressBar) {
152 |         // console.log('data: %o', data);
153 |         // for (var pair of data.entries()) { console.log('%o: %o', pair[0], pair[1]); }
154 |         // debugger
155 | 
156 |         var promise = $.ajax({
157 |             type: "POST",
158 |             url: url,
159 |             data: data,
160 |             dataType: 'json',
161 |             processData: false,
162 |             contentType: false,
163 |             headers: {"X-CSRFToken": getCookie('csrftoken')},
164 |             xhr: function() {
165 |                 var xhr = $.ajaxSettings.xhr();
166 |                 xhr.upload.onprogress = function(e) {
167 |                     //console.log(Math.floor(e.loaded / e.total *100) + '%');
168 |                     if (progressBar !== null) {
169 |                         //var progress = sprintf("%d%%", Math.floor(e.loaded / e.total *100));
170 |                         var progress = Math.floor(e.loaded / e.total *100) + '%';
171 |                         progressBar.css('width', progress);
172 |                         progressBar.text(progress);
173 |                     }
174 |                 };
175 |               return xhr;
176 |             }
177 |         });
178 |         return promise;
179 |     }
180 | 
181 |     function onSendFormDataDone(dropArea, data) {
182 |         var response = data;
183 |         if (Array.isArray(data)) {
184 |             response = data[0];
185 |         }
186 |         switch (response.action) {
187 |             case 'replace':
188 |                 dropArea.replaceWith(response.html);
189 |                 //initialize(dropArea);
190 |                 // TODO: TO BE REFACTORED
191 |                 initialize($('.uploadform_drop_area'));
192 |                 break;
193 |             case 'redirect':
194 |                 window.location.replace(response.url);
195 |                 break;
196 |         }
197 |     }
198 | 
199 |     function onSendFormDataFail(jqXHR, textStatus) {
200 |         console.log('ERROR: %o', jqXHR);
201 |         alert('ERROR: ' + jqXHR.statusText);
202 |         window.location.replace(url);
203 |     }
204 | 
205 |     // function sendSingleFile(dropArea, file, url) {
206 | 
207 |     //     console.log('sending file "%o"', file);
208 |     //     var data = new FormData();
209 |     //     data.set('files', file);
210 | 
211 |     //     var promise = sendFormData(data, url, null);
212 | 
213 |     //     promise.done(function(data) {
214 |     //         switch (data.action) {
215 |     //             case 'replace':
216 |     //                 //initialize(dropArea);
217 |     //                 // TODO: TO BE REFACTORED
218 |     //                 initialize($('.uploadform_drop_area'));
219 |     //                 break;
220 |     //             case 'redirect':
221 |     //                 //window.location.replace(data.url);
222 |     //                 console.log('done');
223 |     //                 break;
224 |     //         }
225 |     //     }).fail(function(jqXHR, textStatus) {
226 |     //         console.log('ERROR: %o', jqXHR);
227 |     //         alert('ERROR: ' + jqXHR.statusText);
228 |     //         window.location.replace(url);
229 |     //     });
230 |     // }
231 | 
232 |     // function sendMultipleFiles(dropArea, filelist, url, progressBar) {
233 | 
234 |     //     // Retrieve files from form:
235 |     //     //var data = new FormData(form.get(0));
236 | 
237 |     //     console.log('sending files "%o"', filelist);
238 | 
239 |     //     // Retrieve files from fileList;
240 |     //     // As with regular form data, you can append multiple values with the same name.
241 |     //     var data = new FormData();
242 |     //     $(filelist).each(function(index, file) {
243 |     //         data.append('files', file);
244 |     //         //data.append('title', 'ciao');
245 |     //     });
246 | 
247 |     //     var promise = sendFormData(data, url, progressBar);
248 | 
249 |     //     promise.done(function(data) {
250 |     //         switch (data.action) {
251 |     //             case 'replace':
252 |     //                 dropArea.replaceWith(data.html);
253 |     //                 //initialize(dropArea);
254 |     //                 // TODO: TO BE REFACTORED
255 |     //                 initialize($('.uploadform_drop_area'));
256 |     //                 break;
257 |     //             case 'redirect':
258 |     //                 window.location.replace(data.url);
259 |     //                 break;
260 |     //         }
261 |     //     }).fail(function(jqXHR, textStatus) {
262 |     //         console.log('ERROR: %o', jqXHR);
263 |     //         alert('ERROR: ' + jqXHR.statusText);
264 |     //         window.location.replace(url);
265 |     //     });
266 |     // }
267 | 
268 |     return {
269 |         initialize: initialize,
270 |         handleFiles: handleFiles
271 |     };
272 | 
273 | })();
274 | 


--------------------------------------------------------------------------------
/upload_form/static/upload_form/utils.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | window.UploadFormUtils = (function() {
  4 | 
  5 |     /* Utility function to convert a canvas to a BLOB */
  6 |     var dataURLToBlob = function(dataURL) {
  7 |         var BASE64_MARKER = ';base64,';
  8 |         if (dataURL.indexOf(BASE64_MARKER) == -1) {
  9 |             var parts = dataURL.split(',');
 10 |             var contentType = parts[0].split(':')[1];
 11 |             var raw = parts[1];
 12 | 
 13 |             return new Blob([raw], {type: contentType});
 14 |         }
 15 | 
 16 |         var parts = dataURL.split(BASE64_MARKER);
 17 |         var contentType = parts[0].split(':')[1];
 18 |         var raw = window.atob(parts[1]);
 19 |         var rawLength = raw.length;
 20 | 
 21 |         var uInt8Array = new Uint8Array(rawLength);
 22 | 
 23 |         for (var i = 0; i < rawLength; ++i) {
 24 |             uInt8Array[i] = raw.charCodeAt(i);
 25 |         }
 26 | 
 27 |         return new Blob([uInt8Array], {type: contentType});
 28 |     }
 29 | 
 30 |     // https://stackoverflow.com/questions/23150333/html5-javascript-dataurl-to-blob-blob-to-dataurl
 31 |     function blobToDataURL(blob, callback) {
 32 |         var a = new FileReader();
 33 |         a.onload = function(e) {callback(e.target.result);}
 34 |         a.readAsDataURL(blob);
 35 |     }
 36 | 
 37 |     /**
 38 |      * Resizes specified image to max_size.
 39 |      *
 40 |      * @param {file_or_blob} - a blob of file object containing the image to be resized
 41 |      * @param {max_size} - max size of the desired image
 42 |      *
 43 |      * @returns {promise} - an async value that, when resolved, will receive the resulting
 44 |      *                      eventully resized image
 45 |      *
 46 |      * How if works:
 47 |      * - if the blob received is not an image,
 48 |      *       or the source image is already smaller than max_size,
 49 |      *       the original object will be returned (unchanged)
 50 |      * - if the source blob is a File, a resized File will be returned
 51 |      * - if the source blob is just a Blob, the dataURL of the resized image will be returned
 52 |      *
 53 |      * Note that:
 54 |      * - if the source object is a File, you will always receive a File (either unchanged or resized)
 55 |      * - if the source object is just a Blob, you wil reeceive either the unchanged Blob or a dataURL
 56 |      *
 57 |      */
 58 | 
 59 |     function resize_image(file_or_blob, max_size) {
 60 | 
 61 |         // Adapted from:
 62 |         // "Use HTML5 to resize an image before upload"
 63 |         // https://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload#24015367
 64 |         function _resize_image_inner() {
 65 | 
 66 |             // Load the image
 67 |             var reader = new FileReader();
 68 |             reader.onload = function(readerEvent) {
 69 |                 var image = new Image();
 70 |                 image.onload = function(imageEvent) {
 71 | 
 72 |                     // Calculate target width and height
 73 |                     var width = image.width;
 74 |                     var height = image.height;
 75 |                     var need_resize = false;
 76 |                     if (width <= 0 || height <=0) {
 77 |                         need_resize = false;
 78 |                     }
 79 |                     else {
 80 |                         if (width > height) {
 81 |                             if (width > _maxSize) {
 82 |                                 height *= _maxSize / width;
 83 |                                 width = _maxSize;
 84 |                                 need_resize = true;
 85 |                             }
 86 |                         } else {
 87 |                             if (height > _maxSize) {
 88 |                                 width *= _maxSize / height;
 89 |                                 height = _maxSize;
 90 |                                 need_resize = true;
 91 |                             }
 92 |                         }
 93 |                     }
 94 | 
 95 |                     // Either resize the image ...
 96 |                     var canvas = document.createElement('canvas');
 97 |                     if (need_resize) {
 98 |                         console.log("resize_image(%d): Resizing %o from %dx%d to %dx%d", _maxSize, (_blob instanceof File) ? _blob.name : "blob", image.width, image.height, width, height);
 99 |                         canvas.width = width;
100 |                         canvas.height = height;
101 |                         canvas.getContext('2d').drawImage(image, 0, 0, width, height);
102 |                         var dataUrl = canvas.toDataURL('image/jpeg');
103 | 
104 |                         if (_blob instanceof File) {
105 |                             var resizedImage = dataURLToBlob(dataUrl);
106 |                             var file = new File([resizedImage], _blob.name);
107 |                             _promise.resolve(file);
108 |                         }
109 |                         else {
110 |                             _promise.resolve(dataUrl);
111 |                         }
112 |                     }
113 |                     else {
114 |                         // ... or return blob unchanged
115 |                         console.log("resize_image(%d): No resize needed for %o (%dx%d)", _maxSize, (_blob instanceof File) ? _blob.name : "blob", image.width, image.height);
116 |                         _promise.resolve(_blob);
117 |                     }
118 |                     // $.event.trigger({
119 |                     //     type: "imageResized",
120 |                     //     blob: resizedImage,
121 |                     //     url: dataUrl
122 |                     // });
123 |                 }
124 |                 image.src = readerEvent.target.result;
125 |             }
126 | 
127 |             reader.readAsDataURL(_blob);
128 |         }
129 | 
130 | 
131 |         var _promise = $.Deferred();
132 |         var _blob = file_or_blob;
133 |         var _maxSize = max_size;
134 | 
135 |         if (_blob instanceof Blob) {
136 |             if (_blob.type.match(/image.*/)) {
137 |                 _resize_image_inner();
138 |             }
139 |             else {
140 |                 _promise.resolve(_blob);
141 |             }
142 |         }
143 |         else {
144 |             _promise.reject('Unable to resize unknown object');
145 |         }
146 | 
147 |         return _promise;
148 |     }
149 | 
150 |     return {
151 |         dataURLToBlob: dataURLToBlob,
152 |         blobToDataURL: blobToDataURL,
153 |         resize_image: resize_image
154 |     };
155 | 
156 | })();
157 | 


--------------------------------------------------------------------------------
/upload_form/templates/upload_form/test.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | {% load static %}
 3 | 
 4 | 
 5 | {% block extrastyle %}
 6 |     {{block.super}}
 7 |     {% comment %}
 8 |     <link rel="stylesheet" href="{% static 'upload_form/upload_form.css' %}" type="text/css" charset="utf-8" />
 9 |     {% endcomment %}
10 | {% endblock %}
11 | 
12 | 
13 | {% block extrajs %}
14 |     {{block.super}}
15 |     {{form.media}}
16 |     {% comment %}
17 |     <script src="{% static 'upload_form.js' %}"></script>
18 |     {% endcomment %}
19 | {% endblock %}
20 | 
21 | 
22 | {% block content %}
23 | 
24 |     <div class="container">
25 |         <div class="row">
26 |             <div id="upload-box" class="text-center col-md-6 col-md-offset-3" style="">
27 | 
28 |                 {{ form_as_html }}
29 | 
30 |             </div>
31 |         </div>
32 |     </div>
33 | 
34 | {% endblock content %}
35 | 


--------------------------------------------------------------------------------
/upload_form/templates/upload_form/upload_form.html:
--------------------------------------------------------------------------------
 1 | {% load i18n static %}
 2 | 
 3 | <div class="uploadform_drop_area">
 4 | 
 5 |     <script type="text/javascript">
 6 |         var UPLOAD_FORM_PARALLEL_UPLOAD = {{UPLOAD_FORM_PARALLEL_UPLOAD|lower}};
 7 |         var MAX_IMAGE_SIZE = {{max_image_size}};
 8 |     </script>
 9 | 
10 |     <form method="post" enctype="multipart/form-data" action="{{ action }}" class="uploadform_form" novalidate>
11 |         {% csrf_token %}
12 | 
13 | 
14 |         {% if file_errors %}
15 |         <div class="alert alert-danger">
16 |             <strong>{% trans 'Please correct the errors below' %}</strong>
17 |             <ul class="errorlist">
18 |                 {% for error in file_errors %}
19 |                     <li>{{ error }}</li>
20 |                 {% endfor %}
21 |             </ul>
22 |         </div>
23 |         {% endif %}
24 | 
25 |         {% if form.fields|length %}
26 |         <div class="extra_fields">
27 |             {% for field in form %}
28 |                 <div class="form-row{% if field.errors %} errors{% endif %} field-{{ field.html_name }}">
29 |                     {{ field.label_tag }} {{ field }}
30 |                     {% if field.help_text %}
31 |                     <p class="help">{{ field.help_text|safe }}</p>
32 |                     {% endif %}
33 |                     {{ field.errors }}
34 |                 </div>
35 |             {% endfor %}
36 |         </div>
37 |         {% endif %}
38 | 
39 |         <div class="file_list_input">
40 |             <p>{% trans 'Select multiple files with the file dialog or by dragging and dropping them onto the dashed region' %}</p>
41 | 
42 |             <label class="button">
43 |                 <input style="display: none;" type="file" name="files[]" accept="{{accept}}" multiple onchange="UploadForm.handleFiles(this.files)">
44 |                 <img src="{% static 'upload_form/icons/cloud-upload-svgrepo-com.svg' %}" alt="{% trans 'upload' %}">
45 |                 <p>
46 |                     {% trans 'Select some files' %}
47 |                 </p>
48 |             </label>
49 |         </div>
50 | 
51 |         <div class="file_list_wrapper" style="display: none;">
52 |             <div class="submit">
53 |                 <div>
54 |                     {% trans 'Press the button below to proceed with files upload' %}
55 |                 </div>
56 |                 <button type="submit" class="btn btn-success btn-lg">
57 |                     <img src="/static/upload_form/icons/cloud-upload-svgrepo-com.svg" class="icon">&nbsp;&nbsp;{% trans 'Send' %}
58 |                 </button>
59 |             </div>
60 |             <div class="progress" style="display: none;">
61 |                 <div class="progress-bar progress-bar-success progress-bar-striped active"
62 |                     role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
63 |                 </div>
64 |             </div>
65 |             <table class="uploadform_file_list">
66 |                 <thead>
67 |                     <tr>
68 |                         <th>{% trans 'type' %}</th>
69 |                         <th>{% trans 'name' %}</th>
70 |                         <th>{% trans 'size' %}</th>
71 |                         <th>
72 |                             <a href="#" class="uploadform_remove_all_files" title="remove all">
73 |                                 <img src="/static/upload_form/icons/trash-svgrepo-com.svg" class="icon">
74 |                             </a>
75 |                         </th>
76 |                     </tr>
77 |                 </thead>
78 |                 <tbody>
79 |                 </tbody>
80 |             </table>
81 |         </div>
82 | 
83 |     </form>
84 | 
85 | </div>
86 | 


--------------------------------------------------------------------------------
/upload_form/urls.py:
--------------------------------------------------------------------------------
 1 | from django.conf.urls import url
 2 | from upload_form import views
 3 | 
 4 | 
 5 | app_name = 'upload_form'
 6 | 
 7 | urlpatterns = [
 8 |     url('test/', views.test, name="test"),
 9 | ]
10 | 


--------------------------------------------------------------------------------
/upload_form/views.py:
--------------------------------------------------------------------------------
 1 | from django.shortcuts import render
 2 | try:
 3 |     from django.urls import reverse
 4 | except ModuleNotFoundError as e:
 5 |     # for Django < v1.10
 6 |     from django.core.urlresolvers import reverse
 7 | from django.http import JsonResponse
 8 | from .forms import UploadForm
 9 | 
10 | 
11 | # TODO: Check this:
12 | # "When and how to use Django FormView"
13 | # https://www.agiliq.com/blog/2019/01/django-formview/
14 | 
15 | # See also:
16 | # https://stackoverflow.com/questions/8059160/django-apps-using-class-based-views-and-ajax#44441796
17 | 
18 | class TestUploadForm(UploadForm):
19 | 
20 |     def form_valid(self, request):
21 |         print("*")
22 |         print("* TestUploadForm.form_valid() ...")
23 |         print("* Here, we just log the list of received files;")
24 |         print("* What you do with these files in a real project is entirely up to you.")
25 |         print("*")
26 |         self.dump()
27 |         return self.get_success_url(request)
28 | 
29 |     def get_success_url(self, request=None):
30 |         return '/'
31 | 
32 |     def get_action(self, request=None):
33 |         return reverse('upload_form:test')
34 | 
35 | 
36 | def test(request):
37 | 
38 |     if request.method == 'GET':
39 |         form = TestUploadForm()
40 |     else:
41 |         form = TestUploadForm(request.POST, request.FILES)
42 |         if form.is_valid():
43 |             url = form.form_valid(request)
44 |             return JsonResponse({'action': 'redirect', 'url': url, })
45 |         else:
46 |             return JsonResponse({'action': 'replace', 'html': form.as_html(request), })
47 | 
48 |     return render(
49 |         request,
50 |         'upload_form/test.html', {
51 |             'form': form,
52 |             'form_as_html': form.as_html(request),
53 |         }
54 |     )
55 | 


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