Update activestorage.js

app/javascript/packs/application-old.js

@@ -1,9 +1,10 @@
 import '../shared/polyfills';
 import Turbolinks from 'turbolinks';
 import Rails from 'rails-ujs';
-import ActiveStorage from '../shared/activestorage/ujs';
+import * as ActiveStorage from 'activestorage';
 import jQuery from 'jquery';
 
+import '../shared/activestorage/progress';
 import '../shared/sentry';
 import '../shared/rails-ujs-fix';
 import '../shared/safari-11-file-xhr-workaround';

app/javascript/packs/application.js

@@ -1,10 +1,11 @@
 import '../shared/polyfills';
 import Turbolinks from 'turbolinks';
 import Rails from 'rails-ujs';
-import ActiveStorage from '../shared/activestorage/ujs';
+import * as ActiveStorage from 'activestorage';
 import Chartkick from 'chartkick';
 import Highcharts from 'highcharts';
 
+import '../shared/activestorage/progress';
 import '../shared/sentry';
 import '../shared/rails-ujs-fix';
 import '../shared/safari-11-file-xhr-workaround';

app/javascript/shared/activestorage/ujs.js

@@ -1,105 +0,0 @@
-import { DirectUploadsController } from 'activestorage/src/direct_uploads_controller';
-import { findElement } from 'activestorage/src/helpers';
-import './progress';
-
-// This is a patched copy of https://github.com/rails/rails/blob/master/activestorage/app/javascript/activestorage/ujs.js
-// It fixes support for multiple input/button elements on direct upload forms
-
-const processingAttribute = 'data-direct-uploads-processing';
-let started = false;
-
-export function start() {
-  if (!started) {
-    started = true;
-    document.addEventListener('submit', didSubmitForm);
-    document.addEventListener('click', didSubmitFormElement);
-    document.addEventListener('ajax:before', didSubmitRemoteElement);
-  }
-}
-
-export default { start };
-
-function didSubmitForm(event) {
-  handleFormSubmissionEvent(event);
-}
-
-function didSubmitFormElement(event) {
-  const { target } = event;
-  if (isSubmitElement(target)) {
-    handleFormSubmissionEvent(formSubmitEvent(event), target);
-  }
-}
-
-function didSubmitRemoteElement(event) {
-  if (event.target.tagName == 'FORM') {
-    handleFormSubmissionEvent(event);
-  }
-}
-
-function formSubmitEvent(event) {
-  return {
-    target: event.target.form,
-    preventDefault() {
-      event.preventDefault();
-    }
-  };
-}
-
-function isSubmitElement({ tagName, type, form }) {
-  if (form && (tagName === 'BUTTON' || tagName === 'INPUT')) {
-    return type === 'submit';
-  }
-  return false;
-}
-
-function handleFormSubmissionEvent(event, button) {
-  const form = event.target;
-
-  if (form.hasAttribute(processingAttribute)) {
-    event.preventDefault();
-    return;
-  }
-
-  const controller = new DirectUploadsController(form);
-  const { inputs } = controller;
-
-  if (inputs.length) {
-    event.preventDefault();
-    form.setAttribute(processingAttribute, '');
-    inputs.forEach(disable);
-    controller.start(error => {
-      form.removeAttribute(processingAttribute);
-      if (error) {
-        inputs.forEach(enable);
-      } else {
-        submitForm(form, button);
-      }
-    });
-  }
-}
-
-function submitForm(form, button) {
-  button = button || findElement(form, 'input[type=submit]');
-  if (button) {
-    const { disabled } = button;
-    button.disabled = false;
-    button.focus();
-    button.click();
-    button.disabled = disabled;
-  } else {
-    button = document.createElement('input');
-    button.type = 'submit';
-    button.style.display = 'none';
-    form.appendChild(button);
-    button.click();
-    form.removeChild(button);
-  }
-}
-
-function disable(input) {
-  input.disabled = true;
-}
-
-function enable(input) {
-  input.disabled = false;
-}

config/webpack/environment.js

@@ -1,20 +1,6 @@
 const path = require('path');
 const { environment } = require('@rails/webpacker');
 
-// By default don't transpile JS files in ./node_modules – except for some specific modules.
-const babelLoader = environment.loaders.get('babel');
-babelLoader.exclude = function(modulePath) {
-  let forcedModules = [
-    'activestorage' // ActiveStorage uses 'class', which is not supported by IE 11 and older Safari version
-  ];
-  return (
-    modulePath.includes('node_modules') &&
-    forcedModules.every(
-      forcedModule => !modulePath.includes('node_modules/' + forcedModule)
-    )
-  );
-};
-
 const resolve = {
   alias: {
     '@utils': path.resolve(__dirname, '..', '..', 'app/javascript/shared/utils')

package.json

@@ -3,7 +3,7 @@
     "@rails/webpacker": "4.0.0-pre.3",
     "@sentry/browser": "^4.0.4",
     "@turf/area": "^6.0.1",
-    "activestorage": "^5.2.1",
+    "activestorage": "^5.2.2-rc1",
     "autocomplete.js": "^0.31.0",
     "chartkick": "^3.0.1",
     "debounce": "^1.2.0",

yarn.lock

@@ -952,10 +952,10 @@ acorn@^5.0.0, acorn@^5.0.3, acorn@^5.6.0, acorn@^5.6.2:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8"
   integrity sha512-d+nbxBUGKg7Arpsvbnlq61mc12ek3EY8EQldM3GPAhWJ1UVxC6TDGbIvUMNU6obBX3i1+ptCIzV4vq0gFPEGVQ==
 
-activestorage@^5.2.1:
+activestorage@^5.2.2-rc1:
-  version "5.2.1"
+  version "5.2.2-rc1"
-  resolved "https://registry.yarnpkg.com/activestorage/-/activestorage-5.2.1.tgz#b4be57fbedc25c6c361802707fc5e8884766f6a1"
+  resolved "https://registry.yarnpkg.com/activestorage/-/activestorage-5.2.2-rc1.tgz#99c27a08974fd953a66f7c96488cd70f0ecffda5"
-  integrity sha512-n3LcwiC3EV5zkVAvay5yprXTBb8vzT2Qef1GCfC8feJTVWEadzNW9zYaOweDpshqzJHx+zdaps6uiHDJQbdCdA==
+  integrity sha512-HO0oiAfCVSGa80MYVGaNBQaecvWEg5/hsMbqHcmKvxsQVkDfS0TbDYT96nJ8l2t0sZ4lVNeVjOYBn15Bf5Eqig==
   dependencies:
     spark-md5 "^3.0.0"