Fixing & optimizing image gallery

server/src/uds/REST/methods/images.py

@@ -61,7 +61,7 @@ class Images(ModelHandler):
     ]
 
     def beforeSave(self, fields):
-        fields['data'] = Image.decode64(fields['data'])
+        fields['data'] = Image.prepareForDb(Image.decode64(fields['data']))
 
     def afterSave(self, item):
         # Updates the thumbnail and re-saves it
@@ -91,7 +91,7 @@ class Images(ModelHandler):
     def item_as_dict_overview(self, item):
         return {
             'id': item.uuid,
-            'size': '{} px x {} px'.format(item.width, item.height),
+            'size': '{}x{}, {} bytes'.format(item.width, item.height, len(item.data)),
             'name': item.name,
             'thumb': item.thumb64,
         }

server/src/uds/models/Image.py

@@ -79,6 +79,20 @@ class Image(UUIDModel):
     def decode64(data64):
         return base64.decodestring(data64)
 
+    @staticmethod
+    def prepareForDb(data):
+        try:
+            stream = io.BytesIO(data)
+            image = PILImage.open(stream)
+        except Exception:  # Image data is incorrect, fix as a simple transparent image
+            image = PILImage.new('RGBA', (128, 128))
+
+        # Max image size, keeping aspect and using antialias
+        image.thumbnail(Image.MAX_IMAGE_SIZE, PILImage.ANTIALIAS)
+        output = io.BytesIO()
+        image.save(output, 'png')
+        return output.getvalue()
+
     @property
     def data64(self):
         '''
@@ -116,7 +130,7 @@ class Image(UUIDModel):
             data = io.BytesIO(self.data)
             return PILImage.open(data)
         except Exception:  # Image data is incorrect, fix as a simple transparent image
-            return PILImage.new('RGBA', (128, 128))
+            return PILImage.new('RGBA', Image.MAX_IMAGE_SIZE)
 
     @property
     def size(self):
@@ -127,20 +141,14 @@ class Image(UUIDModel):
 
     def updateThumbnail(self):
         thumb = self.image
+        self.width, self.height = thumb.size
         thumb.thumbnail(Image.THUMBNAIL_SIZE, PILImage.ANTIALIAS)
         output = io.BytesIO()
         thumb.save(output, 'png')
         self.thumb = output.getvalue()
 
     def _processImageStore(self):
-        image = self.image
-        # Max image size, keeping aspect and using antialias
-        image.thumbnail(Image.MAX_IMAGE_SIZE, PILImage.ANTIALIAS)
-        output = io.BytesIO()
-        image.save(output, 'png')
-        self.data = output.getvalue()
-        self.width, self.height = image.size
-
+        self.data = Image.prepareForDb(self.data)
         self.updateThumbnail()
 
     def storeImageFromBinary(self, data):

server/src/uds/static/adm/js/gui-d-gallery.coffee

@@ -9,21 +9,29 @@ gui.gallery.link = ->
       modalId = gui.launchModal(gettext("New image"), content,
         actionButton: "<button type=\"button\" class=\"btn btn-success button-accept\">" + gettext("Upload") + "</button>"
       )
+      gui.tools.applyCustoms modalId
       $(modalId + " .button-accept").click ->
-        $(modalId).modal "hide"
         file = $('#id-image_for_gallery')[0].files[0]
+        name = $('#id_image_name').val()
+        if name == ""
+          name = file.name
+
+        if file.size > 256*1024
+          gui.notify gettext("Image is too big (max. upload size is 256Kb)")
+          return
+
+
+        $(modalId).modal "hide"
         reader = new FileReader()
 
         reader.onload = (res) ->
           img = res.target.result
           img = img.substr img.indexOf("base64,") + 7
           data = {
-            name: $('#id_image_name').val()
             data: img
+            name: name
           }
-          api.gallery.put data, {
-            success: refreshFnc
-          }
+          api.gallery.create data, refreshFnc
 
         reader.readAsDataURL(file)
 

server/src/uds/templates/uds/admin/tmpl/new_image.html

@@ -1,19 +1,26 @@
 {% load i18n html5 %}
 {% image_size as size %}
-<div class="center-block" style="width: {{ size.0|add:40 }}px">
+<h3 class="text-center">{% trans 'Select image to upload' %}</h3>
+<div class="center-block" style="width: 60%">
     <div class="form-group">
-        <label for="id_image_name">{% trans 'Image name' %}</label>
+        <label for="id_image_name" class="col-sm-3 control-label" data-toggle="tooltip" data-title="{% trans 'Name of the image. If left empty, will get the filename as name'%}">{% trans 'Image name' %}</label>
         <input id="id_image_name" name="image_name" type="text" class="form-control" placeholder="{% trans 'Image name' %}" autofocus required>
     </div>
-    <div class="fileinput fileinput-new" data-provides="fileinput">
-      <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: {{ size.0 }}px; height: {{ size.1 }}px;"></div>
-      <div>
-        <span class="btn btn-default btn-file">
-        <span class="fileinput-new">{% trans 'Select image' %}</span>
-        <span class="fileinput-exists">{% trans 'Change' %}</span>
-        <input type="file" name="image_for_gallery" id="id-image_for_gallery"></span>
-        <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">{% trans 'Remove' %}</a>
-      </div>
+    <div class="form-group">
+        <label class="col-sm-3 control-label" data-toggle="tooltip" data-title="{% trans 'Name of the image. If left empty, will get the filename as name'%}">{% trans 'Image name' %}</label>
+        <div class="fileinput fileinput-new" data-provides="fileinput">
+          <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: {{ size.0 }}px; height: {{ size.1 }}px;"></div>
+          <div>
+            <span class="btn btn-default btn-file">
+            <span class="fileinput-new">{% trans 'Select image' %}</span>
+            <span class="fileinput-exists">{% trans 'Change' %}</span>
+            <input type="file" name="image_for_gallery" id="id-image_for_gallery"></span>
+            <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">{% trans 'Remove' %}</a>
+          </div>
+        </div>
     </div>
 </div>
-<h3 class="text-center">{% trans 'Select image to upload' %} <small>{% trans 'accepts PNG, JPEG and GIF images' %}</small></h3>
+<p class="text-center">{% trans 'accepts PNG, JPEG and GIF images' %}.
+   {% trans 'Image will be resized to ' %}{{ size.0 }}x{{ size.1 }}.
+   {% trans 'Max file size for uploading is 256Kb' %}</P>
+</p>