• State Verified Answer
  • Replies 10 replies
  • Subscribers 13 subscribers
  • Views 25832 views
  • Users 0 members are here
Options
Related

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

AngelaIp

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 affected users group does not have any edit rights for items, I have to upload the Files to the Vault and link them later to the correct items by a Server Method. As this approach directly throws files into the Vault, I want to ensure that only the right files can go through.

What´s the best way to add restrictions to the file picker?

var vlt = aras.vault;
vlt.selectFile().then(
function (fileObject)
{

  if (fileObject.size > 1000 || fileObject.type != "text/xml" )
  {
     return alert("This file can´t be right")
  }
  var fileItem = inn.newItem("File","add");
  fileItem.setFileName(fileObject);
  fileItem = fileItem.apply();
  var fileId = fileItem.getID();
// do something with the file
}
);

I have noticed, that the fileObject contains the mime type, file size and other file properties that I can use for a later filtering. It´s even possible to read the hex file signature, which maybe helps to prevent faked files. But I wonder if I can directly pass a filter to the file picker, so users can only select certain file types from the start. This way my lnnovator would not get in touch with invalid fileObjects at all. 

Thanks for sharing your ideas!
Angela

Parents
  • +1 Offline

    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

Reply
  • +1 Offline

    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

Children
  • 0 in reply to Christopher Gillis

    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 :-).