Category: How do I do X?
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

How do I use the file names from the FilePicker widget as an array for my JSObject?

Issue

I'm trying to set up a small app that requires the user to select files using a FilePicker widget, and then convert the file names to language names using a reference map. I wrote a JSObject to do this, but it only works when I manually input the file names as an array, not when I try to use file_picker.files.map(). I realized that I needed to store the selected files in a variable first.

Resolution

The user needs to select some files via a FilePicker widget and get their filenames to create a new array based on a reference map that converts file names to language names. The initial code utilizes the file_picker.files.map() function to extract the file names dynamically, but it does not work.

The solution is to store the selected files in a variable onFilesSelected and then use the appsmith.store.selected_files variable in the JSObject. The updated code should look like this:

export default {
convert_filename_to_language: () => {
const selected_files = appsmith.store.selected_files.map((selected_file) => {return selected_file.name});
const language_map = [{'file': 'de.xlf', 'lang': 'de_DE'},{'file': 'es.xlf', 'lang': 'es_ES'},{'file': 'it.xlf', 'lang': 'it_IT'},{'file': 'pt-rBR.xlf', 'lang': 'pt_BR'}]
const languages = [];
var k=0;

for (let i = 0; i < selected_files.length; i++) {
for (let j = 0; j < language_map.length; j++) {
if(selected_files[i]==language_map[j]['file']) {
languages[k]=language_map[j]['lang'];
k++;
}
}
}

return languages
},
}

By using the appsmith.store.selected_files variable, we can ensure that the filenames are correctly extracted from the FilePicker widget, and the language conversion can proceed as intended.