DirectUpload is failing to trigger directUploadWillStoreFileWithXHR for file storage

Question

DirectUpload is failing to trigger directUploadWillStoreFileWithXHR for file storage

I have implemented Rails ActiveStorage on an ECS class

import { DirectUpload } from "@rails/activestorage";

function createDirectUpload(file, source, controller) {
  return new DirectUpload(file, source.url, source.token, source.attachmentName, controller);
}

I instantiate a new DirectUpload in my constructor

constructor(source, file) {
  this.directUpload = createDirectUpload(file, source, this);
  this.source = source;
  this.file = file;
}

start() {
  this.source.fileUploader = this;
  this.hiddenInput = this.createHiddenInput();
  this.directUpload.create((error, attributes) => {
    if (error) {
      this.hiddenInput?.parentNode?.removeChild(this.hiddenInput);
      this.emitDropzoneError(error);
    } else {
      this.hiddenInput.value = attributes.signed_id;
      this.emitDropzoneSuccess();
    }
  });
}

directUploadWillStoreFileWithXHR(xhr) {
  this.bindProgressEvent(xhr);
  this.emitDropzoneUploading();
}

Even though start is functioning correctly, the callback directUploadWillStoreFileWithXHR is not being triggered.

javascript ruby-on-rails rails-activestorage

Answer 1

Answer №1

If you want to monitor the status of the file upload, simply include a third parameter in the DirectUpload constructor

new DirectUpload(file, source.url, this)

Include it as the fifth parameter like this

return new DirectUpload(file, source.url, source.token, source.attachmentName, controller);

Your initial setup should resemble the following:

import { DirectUpload } from "@rails/activestorage";

function uploadFile(file, source, controller) {
  return new DirectUpload(file, source.url, controller);
}

Answer 2

If you want to monitor the status of the file upload, simply include a third parameter in the DirectUpload constructor

new DirectUpload(file, source.url, this)

Include it as the fifth parameter like this

return new DirectUpload(file, source.url, source.token, source.attachmentName, controller);

Your initial setup should resemble the following:

import { DirectUpload } from "@rails/activestorage";

function uploadFile(file, source, controller) {
  return new DirectUpload(file, source.url, controller);
}

DirectUpload is failing to trigger directUploadWillStoreFileWithXHR for file storage

Answer №1

Similar questions

Issue encountered while retrieving JSON data from Github

Unable to find the locally stored directory in the device's file system using Nativescript file-system

Add a parameter within a loop using JavaScript

How can I retrieve the Azure subscription IDs of the currently logged in user using @azure/msal-angular?

What is the best way to create query strings for AJAX URL using jQuery or JavaScript?

Track the number of times a button is clicked to generate a prominent "Main Event" section

One the year is chosen, it will be automatically hidden and no longer available for selection

Despite declaring a default export, the code does not include one

What is the best way to send information from child components to their parent in React

Managing dates in Coordinated Universal Time (UTC) on the

What is the best way to utilize this resulting value as an input?

Enabling or disabling mouse scroll wheel function across various web browsers

Transferring the data entered into an input field to a PHP script, in order to retrieve and display the value with JavaScript, unfortunately results in a

The battle between AngularJS, Factory, $scope, and promises intensifies

Navigating to User's Specific Info Page using Node.js

Error: Attempting to access the 'getProvider' property of an undefined variable

Simple steps to load various json files into separate json objects using node.js

Problem encountered while trying to import npm module in React Native

How can I extract particular combinations from a PHP array?

Exploring ways to overlay 2D text onto my Blender-created 3D model