Customisations to the Fileuploader. Showing custom buttons, actions and the uploaded date

I’m looking to make some additions to the fileuploader. Here are the things I want to do.

  1. Show the uploaded date in the list
  2. Add a button to each item in the list that allows a file to be “archived”
  3. A bulk delete button to archive more than one file at a time

My UI would look something similar to what’s shown below.
attachments
My first question is. Is this even possible with how the fileuploader works in v2?

For the archiving of files, my idea is to have a separate relation defined on the model, and when a file is archived , update the field column for it in the database to match the new relation name.

This would be handled by an ajaxHandler on my controller. And a similar technique would be used for the Archive Selected button.

My real issue is how do I get the buttons to be displayed in the list? Are there any events that I can hook into to achieve this or something similar?

Once a file is archived, I’d want it to be removed from the active list, and moved over to the archived list.

Hope all this makes sense, and I’ll appreciate any help that I can get on this.

Thank you! :slight_smile:

One way of doing that would be to override widget’s partials:

FileUpload::extend(function($widget) {
    $widget->addViewPath('/path/to/custom/views');
});

You can copy any file from modules/backend/formwidgets/fileupload/partials to your custom path and the system will use your file instead of the original. You can also make custom ajax handlers by using $widget->addDynamicMethod('onCustomHanlder', function() { ... }).

Alternatively you can extend the entire widget and register it as a new custom widget. As an example you can look at the old ML controls of RainLab/Translate: translate-plugin/MLMediaFinderv2.php at 1.x · rainlab/translate-plugin · GitHub

3 Likes

Perfect! That’s ideal for me. Thanks @acasar !!

I need to extend the javascript for this now. Do you know what the best way to do this would be?

I thought there was some documentation on how to end javascript somewhere, but I can’t seem to find it anywhere?