Improve large image saving after editing [SCI-3289]

app/assets/javascripts/sitewide/file_preview.js

@@ -1,6 +1,6 @@
 /* eslint no-underscore-dangle: ["error", { "allowAfterThis": true }]*/
 /* eslint no-use-before-define: ["error", { "functions": false }]*/
-/* global fabric tui animateSpinner setupAssetsLoading I18n*/
+/* global Uint8Array fabric tui animateSpinner setupAssetsLoading I18n*/
 //= require assets
 
 var FilePreviewModal = (function() {
@@ -282,10 +282,30 @@ var FilePreviewModal = (function() {
     $('.tui-image-editor-header').hide();
 
     $('.file-save-link').off().click(function(ev) {
+      var imageBlob;
+      var imageDataURL;
+      var imageFormat;
       var dataUpload = new FormData();
+      var blobArray;
+      var bytePosition;
+
       ev.preventDefault();
       ev.stopPropagation();
-      dataUpload.append('image', imageEditor.toDataURL());
+
+      imageFormat = (data['mime-type'] === 'image/png') ? 'png' : 'jpeg';
+
+      imageDataURL = imageEditor.toDataURL({ format: imageFormat });
+      imageDataURL = atob(imageDataURL.split(',')[1]);
+
+      blobArray = new Uint8Array(imageDataURL.length);
+
+      for (bytePosition = 0; bytePosition < imageDataURL.length; bytePosition += 1) {
+        blobArray[bytePosition] = imageDataURL.charCodeAt(bytePosition);
+      }
+
+      imageBlob = new Blob([blobArray]);
+
+      dataUpload.append('image', imageBlob);
       animateSpinner(null, true);
       $.ajax({
         type: 'POST',

app/controllers/assets_controller.rb

@@ -63,6 +63,7 @@ class AssetsController < ApplicationController
     if @asset.is_image?
       response_json.merge!(
         'editable' =>  @asset.editable_image? && can_edit,
+        'mime-type' => @asset.file.content_type,
         'processing' => @asset.file.processing?,
         'large-preview-url' => @asset.url(:large),
         'processing-url' => image_tag('medium/processing.gif')
@@ -151,11 +152,10 @@ class AssetsController < ApplicationController
 
   def update_image
     @asset = Asset.find(params[:id])
+    orig_file_name = @asset.file_file_name
     return render_403 unless can_read_team?(@asset.team)
-    image_file = Paperclip.io_adapters.for(params[:image])
-    image_format = image_file.content_type.split('/')[1]
-    image_file.original_filename = @asset.file_file_name.ext(image_format)
-    @asset.file = image_file
+    @asset.file = params[:image]
+    @asset.file_file_name = orig_file_name
     @asset.save!
     # Post process file here
     @asset.post_process_file(@asset.team)

config/initializers/constants.rb

@@ -220,7 +220,7 @@ class Constants
   ].freeze
 
   WHITELISTED_IMAGE_TYPES_EDITABLE = %w(
-    gif jpeg pjpeg png
+    jpeg pjpeg png
   ).freeze
 
   WHITELISTED_TAGS = %w(