marinosoftware / active_storage_drag_and_drop Goto Github PK

Hi,

I'm trying to trigger file uploads as soon as they're dropped into the dndzone, and I'm just not succeeding. I'm hoping you can help. I'm sure I'm just misunderstanding something. Here's my code:

const form = document.getElementsByClassName('form-with-dnd');

function TriggerProcessUploadQueue(form, event) {
    console.log(event.detail);

    //Start the upload

    let callback = function(error) {
        if (error) {
            console.log('An error was found:');
            console.log(error);
            console.log('This upload will be aborted');
        } else {
            console.log("No errors were detected with this item");
            console.log("Let's upload it now...");
        }
    };

    const uploadEvent = document.createEvent('Event');
    uploadEvent.initEvent('dnd-uploads:process-upload-queue', true, true);
    uploadEvent.detail = { callback };
    form.dispatchEvent(uploadEvent);
}

document.addEventListener('dnd-upload:initialize', function (event) {
    console.log('This item was dropped on the box, or selected from dialog:');
    TriggerProcessUploadQueue(form[0], event);
});

When I step through the code in Chrome Dev Tools I find that the file is present in the detail attribute of event (demonstrated by console.log(event.detail)) but at the below block of code in ujs.js, the nextUpload.current_uploaders.length is equal to 0:

function processUploadQueue (event) {
  const form = event.target
  const { callback } = event.detail
  const nextUpload = new UploadQueueProcessor(form)
  if (nextUpload.current_uploaders.length > 0) {
    nextUpload.start(error => {
      if (error) {
        callback(error)
      } else {
        callback()
      }
    })
  } else {
    callback()
  }
}

I can confirm the form being passed to UploadQueueProcessor is the correct form DOM element.

I'm certain I must be overlooking something obvious, as it all seems to tie together nicely!

Rails 7 was a pretty straightforward update... except for ActiveStorage.

So far, I have narrowed it down to this change here, which added two new arguments to the DirectUpload constructor:
rails/rails@193289d#diff-16c1afded0eaa5fd64720af8ff9b62d0922133b3e1b5b5cb98e68266ce1a2d9cR8

Getting the above-mentioned error when I try to use active storage drag and drop inside a bootstrap modal via the javascript implementation for rendering. However, using the pure html implementation of the bootstrap modal seems to work fine. Need some help regarding the implementation.

Since Rails 6 uses Webpacker, //= require active_storage_drag_and_drop does not work anymore.

When using has_one_attached, it causes this exception

reject delegated to attachment, but attachment is nil

When I remove an attachment & then save the record; I cannot add anymore attachments to the cocoon field. The file doesn't save the second time around. I don't know exactly why that is happening. Can you please look into it?

Hi, thank you for this great gem. I was having an issue when submitting a remote rails form along with drag_and_drop_file_field

1. Steps to reproduce
   Create rails form with remote set to true, add <%=f.drag_and_drop_file_field :documents, 'Drag and drop images here!'%> as form field. Submit form.
2. Expected behaviour
   Submitting form not receiving CSRF error and processing request as js
3. Actual behaviour
   Submitting form returns 'Can't verify CSRF token authenticity.' error and processing request as html
4. System configuration
   Rails version: 'Rails 5.2.3'
   Ruby version: 'ruby 2.6.3p62'

When I remove an attachment & then save the record; I cannot add anymore attachments to the cocoon field. The file doesn't save the second time around. I don't know exactly why that is happening. Can you please look into it?

Hi!

When I set the accept or file_size option, the validation of the selected file works fine, but I see in the DOM that there is a class added to the direct-upload container, direct-upload--error and that a Title with a explanation is set. Unfortunately, the title has the text: TypeError: Error.captureStackTrace is not a function. This does not seem right. Could you have a look?

First off thanks for this library!

Looks like the JS for this library assumes the target element is already present on the page, at the time application.js is executed -- however this doesn't work with Turbolinks as application.js will only get executed on the very first request, and so if the dnd-target is not present until a later navigation, the library doesn't get activated.

Worse so, since the start status is cached, even attempts to force-call start() to bind after a turbolinks:load doesn't work.

Would be great to get some better Turbolinks integration given its been the default in Rails 5 and up...

Hi I try to use your gem in a rails 7 project,
when I drop the files in the drop zone, they are not listed in the box... but they are there because if I save the files are linked with the new created object.

Do you have any clue for me?

Before or after i click to submit my form, loading bar doesn't fill up. Most scarry part is when i click submit. My cloud storage makes a url place for it but doesn't upload there. Form gets unresponsive and stuck on same page

How can I use active_storage_drag_and_drop inside form_tag

Is the file_field supposed to persist on a form rerender, for example when any validation for the form object fails and the form gets redisplayed?

Is it possible to remove attachments with your gem? Lets say a user submits file.png, can he/she delete the attachment in the edit form??

Best

Does this automatically handle direct uploads: true? or is there a way to set it?

Want to use this gem with Rails 6 but unable to do so as current version is dependent on rails (~> 5.2.2.1)

Any idea if there are plans to upgrade?

When I deploy using capistrano. I receive

Field 'browser' doesn't contain a valid alias configuration
/home/deploy/app/releases/2200000.../node_modules/active_storage_drag_and_drop/index.jpg doesn't exist"

I recently updated webpacker gem. Do you know why this might be happening?

I has 5 similar forms in one page, each has 1 drag_and_drop_file_field. when attach is selected their labels appear only at first form, but attach is correctly upload.
perhaps, cause they all have identical ID on input field and ignore html_input options

I noticed the browser file upload starts on clicking the drag-drop box.

I would like to open this file upload box with a keyboard after tabbing to the box. I was not on the best way to do this though.

hi thank you for this gem. I know this is explained in the doc but i am having some trouble. i had a quick question regarding how the flow works when user submits a form that is invalid which is returned with validation errors. I see acdd saves the attachments previously uploaded but not saved to database yet which is great. But i want to be able to style how these look. I was able to do style when they first upload with paintUploadIcon. But when the page re-renders with errors that event does not fire. I also tried document.addEventListener('dnd-upload:placeholder', function (event) { debugger event.preventDefault() }) but this does not fire when the page re-renders. Also when the placeholder attachments are added i cant seem to click the X icon to remove the attachment. Any help would be greatly appreciated.

If you can provide insight for me on this, I'd be happy to create a PR with updated documentation.

Could I suggest adding the css to the yarn version and removing the need to install the gem all together? Currently, I have copied the css file from the git repo because I have moved away from using the assets pipeline and am using webpack to serve all my assets. With that said, I am still forced to bundle the gem version to handle a few ruby dependencies.

I am really loving this gem. Great job.
Thank you