add drag uploader

[f2cmb]

• I have read the CONTRIBUTING document.
• I have performed a self-review of my code.
• I have added tests that prove my fix is effective or that my feature works.
• This change requires a documentation update.

Description

• Proposal for Functional upload modal roadmap#91
• Here is a brief description of what this PR does :

Add an uploader to documents modal for new KB/

Screenshots (if appropriate):

[cconard96]

Unless this design is only going to be used for KB, IMO it should be made its own component and not put in the KB styles/code.

[AdrienClairembault]

I think the upload to tmp part should start immediately when the file is added, that's how it works on gmail for example.

Also, if I upload a file that is not allowed (a .json for example), I don't have any error and my file is just silently ignored.

[f2cmb]

Removed dead code for file verification. Add immediate uploads.

[AdrienClairembault]

Looks good functionally but I'd like to wait for @cedric-anne opinion on the technical side as this changes a lot compared to our traditional "legacy" jquery file uploader system.

If we validate it, it should indeed be move into a re-usable module so it can be used for others features as a replacement of the old jquery file uploader.

[cedric-anne]

Looks good functionally but I'd like to wait for @cedric-anne opinion on the technical side as this changes a lot compared to our traditional "legacy" jquery file uploader system.

If we validate it, it should indeed be move into a re-usable module so it can be used for others features as a replacement of the old jquery file uploader.

The current uploader component we use is not maintained anymore, and this is why we had to embed its sources in our repository. Therefore, I think it is a good idea to build our own component, and plan to use it in the whole GLPI code base in a future version.
It is preferable to keep it simple for the moment, but in a later PR, it could be a good idea to handle uploads by chunks, in order to be able to upload large documents without having to modify the PHP configuration. The current componant handles it.

[f2cmb]

Extracted the file uploader dropzone markup from article.html.twig into a standalone partial. The JS (FileUploader.js) and SCSS (_file-uploader.scss) were already generic ; this completes the extraction by making the Twig layer reusable too.

Tested reusability by replacing fields.fileField() in form_document_item.html.twig with the new partial + a FileUploader init : the dropzone renders correctly, drag & drop and immediate upload work out of the box.

Full integration would require an adapter controller.

To try the partial anywhere in GLPI :

  {{ include('components/form/file_uploader.html.twig', {
      'input_id': 'my-upload-input',
  }, with_context = false) }}

  <script type="module">
      import { FileUploader } from '/js/modules/FileUploader.js';
      new FileUploader(document.getElementById('my-container'));
  </script>