tessa 2.0 → 6.0.0.rc2

data/app/javascript/tessa/index.ts

@@ -0,0 +1,264 @@
+import type Dropzone from 'dropzone'
+import {FileChecksum} from '../activestorage/file_checksum'
+import type { ActiveStorageDirectUploadParams, ActiveStorageDirectUploadResponse } from './types'
+
+declare global {
+  interface Window {
+    WCC: any,
+    jQuery: typeof jQuery,
+    Dropzone: typeof Dropzone,
+  }
+}
+
+window.WCC ||= {}
+const $ = window.jQuery
+
+window.Dropzone.autoDiscover = false
+
+interface WCCDropzoneFile extends Dropzone.DropzoneFile {
+  uploadURL: string,
+  uploadMethod: string,
+  uploadHeaders: Record<string, string> | undefined,
+  signedID: string,
+}
+
+interface WCCDropzoneOptions extends Dropzone.DropzoneOptions {
+  directUploadURL: string,
+}
+
+const BaseDropzone = window.Dropzone
+class WCCDropzone extends BaseDropzone {
+  readonly options!: WCCDropzoneOptions
+
+  /**
+   * Performs a direct upload to the signed upload URL created in "accept".
+   * On complete, calls the Dropzone "success" callback.
+   */
+  uploadFile(file: WCCDropzoneFile): void {
+    const xhr = new XMLHttpRequest()
+    file.xhr = xhr
+
+    xhr.open(file.uploadMethod, file.uploadURL, true)
+    let response: any = null
+
+    const handleError = () => {
+      (this as any)._errorProcessing([file], response || this.options.dictResponseError?.replace("{{statusCode}}", xhr.status.toString()), xhr)
+    }
+
+    const updateProgress = (e?: any) => {
+      let progress: number
+      if (e) {
+        progress = 100 * e.loaded / e.total
+
+        file.upload = {
+          ...file.upload,
+          progress: progress,
+          total: e.total,
+          bytesSent: e.loaded
+        } as Dropzone.DropzoneFileUpload
+      } else {
+        // Called when the file finished uploading
+        progress = 100
+        let allFilesFinished = false
+        if (file.upload!.progress == 100 && file.upload!.bytesSent == file.upload!.total) {
+          allFilesFinished = true
+        }
+        file.upload!.progress = progress
+        file.upload!.bytesSent = file.upload?.total!
+
+        // Nothing to do, all files already at 100%
+        if (allFilesFinished) { return }
+      }
+
+      this.emit("uploadprogress", file, progress, file.upload!.bytesSent)
+    }
+
+    xhr.onload = (e) => {
+      if (file.status == WCCDropzone.CANCELED) { return }
+      if (xhr.readyState != 4) {return }
+
+      response = xhr.responseText
+
+      if (xhr.getResponseHeader("content-type") &&
+          xhr.getResponseHeader("content-type")!.indexOf("application/json") >= 0) {
+        try {
+          response = JSON.parse(response)
+        } catch(e) {
+          response = "Invalid JSON response from server."
+        }
+      }
+
+      updateProgress()
+
+      if (xhr.status < 200 || xhr.status >= 300)
+        handleError()
+      else {
+        (this as any)._finished([file], response, e)
+      }
+    }
+
+    xhr.onerror = () => {
+      if (file.status == WCCDropzone.CANCELED) { return }
+      handleError()
+    }
+
+    // Some browsers do not have the .upload property
+    let progressObj = xhr.upload ?? xhr
+    progressObj.onprogress = updateProgress
+
+    let headers = {
+      "Accept": "application/json",
+      "Cache-Control": "no-cache",
+      "X-Requested-With": "XMLHttpRequest",
+    }
+
+    if (this.options.headers) { Object.assign(headers, this.options.headers) }
+    if (file.uploadHeaders) { Object.assign(headers, file.uploadHeaders) }
+
+    for (let [headerName, headerValue] of Object.entries(headers)) {
+      xhr.setRequestHeader(headerName, headerValue)
+    }
+
+    this.emit("sending", file, xhr)
+
+    xhr.send(file)
+  }
+
+  uploadFiles(files: WCCDropzoneFile[]): void {
+    for (const file of files) {
+      this.uploadFile(file as WCCDropzoneFile)
+    }
+  }
+}
+
+const uploadPendingWarning = "File uploads have not yet completed. If you submit the form now they will not be saved. Are you sure you want to continue?"
+
+/**
+ * Called on page load to initialize the Dropzone
+ */
+function tessaInit() {
+  $('.tessa-upload').each(function(i: number, item: HTMLElement) {
+    const $item = $(item)
+
+    const directUploadURL = $item.data('direct-upload-url') || '/rails/active_storage/direct_uploads'
+
+    const options: WCCDropzoneOptions = {
+      maxFiles: 1,
+      addRemoveLinks: true,
+      url: 'UNUSED',
+      dictDefaultMessage: 'Drop files or click to upload.',
+      accept: createAcceptFn({ directUploadURL }),
+      ...$item.data("dropzone-options")
+    }
+
+    if ($item.hasClass("multiple")) { options.maxFiles = undefined }
+
+    const dropzone = new WCCDropzone(item, options)
+
+    /**
+     * On load, if an asset already exists, add it's thumbnail to the dropzone.
+     */
+    $item.find('input[type="hidden"]').each(function(i: number, input: HTMLElement) {
+      const $input = $(input)
+      const mockFile = $input.data("meta")
+      if (!mockFile) { return }
+
+      mockFile.accepted = true
+      dropzone.options.addedfile?.call(dropzone, mockFile)
+      dropzone.options.thumbnail?.call(dropzone, mockFile, mockFile.url)
+      dropzone.emit("complete", mockFile)
+      dropzone.files.push(mockFile)
+    })
+
+    const inputName = $item.data('input-name') || $item.find('input[type="hidden"]').attr('name');
+
+    /**
+     * On successful dropzone upload, create the hidden input with the signed ID.
+     * On the server side, ActiveStorage can then use the signed ID to create an attachment to the blob.
+     */
+    dropzone.on('success', (file: WCCDropzoneFile) => {
+      $(`input[name="${inputName}"]`).val(file.signedID)
+    })
+
+    /**
+     * On dropzone file removal, delete the hidden input.  This removes the attachment from the record.
+     */
+    dropzone.on('removedfile', (file: WCCDropzoneFile) => {
+      $item.find(`input[name="${inputName}"]`).val('')
+    })
+  })
+
+  $('form:has(.tessa-upload)').each((i, form) => {
+    const $form = $(form)
+    $form.on('submit', (event: any) => {
+      let safeToSubmit = true
+      $form.find('.tessa-upload').each((j, dropzoneElement) => {
+        (dropzoneElement.dropzone.files as WCCDropzoneFile[]).forEach((file) => {
+          if (file.status && file.status != WCCDropzone.SUCCESS) {
+            safeToSubmit = false
+          }
+        })
+      })
+      if (!safeToSubmit && !confirm(uploadPendingWarning)) {
+        // prevent form submission
+        return false
+      }
+    })
+  })
+}
+
+interface AcceptOptions {
+  directUploadURL: string
+}
+
+/**
+ * Accepts a file upload from Dropzone, and creates an ActiveStorage blob via the Tessa::RackUploadProxy.
+ *
+ * Upon successfully creating the blob, retrieves a signed upload URL for direct upload.  The
+ * signed URL is attached to the File object which is then passed to "uploadFile".
+ *
+ * @param file Binary file data uploaded by the user
+ * @param done Callback when file is accepted or rejected by the Tessa::RackUploadProxy
+ */
+function createAcceptFn({ directUploadURL }: AcceptOptions) {
+  return function(file: WCCDropzoneFile, done: (error?: string | Error) => void) {
+    const postData: ActiveStorageDirectUploadParams = {
+      blob: {
+        filename: file.name,
+        byte_size: file.size,
+        content_type: file.type,
+        checksum: ''
+      }
+    }
+
+    FileChecksum.create(file, (error, checksum) => {
+      if (error) {
+        return done(error)
+      }
+      if (!checksum) {
+        return done(`Failed to generate checksum for file '${file.name}'`)
+      }
+
+      postData.blob['checksum'] = checksum
+
+      $.ajax(directUploadURL, {
+        type: 'POST',
+        data: postData,
+        success: (response: ActiveStorageDirectUploadResponse) => {
+          file.uploadURL = response.direct_upload.url
+          file.uploadMethod = 'PUT' // ActiveStorage is always PUT
+          file.uploadHeaders = response.direct_upload.headers
+          file.signedID = response.signed_id
+          done()
+        },
+        error: (response: any) => {
+          console.error(response)
+          done("Failed to initiate the upload process!")
+        }
+      })
+
+    })
+  }
+}
+
+$(tessaInit)

data/app/javascript/tessa/types.ts

@@ -0,0 +1,34 @@
+
+export interface ActiveStorageDirectUploadParams {
+  blob: {
+    filename: string,
+    byte_size: number,
+    checksum: string,
+    content_type: string
+    metadata?: Record<string, string>
+  }
+}
+
+type Stringable = { toString(): string }
+
+export interface ActiveStorageDirectUploadResponse {
+  "id": Stringable,
+  "key": string,
+  "filename": string,
+  "content_type": string,
+  "metadata"?: {
+    "identified"?: boolean
+  },
+  "byte_size": number,
+  "checksum": string,
+  "created_at": string,
+  "service_name": string,
+  "signed_id": string,
+  "attachable_sgid": string,
+  "direct_upload": {
+    "url": string,
+    "headers"?: {
+      "Content-Type"?: string
+    }
+  }
+}

data/config/routes.rb

@@ -1,3 +1,2 @@
 Tessa::Engine.routes.draw do
-  post '/tessa/uploads', to: Tessa::RackUploadProxy
 end

data/lib/tessa/simple_form/asset_input.rb

@@ -1,44 +1,43 @@
 module Tessa
   class AssetInput < SimpleForm::Inputs::Base
 		def input(wrapper_options=nil)
-      merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
-      field = object.class.tessa_fields[attribute_name]
+      raise StandardError, "AssetInput with multiple: true not yet supported" if options[:multiple]
 
       template.content_tag(
         :div,
-        hidden_fields_for(object.public_send(attribute_name)),
-        "class" => "tessa-upload dropzone #{"multiple" if field.multiple?}",
-        "data-asset-field-prefix" => tessa_field_prefix,
+        hidden_fields_for(attribute_name),
+        "class" => "tessa-upload dropzone #{"multiple" if options[:multiple]}",
         "data-dropzone-options" => (options[:dropzone] || {}).to_json,
-        "data-tessa-params" => (options[:tessa_params] || {}).to_json,
+        "data-input-name" => "#{object_name}[#{attribute_name}]",
+        "data-direct-upload-url" => Rails.application.routes.url_helpers.rails_direct_uploads_path,
       )
     end
 
     private
 
-    def tessa_field_prefix
-      @tessa_field_prefix ||= "#{lookup_model_names.reduce { |str, item| "#{str}[#{item}]" }}[#{attribute_name}]"
-    end
+    def hidden_fields_for(attribute_name)
+      asset = object.public_send(attribute_name)
+      unless asset&.key.present?
+        return @builder.hidden_field("#{attribute_name}", value: nil)
+      end
 
-    def hidden_fields_for(assets)
-      [*assets].collect do |asset|
-        template.hidden_field_tag(
-          "#{tessa_field_prefix}[#{asset.id}][action]",
-          "add",
-          "data-meta" => meta_for_asset(asset),
-          "id" => "tessa_asset_action_#{asset.id}"
-        )
-      end.join.html_safe
+      @builder.hidden_field("#{attribute_name}",
+        value: asset.key,
+        data: {
+          # These get read by the JS to populate the preview in Dropzone
+          meta: meta_for_asset(asset)
+        })
     end
 
     def meta_for_asset(asset)
       {
-        "assetID" => asset.id,
-        "name" => asset.meta[:name],
-        "size" => asset.meta[:size],
-        "mimeType" => asset.meta[:mime_type],
-        "url" => asset.private_url,
+        # this allows us to find the hidden HTML input to remove it if we remove the asset
+        "signedID" => asset.key,
+        "name" => asset.filename,
+        "size" => asset.byte_size,
+        "mimeType" => asset.content_type,
+        "url" => asset.service_url(disposition: :inline, expires_in: 1.hour),
       }.to_json
-    end    
+    end
   end
-end
+end

data/lib/tessa/version.rb

@@ -1,3 +1,3 @@
 module Tessa
-  VERSION = "2.0"
+  VERSION = "6.0.0.rc2"
 end

data/lib/tessa.rb

@@ -1,90 +1,10 @@
 require "tessa/version"
 
-require "virtus"
-require "json"
-
-require "tessa/fake_connection"
-require "tessa/config"
-require "tessa/response_factory"
-require "tessa/asset"
-require "tessa/asset_change"
-require "tessa/asset_change_set"
-require "tessa/controller_helpers"
-require "tessa/model"
-require "tessa/rack_upload_proxy"
-require "tessa/upload"
-require "tessa/view_helpers"
-
-if defined?(ActiveJob)
-  require "tessa/jobs/migrate_assets_job"
-end
-
 if defined?(SimpleForm)
   require "tessa/simple_form"
 end
 
 module Tessa
-  class << self
-    def config
-      @config ||= Config.new
-    end
-
-    def setup
-      yield config
-    end
-
-    def find_assets(ids)
-      return find_all_assets(ids) if ids.is_a?(Array)
-
-      return find_asset(ids)
-    end
-
-    def model_registry
-      @model_registry ||= []
-    end
-
-    private
-
-    def find_asset(id)
-      return nil unless id
-
-      if blob = ::ActiveStorage::Blob.find_by(key: id)
-        return Tessa::ActiveStorage::AssetWrapper.new(blob)
-      end
-
-      Tessa::Asset.find(id)
-    rescue Tessa::RequestFailed => err
-      Tessa::Asset::Failure.factory(id: id, response: err.response)
-    end
-
-    def find_all_assets(ids)
-      return [] if ids.empty?
-
-      blobs = ::ActiveStorage::Blob.where(key: ids).to_a
-        .map { |a| Tessa::ActiveStorage::AssetWrapper.new(a) }
-      ids = ids - blobs.map(&:key)
-      assets = 
-        begin
-          Tessa::Asset.find(ids) if ids.any?
-        rescue Tessa::RequestFailed => err
-          ids.map do |id|
-            Tessa::Asset::Failure.factory(id: id, response: err.response)
-          end
-        end
-
-      [*blobs, *assets]
-    end
-  end
-
-  class RequestFailed < StandardError
-    attr_reader :response
-
-    def initialize(message=nil, response=nil)
-      super(message)
-      @response = response
-    end
-  end
-
 end
 
 if defined?(Rails::Railtie)

data/package.json

@@ -27,12 +27,17 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-node-resolve": "^11.0.1",
-    "coffeescript": "^2.7.0",
+    "@rollup/plugin-typescript": "^11.1.0",
+    "@types/dropzone": "^5.7.4",
+    "@types/jquery": "^3.5.16",
+    "@types/spark-md5": "^3.0.2",
     "eslint": "^4.3.0",
     "eslint-plugin-import": "^2.23.4",
     "rollup": "^2.35.1",
     "rollup-plugin-coffee-script": "^2.0.0",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-terser": "^7.0.2",
+    "tslib": "^2.5.0",
+    "typescript": "^5.0.4"
   },
   "scripts": {
     "prebuild": "yarn lint",

data/rollup.config.js

@@ -1,7 +1,7 @@
 import resolve from "@rollup/plugin-node-resolve"
 import commonjs from "@rollup/plugin-commonjs"
 import { terser } from "rollup-plugin-terser"
-import coffeescript from 'rollup-plugin-coffee-script'
+import typescript from "@rollup/plugin-typescript"
 
 const terserOptions = {
  mangle: false,
@@ -14,7 +14,7 @@ const terserOptions = {
 
 export default [
   {
-    input: "app/javascript/tessa/index.js.coffee",
+    input: "app/javascript/tessa/index.ts",
     output: {
       file: "app/assets/javascripts/tessa.js",
       format: "umd",
@@ -22,21 +22,21 @@ export default [
     },
     plugins: [
       resolve(),
-      coffeescript(),
+      typescript(),
       commonjs(),
       terser(terserOptions)
     ]
   },
 
   {
-    input: "app/javascript/tessa/index.js.coffee",
+    input: "app/javascript/tessa/index.ts",
     output: {
       file: "app/assets/javascripts/tessa.esm.js",
       format: "es"
     },
     plugins: [
       resolve(),
-      coffeescript(),
+      typescript(),
       commonjs(),
       terser(terserOptions)
     ]

data/spec/dummy/app/models/single_asset_model.rb

@@ -1,5 +1,5 @@
 class SingleAssetModel < ActiveRecord::Base
   include Tessa::Model
 
-  asset :avatar
+  has_one_attached :asset
 end

data/spec/dummy/app/models/single_asset_model_form.rb

@@ -5,21 +5,19 @@ class SingleAssetModelForm
 
   ATTRIBUTES = %w[
     title
-    avatar_id
+    avatar
   ]
 
   attr_accessor :single_asset_model
   attr_accessor *ATTRIBUTES
 
-  asset :avatar
-
   def self.from_single_asset_model(model, attrs = {})
     new(
       model.attributes
         .slice(*ATTRIBUTES)
         .merge(attrs)
-        .merge(single_asset_model: model) 
+        .merge(single_asset_model: model)
     )
   end
 
-end
+end

data/spec/dummy/bin/rails

@@ -1,4 +1,4 @@
 #!/usr/bin/env ruby
 APP_PATH = File.expand_path('../config/application', __dir__)
-require_relative '../config/boot'
-require 'rails/commands'
+require_relative "../config/boot"
+require "rails/commands"

data/spec/dummy/bin/rake

@@ -1,4 +1,4 @@
 #!/usr/bin/env ruby
-require_relative '../config/boot'
-require 'rake'
+require_relative "../config/boot"
+require "rake"
 Rake.application.run

data/spec/dummy/bin/setup

@@ -1,6 +1,5 @@
 #!/usr/bin/env ruby
-require 'fileutils'
-include FileUtils
+require "fileutils"
 
 # path to your application root.
 APP_ROOT = File.expand_path('..', __dir__)
@@ -9,16 +8,25 @@ def system!(*args)
   system(*args) || abort("\n== Command #{args} failed ==")
 end
 
-chdir APP_ROOT do
-  # This script is a starting point to setup your application.
+FileUtils.chdir APP_ROOT do
+  # This script is a way to set up or update your development environment automatically.
+  # This script is idempotent, so that you can run it at any time and get an expectable outcome.
   # Add necessary setup steps to this file.
 
   puts '== Installing dependencies =='
   system! 'gem install bundler --conservative'
   system('bundle check') || system!('bundle install')
 
-  # Install JavaScript dependencies if using Yarn
-  # system('bin/yarn')
+  # Install JavaScript dependencies
+  system! 'bin/yarn'
+
+  # puts "\n== Copying sample files =="
+  # unless File.exist?('config/database.yml')
+  #   FileUtils.cp 'config/database.yml.sample', 'config/database.yml'
+  # end
+
+  puts "\n== Preparing database =="
+  system! 'bin/rails db:prepare'
 
   puts "\n== Removing old logs and tempfiles =="
   system! 'bin/rails log:clear tmp:clear'

data/spec/dummy/bin/yarn

@@ -1,9 +1,15 @@
 #!/usr/bin/env ruby
 APP_ROOT = File.expand_path('..', __dir__)
 Dir.chdir(APP_ROOT) do
-  begin
-    exec "yarnpkg", *ARGV
-  rescue Errno::ENOENT
+  yarn = ENV["PATH"].split(File::PATH_SEPARATOR).
+    select { |dir| File.expand_path(dir) != __dir__ }.
+    product(["yarn", "yarn.cmd", "yarn.ps1"]).
+    map { |dir, file| File.expand_path(file, dir) }.
+    find { |file| File.executable?(file) }
+
+  if yarn
+    exec yarn, *ARGV
+  else
     $stderr.puts "Yarn executable was not detected in the system."
     $stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install"
     exit 1

data/spec/dummy/config/application.rb

@@ -1,4 +1,4 @@
-require_relative 'boot'
+require_relative "boot"
 
 require "rails"
 # Pick the frameworks you want:
@@ -8,10 +8,12 @@ require "active_record/railtie"
 require "active_storage/engine"
 require "action_controller/railtie"
 require "action_mailer/railtie"
+require "action_mailbox/engine"
+require "action_text/engine"
 require "action_view/railtie"
 # require "action_cable/engine"
 require "sprockets/railtie"
-# require "rails/test_unit/railtie"
+require "rails/test_unit/railtie"
 
 # Require the gems listed in Gemfile, including any gems
 # you've limited to :test, :development, or :production.
@@ -22,12 +24,12 @@ module Dummy
     # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 5.2
 
-    # Settings in config/environments/* take precedence over those specified here.
-    # Application configuration can go into files in config/initializers
-    # -- all .rb files in that directory are automatically loaded after loading
-    # the framework and any gems in your application.
-
-    # Don't generate system test files.
-    config.generators.system_tests = nil
+    # Configuration for the application, engines, and railties goes here.
+    #
+    # These settings can be overridden in specific environments using the files
+    # in config/environments, which are processed later.
+    #
+    # config.time_zone = "Central Time (US & Canada)"
+    # config.eager_load_paths << Rails.root.join("extras")
   end
 end