show sizes of resources; warn if they're too big

To encourage authors to think about the size of their exam packages, the
question resources tab shows the size of each resource, the total size
of all resources, and shows a warning next to resources that are bigger
than 2MB.

Author: christianp

editor/models.py

@@ -937,12 +937,15 @@ def delete(self, *args, **kwargs):
         super(Resource, self).delete(*args, **kwargs)
 
     def as_json(self):
+        p = Path(self.file.path)
+        stat = p.stat()
         return {
             'url': self.resource_url,
             'name': self.filename,
             'pk': self.pk,
             'alt_text': self.alt_text,
-            'mtime': os.path.getmtime(self.file.path),
+            'mtime': stat.st_mtime,
+            'size': self.file.size,
         }
 
 class Licence(models.Model):

editor/static/js/editor.js

@@ -2084,6 +2084,19 @@ $(document).ready(function() {
         this.used = ko.observable(false);
     }
 
+    Editor.filesizeformat = function(n) {
+        const kilo = 1 << 10;
+        const sizes = ['bytes','KB','MB','GB'];
+        let t = 1;
+        for(let size of sizes) {
+            if(n < kilo) {
+                return `${n.toFixed(1)} ${size}`;
+            }
+            n /= kilo;
+        }
+        return `${n.toFixed(0)} ${sizes.at(-1)}`;
+    }
+
     var Resource = Editor.Resource = function(data) {
         this.progress = ko.observable(0);
         this.url = ko.observable('');
@@ -2104,6 +2117,11 @@ $(document).ready(function() {
         this.alt_text = ko.observable('');
 
         this.mtime = ko.observable('');
+        this.size = ko.observable(0);
+
+        this.too_big = ko.pureComputed(function() {
+            return this.size() > 2 * (1 << 20);
+        }, this);
 
         this.timestamped_url = ko.pureComputed(function() {
             return `${this.url()}?mtime=${this.mtime()}`;
@@ -2121,6 +2139,7 @@ $(document).ready(function() {
             this.pk(data.pk);
             this.alt_text(data.alt_text);
             this.mtime(data.mtime);
+            this.size(data.size);
             this.deleteURL = data.delete_url;
         },
 

editor/static/js/question/edit.js

@@ -61,6 +61,9 @@ $(document).ready(function() {
         Editor.EditorItem.apply(this);
 
         this.resources = ko.observableArray([]);
+        this.total_resource_size = ko.pureComputed(() => {
+            return this.resources().map(r => r.size()).reduce((a,b) => a+b,0);
+        });
         this.extensions = ko.observableArray([]);
         this.statement = Editor.contentObservable('');
         this.advice = Editor.contentObservable('');

editor/templates/question/tabs/resources.html

@@ -10,6 +10,9 @@
         <p><input id="fileupload" type="file" name="files[]"></p>
     </form>
     {% endif %}
+    <!-- ko if: resources().length > 0 -->
+    <p><strong>Total size of resources: </strong> <span data-bind="text: Editor.filesizeformat(total_resource_size())"></span></p>
+    <!-- /ko -->
     <ul class="media-list" data-bind="foreach: resources">
         <li class="media resource">
             {% if editable %}<button type="button" class="pull-left btn btn-lg btn-link text-warning delete" data-bind="click: $root.deleteResource" title="Delete this resource"><span class="glyphicon glyphicon-remove"></span></button>{% endif %}
@@ -35,6 +38,15 @@
                         <!-- ko if: filetype()=='img' -->
                         {% property 'alt_text' 'Text alternative' placeholder="'Describe this image for someone who can\'t see it'" id="'input-resource-alt_text-'+$index()" dynamic_id=True %}
                         <!-- /ko -->
+
+                        <p><strong>Size:</strong> <span data-bind="text: Editor.filesizeformat(size())"></span></p>
+
+                        <!-- ko if: too_big -->
+                        <div class="alert alert-warning">
+                            <p>This file is quite large. It will take a long time for students to download it.</p>
+                            <!-- ko if: filetype()=='img' --><p>Consider resizing this image to make it smaller.</p><!-- /ko -->
+                        </div>
+                        <!-- /ko -->
                     {% endwith %}
                 </form>
             </div>