How to use activestorage - 10 common examples

import Rails from 'rails-ujs';
Rails.start();
window.Rails = Rails;
import Turbolinks from 'turbolinks';
window.Turbolinks = Turbolinks;
Turbolinks.start();

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

import * as ActiveStorage from "activestorage"
ActiveStorage.start()

// Does not process requires when imported like this
import '../packs/src/subscriptions'
import '../packs/src/modals'
import '../packs/src/global'
console.log('Hello World from Webpacker')

this.uppy.log(`[XHRUpload] ${id} progress: ${ev.loaded} / ${ev.total}`);
        timer.progress();

        if (ev.lengthComputable) {
          this.uppy.emit('upload-progress', file, {
            uploader: this,
            bytesUploaded: ev.loaded,
            bytesTotal: ev.total
          })
        }
      }
      directHandlers.directUploadWillStoreFileWithXHR = (request) => {
        request.upload.addEventListener("progress", event => directHandlers.directUploadDidProgress(event))
      }

      const upload = new DirectUpload(file.data, this.opts.directUploadUrl, directHandlers);
      const id = cuid();

      upload.create((error, blob) => {
        this.uppy.log(`[XHRUpload] ${id} finished`);
        timer.done();

        if(error) {
          const response = {
            status: 'error',
          };

          this.uppy.setFileState(file.id, { response });

          this.uppy.emit('upload-error', file, error);
          return reject(error);
        } else {

constructor(file, directUploadUrl, blobUrlTemplate, callback, progress) {
    this.file = file
    this.directUploadUrl = directUploadUrl
    this.blobUrlTemplate = blobUrlTemplate
    this.callback = callback
    this.progress = progress
    this.directUpload = new DirectUpload(file, this.directUploadUrl, this)
  }

constructor(file: File, options: Options) {
    this.options = { ...Upload.defaultOptions, ...compactObject(options) }
    this.directUpload = new ActiveStorage.DirectUpload(
      file,
      this.directUploadsUrl,
      this
    )

    this.handleChangeFile({ state: 'waiting', id: this.id, file })
  }

constructor (input: HTMLInputElement, file: File) {
    validate(input, file)
    const form = input.closest('form')
    const iconContainer = document.getElementById(input.dataset.iconContainerId)
    if (!(form instanceof HTMLFormElement && iconContainer)) return

    this.input = input
    this.form = form
    this.url = this.input.dataset.directUploadUrl
    this.iconContainer = iconContainer
    this.file = file
    this.upload = new DirectUpload(this.file, this.url, this)
    const event = this.dispatch('initialize')
    initializeUI(event)
  }

constructor(file, directUploadUrl, blobUrlTemplate, callback) {
    this.file = file
    this.directUploadUrl = directUploadUrl
    this.blobUrlTemplate = blobUrlTemplate
    this.callback = callback
    this.directUpload = new DirectUpload(file, this.directUploadUrl, this)
  }

import Rails from "rails-ujs"
Rails.start()

import * as ActiveStorage from "activestorage"
ActiveStorage.start()

import Turbolinks from "turbolinks"
Turbolinks.start()

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

import "./cable"

import "./local_time"

import "bootstrap"

import Rails from "rails-ujs"
Rails.start()

import * as ActiveStorage from "activestorage"
ActiveStorage.start()

import Turbolinks from "turbolinks"
Turbolinks.start()

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

import "./cable"

import "./local_time"

export const directUpload = (url, headers, file) => {
  const upload = new BlobUpload({ file, directUploadData: { url, headers } });
  return new Promise((resolve, reject) => {
    upload.create(error => {
      if (error) {
        reject(error);
      } else {
        resolve();
      }
    })
  });
};

return new Promise((resolve, reject) => {
    FileChecksum.create(file, (error, checksum) => {
      if (error) {
        reject(error);
        return;
      }

      resolve(checksum);
    });
  });
}