allow uploading larger files

assets/js/image_expansion.js

@@ -12,7 +12,7 @@ const imageVersions = {
  * Picks the appropriate image version for a given width and height
  * of the viewport and the image dimensions.
  */
-function selectVersion(imageWidth, imageHeight) {
+function selectVersion(imageWidth, imageHeight, imageSize, imageMime) {
   let viewWidth = document.documentElement.clientWidth,
       viewHeight = document.documentElement.clientHeight;
 
@@ -39,8 +39,17 @@ function selectVersion(imageWidth, imageHeight) {
     }
   }
 
-  // If the view is larger than any available version, display the original image
+  // If the view is larger than any available version, display the original image.
+  //
+  // Sanity check to make sure we're not serving unintentionally huge assets
+  // all at once (where "huge" > 25 MiB). Videos are loaded in chunks so it
+  // doesn't matter too much there.
+  if (imageMime === 'video/webm' || imageSize <= 26214400) {
     return 'full';
+  }
+  else {
+    return 'large';
+  }
 }
 
 /**
@@ -48,14 +57,17 @@ function selectVersion(imageWidth, imageHeight) {
  * to an appropriate dimension.
  */
 function pickAndResize(elem) {
-  const imageWidth = parseInt(elem.getAttribute('data-width'), 10),
+  const imageWidth = parseInt(elem.dataset.width, 10),
-        imageHeight = parseInt(elem.getAttribute('data-height'), 10),
+        imageHeight = parseInt(elem.dataset.height, 10),
-        scaled = elem.getAttribute('data-scaled'),
+        imageSize = parseInt(elem.dataset.imageSize, 10),
-        uris = JSON.parse(elem.getAttribute('data-uris'));
+        imageMime = elem.dataset.mimeType,
+        scaled = elem.dataset.scaled,
+        uris = JSON.parse(elem.dataset.uris);
+
   let version = 'full';
 
   if (scaled === 'true') {
-    version = selectVersion(imageWidth, imageHeight);
+    version = selectVersion(imageWidth, imageHeight, imageSize, imageMime);
   }
 
   const uri = uris[version];

docker/web/nginx.conf

@@ -8,7 +8,7 @@ server {
 
 	root $APP_DIR/priv/static;
 
-	client_max_body_size       30M;
+	client_max_body_size       100M;
 	client_body_buffer_size    128k;
 
 	location ~ ^/img/view/(.+)/([0-9]+).*\.([A-Za-z0-9]+)$ {

lib/philomena/images/image.ex

@@ -150,7 +150,7 @@ defmodule Philomena.Images.Image do
       :uploaded_image,
       :image_is_animated
     ])
-    |> validate_number(:image_size, greater_than: 0, less_than_or_equal_to: 26_214_400)
+    |> validate_number(:image_size, greater_than: 0, less_than_or_equal_to: 100_000_000)
     |> validate_number(:image_width, greater_than: 0, less_than_or_equal_to: 32767)
     |> validate_number(:image_height, greater_than: 0, less_than_or_equal_to: 32767)
     |> validate_length(:image_name, max: 255, count: :bytes)

lib/philomena_web/endpoint.ex

@@ -28,7 +28,7 @@ defmodule PhilomenaWeb.Endpoint do
   plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint]
 
   plug Plug.Parsers,
-    parsers: [:urlencoded, {:multipart, length: 30_000_000}, :json],
+    parsers: [:urlencoded, {:multipart, length: 100_000_000}, :json],
     pass: ["*/*"],
     json_decoder: Phoenix.json_library()
 

lib/philomena_web/templates/image/_image_meta.html.slime

@@ -62,10 +62,10 @@
       | x
       = @image.image_height
       =<> String.upcase(to_string(@image.image_format))
-      - size_kb = div(@image.image_size, 1024)
+      - size_kb = div(@image.image_size, 1000)
-      - size_mb = Float.round(size_kb / 1024.0, 2)
+      - size_mb = Float.round(size_kb / 1000.0, 2)
       span title="#{size_kb} kB"
-        = if size_kb <= 1024 do
+        = if size_kb <= 1000 do
           => size_kb
           | kB
         - else

lib/philomena_web/views/image_view.ex

@@ -128,6 +128,8 @@ defmodule PhilomenaWeb.ImageView do
       image_id: image.id,
       image_tags: Jason.encode!(Enum.map(image.tags, & &1.id)),
       image_tag_aliases: image.tag_list_plus_alias_cache,
+      image_size: image.image_size,
+      mime_type: image.image_mime_type,
       score: image.score,
       faves: image.faves_count,
       upvotes: image.upvotes_count,