Update documentation

[yuchiko]

Hey, thanks for your awesome work with this component 🐱 I found few things during library migration to version 8 from 4. And I hope it will be helpful for others (ofc with your edits)

1. FileDropzone field allowUploadsFromWebsites is missing in documentation.
2. Previously we had tests for checking dropdown multiple attribute. This test worked with FileUpload service.

let fileQueue = applicationInstance.lookup('service:file-queue');
let queue = fileQueue.find('queue');
let fileAdded = false;

queue.onFileAdd = () => (fileAdded = true);

Now it doesn't work because onFileAdd doesn't fire. But I found a cool solution in your code that might be useful in the documentation code here

3. Also tests. You removed @accept attribute & dropzone.valid state from the FileDropzone component. In documentation you mentioned that the alternative to make your own validation is new filter attribute, but it won't help with dropzone.valid. My alternative for this is to use @onDragEnter....but it was a surprise for me that dataTransfer doesn't have full data about file due to security reasons in Google Chrome...but some data is available in dataTransferWrapper.itemDetails. So, it's possible to preValidate file type onDragEnter event

hbs

<FileDropzone
   @onDragEnter={{this.preValidateFiles}}
>
{{#if dropzone.active}}
  {{#if this.valid}}
    Valid state
  {{else}}
    Invalid state
  {/if}}
{{/if}}
</FIleDropzone>

js

@action
  preValidateFiles(files, dataTransferWrapper) {
    let isValid = true;
    if (this.accept) {
      // dataTransferWrapper.itemDetails) - items details (name, type)
      // validation logic here
      // change isValid variable
    }

    this.set('valid', isValid);
  }

[gilest]

Hi @yuchiko , thanks for your feedback.

In case you missed them, there is an Upgrade guide detailing the breaking changes in each release

1. FileDropzone field allowUploadsFromWebsites is missing in documentation.

True, I had kind of forgotten about this functionality but it shouldn't be documented at least for now as the drag-and-drop image from other website function is not enabled/working (See here where it was commented out) and comments in PR from the time

It was commented out during the upgrade work around v4/v5 because it had no test coverage and the codebase went through a significant upgrade at that time.

Since it was an API removal we should probably add it to the Upgrade guide (edit: have done so). There was a lot of churn at the time so I guess we missed this.

No one has mentioned it yet so it doesn't seem very popular... but if you'd like to champion this feature I'm happy to give you some pointers 🙂

2. Previously we had tests for checking dropdown multiple attribute Now it doesn't work because onFileAdd doesn't fire

The onFileAdd callback was removed from the components, the queue callback is called onFileAdded, try that instead.

3. You removed @accept attribute & dropzone.valid state from the FileDropzone component. In documentation you mentioned that the alternative to make your own validation is new filter attribute, but it won't help with dropzone.valid.

That's right, there are good reasons to avoid @accept as it's inflexible. Your solution is a good example of the new API being more flexible. We've been meaning to add a "Recipes" section with code snippets like this!

[yuchiko]

Hey, thx for so fast response !

1. I had questions about this parameter only, because I found it here Not sure that we really need this feature :D

2. Btw, it's strange, because onFileAdded didn't work for me after onDrop event. I will try to investigate it later, maybe the problem with my implementation.

3. Page "Recipes" is a great idea. I will share my solution with valid/invalid status approx. on Monday ~ Tuesday.

[gilest]

Closing since activity here has quietened down. Would still welcome any documentation or recipe contributions. Thank you