upload screenshots as a blob instead of base64 to maps controller

app/controllers/maps_controller.rb

@@ -1,13 +1,10 @@
 # frozen_string_literal: true
 class MapsController < ApplicationController
-  before_action :require_user, only: [:create, :update, :destroy, :access, :events,
-                                      :screenshot]
+  before_action :require_user, only: [:create, :update, :destroy, :access, :events]
   before_action :set_map, only: [:show, :update, :destroy, :access, :contains,
-                                 :events, :export, :screenshot]
+                                 :events, :export]
   after_action :verify_authorized
 
-  autocomplete :map, :name, full: true, extra_data: [:user_id]
-
   # GET maps/:id
   def show
     respond_to do |format|
@@ -136,17 +133,6 @@ class MapsController < ApplicationController
     end
   end
 
-  # POST maps/:id/upload_screenshot
-  def screenshot
-    @map.base64_screenshot(params[:encoded_image])
-
-    if @map.save
-      render json: { message: 'Successfully uploaded the map screenshot.' }
-    else
-      render json: { message: 'Failed to upload image.' }
-    end
-  end
-
   private
 
   def set_map
@@ -159,7 +145,7 @@ class MapsController < ApplicationController
   end
 
   def update_map_params
-    params.require(:map).permit(:id, :name, :arranged, :desc, :permission)
+    params.require(:map).permit(:id, :name, :arranged, :desc, :permission, :screenshot)
   end
 
   def create_topics!

app/models/map.rb

@@ -95,21 +95,6 @@ class Map < ApplicationRecord
     json
   end
 
-  def decode_base64(imgBase64)
-    decoded_data = Base64.decode64(imgBase64)
-
-    data = StringIO.new(decoded_data)
-    data.class_eval do
-      attr_accessor :content_type, :original_filename
-    end
-
-    data.content_type = 'image/png'
-    data.original_filename = File.basename('map-' + id.to_s + '-screenshot.png')
-
-    self.screenshot = data
-    save
-  end
-
   # user param helps determine what records are visible
   def contains(user)
     {
@@ -144,14 +129,4 @@ class Map < ApplicationRecord
     end
     removed.compact
   end
-
-  def base64_screenshot(encoded_image)
-    png = Base64.decode64(encoded_image['data:image/png;base64,'.length..-1])
-    StringIO.open(png) do |data|
-      data.class.class_eval { attr_accessor :original_filename, :content_type }
-      data.original_filename = 'map-' + @map.id.to_s + '-screenshot.png'
-      data.content_type = 'image/png'
-      @map.screenshot = data
-    end
-  end
 end

app/policies/map_policy.rb

@@ -60,8 +60,4 @@ class MapPolicy < ApplicationPolicy
   def unstar?
     user.present?
   end
-
-  def screenshot?
-    update?
-  end
 end

config/routes.rb

@@ -19,7 +19,6 @@ Metamaps::Application.routes.draw do
       get :export
       post 'events/:event', action: :events
       get :contains
-      post :upload_screenshot, action: :screenshot
       post :access, default: { format: :json }
       post :star, to: 'stars#create', defaults: { format: :json }
       post :unstar, to: 'stars#destroy', defaults: { format: :json }

frontend/src/Metamaps/Map/index.js

@@ -1,5 +1,7 @@
 /* global Metamaps, $ */
 
+import outdent from 'outdent'
+
 import Active from '../Active'
 import AutoLayout from '../AutoLayout'
 import Create from '../Create'
@@ -323,9 +325,7 @@ const Map = {
       node.visited = !T
     })
 
-    var imageData = {
-      encoded_image: canvas.canvas.toDataURL()
-    }
+    var imageData = canvas.canvas.toDataURL()
 
     var map = Active.Map
 
@@ -341,24 +341,31 @@ const Map = {
     }
     today = mm + '/' + dd + '/' + yyyy
 
-    var mapName = map.get('name').split(' ').join([separator = '-'])
-    var downloadMessage = ''
-    downloadMessage += 'Captured map screenshot! '
-    downloadMessage += "<a href='" + imageData.encoded_image + "' "
-    downloadMessage += "download='metamap-" + map.id + '-' + mapName + '-' + today + ".png'>DOWNLOAD</a>"
+    var mapName = map.get('name').split(' ').join(['-'])
+    const filename = `metamap-${map.id}-${mapName}-${today}.png`
+
+    var downloadMessage = outdent`
+      Captured map screenshot!
+      <a href="${imageData.encodedImage}" download="${filename}">DOWNLOAD</a>`
     GlobalUI.notifyUser(downloadMessage)
 
-    $.ajax({
-      type: 'POST',
-      dataType: 'json',
-      url: '/maps/' + Active.Map.id + '/upload_screenshot',
-      data: imageData,
-      success: function (data) {
-        console.log('successfully uploaded map screenshot')
-      },
-      error: function () {
-        console.log('failed to save map screenshot')
-      }
+    canvas.canvas.toBlob(imageBlob => {
+      const formData = new window.FormData();
+      formData.append('map[screenshot]', imageBlob, filename)
+      $.ajax({
+        type: 'PATCH',
+        dataType: 'json',
+        url: `/maps/${map.id}`,
+        data: formData,
+        processData: false,
+        contentType: false,
+        success: function (data) {
+          console.log('successfully uploaded map screenshot')
+        },
+        error: function () {
+          console.log('failed to save map screenshot')
+        }
+      })
     })
   }
 }