Forum Discussion

AngelaIp's avatar
AngelaIp
Ideator I
6 years ago
Solved

How to add restrictions to aras.vault.selectFile() file picker

Hi community, I currently design a custom form with a button that calls a regular file picker. In my scenario, end users shall only be able to upload certain datatypes, like txt and xml. As the aff...
Dialogs
  • christopher_gillis's avatar
    christopher_gillis
    6 years ago

    Hi Angela,

    The file picker is basically just using a standard HTML input element with the file type. This file input type supports an additional attribute called accept which you can use to pass in a comma separated list of extensions and mime types that you want your users to be able to pick from. There's a good explanation of it with some nice examples on this StackOverflow answer. In your case, you'd want to set an attribute like accept=".txt, .xml" . Note that in most browsers this will typically apply a default filter, but users will still be able to opt out of the filter to select any file they want. Because of this, your checks on the file once it's returned should still be included.

    For your use case, I'd recommend using a custom file input element rather than the one used by the selectFile() function which exists in the codetree. This will make it easier to modify in the future as well as allow for the possibility of accepting different file types for different users or situations.

    Chris

    Christopher Gillis

    Aras Labs Software Engineer

christopher_gillis's avatar
christopher_gillis
New Member
6 years ago

Hi Angela,

The file picker is basically just using a standard HTML input element with the file type. This file input type supports an additional attribute called accept which you can use to pass in a comma separated list of extensions and mime types that you want your users to be able to pick from. There's a good explanation of it with some nice examples on this StackOverflow answer. In your case, you'd want to set an attribute like accept=".txt, .xml" . Note that in most browsers this will typically apply a default filter, but users will still be able to opt out of the filter to select any file they want. Because of this, your checks on the file once it's returned should still be included.

For your use case, I'd recommend using a custom file input element rather than the one used by the selectFile() function which exists in the codetree. This will make it easier to modify in the future as well as allow for the possibility of accepting different file types for different users or situations.

Chris

Christopher Gillis

Aras Labs Software Engineer

  • AngelaIp's avatar
    AngelaIp
    Ideator I
    6 years ago

    Hi Chris,

    thanks for the hint to use a custom file picker. There is no big difference between the Aras file picker and the native javascript one, so I were able to reuse my existing code without having to change everything. I can confirm the the accept attribute turned out to be just a visual help. But I still prefer the custom variant, as I can also use it to display the picked files more easily.

    It´s even possible to add drag&drop option to the file picker. I like this option, as it can reused for other scenarios in Innovator, like the upload of Tech Doc graphics. Main challenge is somehow when you want to use css, cause there are some browser specific limitations to consider. Never start designing in Chrome, when the target audience is using IE mostly :-).