Restrict which filetypes can be selected when in chooser mode

It's possible to restrict which filetypes the user can choose in chooser mode. To do so, follow these steps (it is assumed that you already have a working chooser implementation).

In the view in which the chooser iframe is placed, add the following script block (it must be BELOW the iframe):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">

    var validFileTypes = function () {

        var searchString = window.location.search;
        var key = 'validFileTypes';
        var match = searchString.match('[?&]' + key + '=([^&]+)');
        var value = match !== null ? match[1] : null;

        if (value === null) return false;

        return value.split(',');

    }

    var frame = document.querySelector('iframe');

    frame.onload = function () {
        var frameWindow = frame.contentWindow;
        frameWindow.postMessage(validFileTypes(), '*');
    }

</script>

In the html form that's posted to the chooser iframe wrapper, add the following hidden input field:

1
<input type="hidden" id="validFileTypes" class = "fileChooserValidFileTypes" value="svg,pdf"/>

The value should contain a comma separated list of file types/extensions that you want to allow the user to choose.

If you're using MVC you'll probably want to adapt it to something similar to:

1
@Html.HiddenFor(x => picker.ValidFileTypes, new {@class = "fileChooserValidFileTypes"})

Make sure that the list of valid filetypes is  appended to the iframe wrapper's querystring. Something similar to (probably needs adaptation:

1
2
3
4
5
6
7
8
var validFileTypes = admin.filechooser6.currentfileChooser.find("input.fileChooserValidFileTypes");
      if (validFileTypes) {
          var validFileTypesValue = validFileTypes.val().trim();
          if (validFileTypesValue.length > 0) {
              var seperator = fileIdFieldValue === null ? '?' : '&';
              filechooser6Url += seperator + "validFileTypes=" + validFileTypesValue;
          }
      }