{"id":22066233,"url":"https://github.com/dealfonso/jsfb","last_synced_at":"2026-02-21T10:02:34.848Z","repository":{"id":265113199,"uuid":"891671923","full_name":"dealfonso/jsfb","owner":"dealfonso","description":"Customizable File Browser or File Manager for HTML apps","archived":false,"fork":false,"pushed_at":"2025-03-03T10:33:41.000Z","size":1653,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T16:17:14.465Z","etag":null,"topics":["file-browser","file-management","file-manager","files","filesystem","frontend-web","html","html-css-javascript","javascript","javascript-library"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dealfonso.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-20T18:43:05.000Z","updated_at":"2025-03-01T14:57:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"593fe8b6-33be-49d6-b6c3-63369f5b68c5","html_url":"https://github.com/dealfonso/jsfb","commit_stats":null,"previous_names":["dealfonso/jsfb"],"tags_count":3,"template":false,"template_full_name":"dealfonso/jsweblibrary","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fjsfb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fjsfb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fjsfb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fjsfb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dealfonso","download_url":"https://codeload.github.com/dealfonso/jsfb/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065284,"owners_count":21041872,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["file-browser","file-management","file-manager","files","filesystem","frontend-web","html","html-css-javascript","javascript","javascript-library"],"created_at":"2024-11-30T19:26:45.533Z","updated_at":"2026-02-21T10:02:34.842Z","avatar_url":"https://github.com/dealfonso.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FileBrowser\n\n[![](https://data.jsdelivr.com/v1/package/gh/dealfonso/jsfb/badge?style=rounded)](https://www.jsdelivr.com/package/gh/dealfonso/jsfb) ![](https://img.shields.io/github/v/release/dealfonso/jsfb) ![](https://img.shields.io/github/release-date/dealfonso/jsfb) ![](https://img.shields.io/github/languages/code-size/dealfonso/jsfb) ![](https://img.shields.io/github/license/dealfonso/jsfb)\n\n`FileBrowser` is a JavaScript library that creates a file browser in the client side. It is intended to be used in web applications that need to access the files of a folder in the server.\n\nIt tries to show a similar interface to the one of the file browser of the operating system of the user, so the user can feel comfortable using it.\n\n|![List view](img/view-list.png)|\n|--|\n|![Grid view](img/view-grid.png)|\n|--|\n![Preview view](img/view-preview.png)|\n|--|\n\nUsing `FileBrowser` it is possible to create full featured file browsers that can be used to show the files of a folder, select files, download files, etc. like in the next image:\n\n![Full featured example](img/full-example.png)\n\nThis example is included in the source, as `example.html`, but can be also seen at [Codepen - jsfb-full-example](https://codepen.io/dealfonso/pen/ByBWEam).\n\n\u003e **NOTICE**: This is no more than a __front end library__. It does not provide any functionality to access the files in the server. It is intended to be used in conjunction with a back end that provides the files to the library.\n\n## Features\n\n- **Grid, preview and list view**: The user can switch between each view. The grid view shows the files as icons, the list view shows the files as a list and the preview view shows the files as icons with a preview of the content (if provided).\n- **Sorting**: The user can sort the files by name, size, date or type.\n- **Selection**: The user can select one or more files.\n- **Context menu**: The library enables the user to create context menus for the files (by providing a set of callbacks) or a custom context menu with custom actions and callbacks.\n\n## Usage\n\n1. Include the library in your html and the css file:\n\n    ```html\n    \u003cscript src=\"dist/filebrowser.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"stylesheet\" href=\"dist/filebrowser.css\"\u003e\n    ```\n\n    or from a CDN:\n\n    ```html\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/dealfonso/jsfb/dist/filebrowser.min.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/dealfonso/jsfb/dist/filebrowser.min.css\"\u003e\n    ```\n\n2. Create a container for the file browser:\n\n    ```html\n    \u003cdiv class=\"fb-filebrowser\"\u003e\u003c/div\u003e\n    ```\n\n3. Create a new instance of the file browser and add files to it:\n\n    ```javascript\n    let fb = new FileBrowser('.fb-filebrowser');\n    fb.addFile({\n        name: 'file1.txt',\n        size: 1024,\n        date: new Date()\n    });\n    ```\n\n## Dependencies\n\nThis library sets the icons for the files and folders by means o `\u003ci\u003e` elements with the classes of external libraries. In particular, the instances of the `FileBrowser` need a dictionary that converts the extensions of the files to the classes of the icons, but also need to define the default icon for the files that do not have a known extension, and the folders. These properties are defined in the `options` object of the `FileBrowser` instances:\n\n```javascript\n{\n    extensionToIcon: {\n        'txt': 'fas fa-file-alt',\n        'pdf': 'fas fa-file-pdf',\n        'doc': 'fas fa-file-word',\n        'docx': 'fas fa-file-word',\n        'xls': 'fas fa-file-excel',\n        ...\n    },\n    defaultFileIcon: 'fas fa-file',\n    defaultFolderIcon: 'fas fa-folder'\n}\n```\n\nThe library has a static property `FileBrowser.iconUtils` that provides a set of functions and default dictionaries for the files and folders. These functions and values are based on the classes of the [Font Awesome](https://fontawesome.com/) library and the [Boostrap Icons](https://icons.getbootstrap.com/) library.\n\n```javascript\nstatic iconUtils = {\n    extensionToIconFontAwesome: {\n        'txt': 'fas fa-file-alt',\n        'pdf': 'fas fa-file-pdf',\n        'doc': 'fas fa-file-word',\n        'docx': 'fas fa-file-word',\n        'xls': 'fas fa-file-excel',\n        ...\n    },\n    defaultFileIconFontAwesome: 'fas fa-file',\n    defaultFolderIconFontAwesome: 'fas fa-folder',\n    extensionToIconBootstrap: {\n        'txt': 'bi bi-file-earmark-text',\n        'pdf': 'bi bi-file-earmark-pdf',\n        'doc': 'bi bi-file-earmark-word',\n        'docx': 'bi bi-file-earmark-word',\n        'xls': 'bi bi-file-earmark-excel',\n        ...\n    },\n    defaultFileIconBootstrap: 'bi bi-file-earmark',\n    defaultFolderIconBootstrap: 'bi bi-folder'\n}\n```\n\nThe library uses the Font Awesome classes by default:\n\n```javascript\nstatic defaultOptions = {\n    ...\n    extensionToIcon: FileBrowser.iconUtils.extensionToIconFontAwesome,\n    defaultFileIcon: FileBrowser.iconUtils.defaultFileIconFontAwesome,\n    defaultFolderIcon: FileBrowser.iconUtils.defaultFolderIconFontAwesome\n    ...\n}\n```\n\nIf you want to use the Bootstrap Icons classes, you can change the `FileBrowser.defaultOptions` static property to use the Bootstrap Icons classes, or set the corresponding values in the `options` object of the `FileBrowser` instance.\n\nThe `FileBrowser.iconUtils` static property provides a set of functions to use the Font Awesome or the Bootstrap Icons classes:\n\n```javascript\nFileBrowser.iconUtils.useBootstrapIcons();\nFileBrowser.iconUtils.useFontAwesomeIcons();\n```\n\n### Using own icons\n\nIf you want to use a different font for the icons, you can provide a custom dictionary for the property `extensionToIcon` in the `defaultOptions` object of the `FileBrowser` class, and/or provide the `defaultFileIcon` and `defaultFolderIcon` properties.\n\n```javascript\nFileBrowser.defaultOptions.extensionToIcon = {\n    'txt': 'my-icon-txt',\n    'pdf': 'my-icon-pdf',\n    'doc': 'my-icon-doc',\n    'docx': 'my-icon-doc',\n    'xls': 'my-icon-xls',\n    ...\n},\nFileBrowser.defaultOptions.defaultFileIcon = 'my-icon-file',\nFileBrowser.defaultOptions.defaultFolderIcon = 'my-icon-folder'\n```\n\nMoreover, you can use a different dictionary for each instance of the `FileBrowser` by setting the properties `extensionToIcon`, `defaultFileIcon` and `defaultFolderIcon` in the `options` object when creating the `FileBrowser` instance.\n\n```javascript\nlet fb = new FileBrowser('.fb-filebrowser', {\n    extensionToIcon: {\n        'txt': 'my-icon-txt',\n        'pdf': 'my-icon-pdf',\n        'doc': 'my-icon-doc',\n        'docx': 'my-icon-doc',\n        'xls': 'my-icon-xls',\n        ...\n    },\n    defaultFileIcon: 'my-icon-file',\n    defaultFolderIcon: 'my-icon-folder'\n});\n```\n\nAlternatively, if you want to use your own icon for the folders or files, you can provide a custom icon when creating the file or the folder (e.g. `addFolder(\"myfolder\", { icon: 'fas fa-folder' })`).\n\n## Using the `filebrowser` in a web application\n\nThe `filebrowser` is a class that can be used to create a file browser in a web application. It is intended to be used in conjunction with a back end that provides the files and enables to interact with them.\n\n### Declarative usage\n\nIf is possible to create a simple file browser with files in it by using the declarative way:\n\n```html\n\u003cdiv class=\"fb-filebrowser\" data-fb-mode=\"grid\"\u003e\n    \u003cfb-file\u003efile1.docx\u003c/fb-file\u003e\n    \u003cfb-file\u003efile2.pdf\u003c/fb-file\u003e\n    \u003cfb-file\u003efile3.txt\u003c/fb-file\u003e\n    \u003cfb-file\u003efile4.xls\u003c/fb-file\u003e\n\u003c/div\u003e\n```\n\nThis example will produce a content like this:\n\n![Basic file browser](img/example-basic.png)\n\nThis example can be seen in [Codepen - jsfb-basic-example](https://codepen.io/dealfonso/pen/gbYgqzO).\n\n#### The `fb-filebrowser` element\n\nThe `fb-filebrowser` element is the container of the file browser. It can have the following attributes:\n\n- `data-fb-mode`: The mode of the file browser (\"list\", \"grid\" or \"preview\").\n- `data-fb-order-column`: The column to order the files by (\"filename\", \"size\", \"date\" or \"type\").\n- `data-fb-order-ascending`: The order of the files (true = ascending, false = descending).\n- `data-fb-hide-zero-size`: Whether to hide the size from zero size files (only the size will be hidden, the file will still be shown). The default value is `true`.\n- `data-fb-allow-duplicates`: Whether to allow duplicate files (files with the same name). The default value is `false`. In case that a file with the same name is added, an exception will be thrown.\n- `data-fb-separate-folders-from-files`: Whether to separate the folders from the files. If `true`, the files will always be shown before any other file. The default value is `true`.\n- `data-fb-on-file-click`: A function to be called when a file is clicked.\n- `data-fb-on-file-double-click`: A function to be called when a file is double clicked. \n- `data-fb-on-html-created`: A function to be called when the html element that represents the file is created.\n\nAnd a set of callbacks that will be used to create a context menu for the files:\n\n- `data-fb-on-file-download`: A function to be called when the option \"Download\" is selected in the default context menu.\n- `data-fb-on-file-delete`: A function to be called when the option \"Delete\" is selected in the default context menu.\n- `data-fb-on-file-rename`: A function to be called when the option \"Rename\" is selected in the default context menu.\n- `data-fb-on-file-copy`: A function to be called when the option \"Copy\" is selected in the default context menu.\n- `data-fb-on-file-move`: A function to be called when the option \"Move\" is selected in the default context menu.\n- `data-fb-on-file-share`: A function to be called when the option \"Share\" is selected in the default context menu.\n- `data-fb-on-file-info`: A function to be called when the option \"Info\" is selected in the default context menu.\n\n\u003e Each callback is a _javascript_ code that will be evaluated in the context of the file browser, and the `file` variable is available. The code is evaluated in the context of the file browser, so the `this` variable is available.\n\n#### The `fb-file` element\n\nEach `fb-file` element will be converted to a file in the file browser. The possible attributes for the `fb-file` element are:\n\n- `data-fb-filename`: The name of the file (if ommited, the content of the element will be used).\n- `data-fb-size`: The size of the file in bytes.\n- `data-fb-modified`: The date when the file was modified (either a valid string containing a date or a timestamp).\n- `data-fb-is-directory`: Whether the file is a directory or not.\n- `data-fb-type`: A string representing the type of the file (if ommited, the type will be determined by the extension of the file).\n- `data-fb-preview-url`: An URL to an image to be used as a preview of the file.\n- `data-fb-icon`: A class expression to be used as the icon of the file (if ommited, the icon will be determined by the type of the file).\n- `data-fb-data`: A custom data string to be appended to the file.\n\n#### Full featured example\n\nUsing the fields of both `fb-filebrowser` and `fb-file` element, it is possible to create a full featured file browser with a set of files that can be clicked to be selected or double clicked to be opened in a new window:\n\n```html\n\u003cdiv class=\"fb-filebrowser\" data-fb-mode=\"grid\" data-fb-on-file-click=\"file.toggleSelect()\" data-fb-on-file-double-click=\"if (file.data !== null) window.open(file.data)\"\u003e\n  \u003cfb-file data-fb-size=\"15000\" data-fb-modified=\"2016-11-01 12:01\" data-fb-data=\"https://file-examples.com/wp-content/storage/2017/02/file-sample_500kB.docx\"\u003efile1.docx\u003c/fb-file\u003e\n  \u003cfb-file data-fb-size=\"25000\"  data-fb-modified=\"2023-02-12 11:05\" data-fb-data=\"https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf\"\u003efile2.pdf\u003c/fb-file\u003e\n  \u003cfb-file data-fb-size=\"115000\" data-fb-modified=\"2024-01-08 21:37\" data-fb-data=\"https://examplefile.com/file-download/19\"\u003efile3.txt\u003c/fb-file\u003e\n  \u003cfb-file data-fb-size=\"1500000\" data-fb-modified=\"2024-10-12 19:12\" data-fb-data=\"https://examplefile.com/file-download/564\"\u003efile4.xlsx\u003c/fb-file\u003e\n\u003c/div\u003e\n```\n\nThe result will be similar to this:\n\n![Extended file browser](img/example-basic-extended.png)\n\nFeatures:\n- The file browser is in grid mode.\n- There are callbacks for the click and double click events.\n- The files can be clicked to be selected.\n- The files can be double clicked to be opened in a new window.\n- The files have a custom data that is used to open the file in a new window.\n\nThis example can be seen in [Codepen - jsfb-basic-extended](https://codepen.io/dealfonso/pen/VYZPJEj).\n\n### Programmatic usage\n\nThe preferred mechanism to us the `filebrowser` is by means of the `FileBrowser` class.\n\nTo use it, you need to create a placeholder in the html:\n\n```html\n\u003cdiv class=\"fb-filebrowser\"\u003e\u003c/div\u003e\n```\n\nAnd then, whenever you need to access the file browser, you can create a new instance of the `FileBrowser` class:\n\n```javascript\nlet fb = new FileBrowser(document.querySelector('.fb-filebrowser'), {\n  mode: \"grid\",\n  onFileClick: \"file.toggleSelect()\",\n  onFileDoubleClick: \"if (file.data !== null) window.open(file.data)\"\n});\n```\n\nAnd now you can add files to the file browser:\n\n```javascript\nfb.addFile(\"file1.docx\", 15000, \"2016-11-01 12:01\", { data: \"https://file-examples.com/wp-content/storage/2017/02/file-sample_500kB.docx\"});\nfb.addFile(\"file2.pdf\", 25000, \"2023-02-12 11:05\", { data: \"https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf\"});\nfb.addFile(\"file3.txt\", 115000, \"2024-01-08 21:37\", { data: \"https://examplefile.com/file-download/19\"});\nfb.addFile(\"file4.xls\", 1500000, \"2024-10-12 19:12\", { data: \"https://examplefile.com/file-download/564\"});\n```\n\nThe result will be similar to the previous example. And you can see it in [Codepen - jsfb-programmatic-extended](https://codepen.io/dealfonso/pen/Wbepwyx).\n\n\u003e Creating a new instance of the `FileBrowser` for an existing element will simply retrieve the instance of the file browser that is associated with the element. This takes advantage of the \"[return overriding](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties#returning_overriding_object)\" feature of the JavaScript classes.\n\nThe `options` object can have the following properties:\n\n- `mode`: The mode of the file browser (\"list\", \"grid\" or \"preview\").\n- `orderColumn`: The column to order the files by (\"filename\", \"size\", \"date\" or \"type\").\n- `orderAscending`: The order of the files (true = ascending, false = descending).\n- `hideZeroSize`: Whether to hide the size from zero size files (only the size will be hidden, the file will still be shown). The default value is `true`.\n- `allowDuplicates`: Whether to allow duplicate files (files with the same name). The default value is `false`. In case that a file with the same name is added, an exception will be thrown.\n- `separateFoldersFromFiles`: Whether to separate the folders from the files. If `true`, the files will always be shown before any other file. The default value is `true`.\n- `enableSelection`: Whether to enable the selection of the files or not. The default value is `true`.\n- `allowMultipleSelection`: If selection is enabled, whether to allow multiple selection or not. The default value is `true`.\n- `onFileClick`: A function to be called when a file is clicked `(file) =\u003e {}`.\n- `onFileDoubleClick`: A function to be called when a file is double clicked `(file) =\u003e {}`.\n- `onSelectionUpdate`: A function to be called when the selection is updated `(files) =\u003e {}`.\n- `onHtmlCreated`: A function to be called when the html element that represents the file is created `(htmlElement, file, mode) =\u003e {}`.\n- `overlayGenerator`: Is a function whose aim is to generate a \"toolbar\" for the file, which will be overlayed to the grid or the preview file element. The prototype is `(file) =\u003e {}` and it should return an html element that will be overlayed to the file element.\n- `extensionToIcon`: Is a dictionary with the keys being the extension (without the dot), and the value being a css string to be used as the class of the icon for the file. There is a default value dictionary (`FileBrowser.extensionToIcon`) which is based on the classes of the [Font Awesome](https://fontawesome.com/) library.\n- `customContextMenu`: A dictionary with the keys being the labels for the actions of the context menu and the values, the callback to use `(file) =\u003e {}` when the option is selected.\n  \u003e If a custom context menu is provided, the default context menu will not be shown.\n\nAnd a set of callbacks that will be used to create a default context menu for the files:\n\n- `onFileDownload`, `onFileDelete`,`onFileRename`, `onFileCopy`, `onFileMove`, `onFileShare`, `onFileInfo`: A function to be called when the option is selected in the default context menu `(file) =\u003e {}`.\n\n### Changing the view\n\nThe file browser can be shown in three different views: list, grid and preview. The view can be changed by calling the `render` method of the file browser:\n\nIn the previous example, we can add some buttons to change from one view to another:\n\n```html\n\u003cbutton onclick=\"fb.render('list')\"\u003e\u003ci class=\"fas fa-list-ul\"\u003e\u003c/i\u003e List\u003c/button\u003e\n\u003cbutton onclick=\"fb.render('grid')\"\u003e\u003ci class=\"fas fa-table-cells\"\u003e\u003c/i\u003e Grid\u003c/button\u003e\n\u003cbutton onclick=\"fb.render('preview')\"\u003e\u003ci class=\"fas fa-table-cells-large\"\u003e\u003c/i\u003e Preview\u003c/button\u003e\n```\n\nYou can see it in [Codepen - jsfb-programmatic-extended](https://codepen.io/dealfonso/pen/Wbepwyx).\n\n### API\n\nThe `FileBrowser` class has the following methods:\n\n- `addFile(filename, size, modified, options)`: Adds a file to the file browser, by providing its basic data\n    - `filename`: The name of the file.\n    - `size`: The size of the file in bytes.\n    - `modified`: The date when the file was modified (it can be a Date object, a string or a number); null means that the file modification date is unknown.\n    - `options`: An object with the options for the file. _See below for more information_.\n    \n- `addFolder(foldername, modified, options)`: Adds a folder to the file browser, by providing its basic data\n    - `foldername`: The name of the folder.\n    - `modified`: The date when the folder was modified (it can be a Date object, a string or a number); null means that the folder modification date is unknown.\n    - `options`: An object with the options for the folder. _See below for more information_.\n\n- `updateFile(file, options)`: Updates the file in the file browser.\n    - `file`: The file to update.\n    - `options`: An object with the options for the file. _See below for more information_.\n        - __*__ In case that wanted to update the size or the modified date of the file, it is possible to provide the `size` and `modified` properties in the `options` object.\n\n- `updateFolder(folder, options)`: Updates the folder in the file browser.\n    - `folder`: The folder to update.\n    - `options`: An object with the options for the folder. _See below for more information_.\n        - __*__ In case that wanted to update the modified date of the folder, it is possible to provide the `modified` property in the `options` object.\n\n- `findFile(filename)`: Finds a file or folder in the file browser by its name.\n    - `filename`: The name of the file to find.\n\n- `findFiles(filter)`: Finds a set of files or folders in the file browser by a filter.\n    - `filter`: A bash-like filter to find the files or folders.\n\n- `removeFile(file)`: Removes a file from the file browser.\n    - `file`: The file to remove (it can be a file object or a string with the name of the file).\n\n- `forEachFile(callback)`: Iterates over the files of the file browser.\n    - `callback`: A function to be called for each file `(file) =\u003e {}`.\n\n- `sort(column, ascending)`: Sorts the files of the file browser by a column.\n    - `column`: The column to sort the files by (\"filename\", \"size\", \"modified\" or \"type\").\n    - `ascending`: The order of the files (true = ascending, false = descending).\n    __*__ This function re-renders the files in the file browser.\n\n- `render(mode)`: Renders the files of the file browser in a mode.\n    - `mode`: The mode of the file browser (\"list\", \"grid\" or \"preview\").\n    __*__ If the mode is not provided, the current mode of the file browser will be used.\n\n- `clear()`: Clears the files of the file browser.\n\n- `getSelectedFiles()`: Gets the selected files of the file browser.\n\n- `clearSelection()`: Clears the selection of the file browser.\n\n- `getFiles()`: Gets the files of the file browser.\n\n**Note**: The `options` object can have the following properties:\n- `icon`: a class expression to be used as the icon of the file (if ommited, the icon will be determined by the type of the file).\n- `type`: The type of the file. If ommited, the type will be determined by the extension of the file or set to _folder_ in case the file is a directory.\n- `previewUrl`: The URL of the preview of the file. If ommited, the preview will not be shown.\n- `data`: A custom data string to be appended to the file or folder.\n- `showFirst`: If the file has to be shown first than others (for example, the '..' folder). If true, the file will be shown in the first group.\n- `onFileClick`: A function to be called when the file is clicked. If ommited, the `onFileClick` callback of the file browser will be used.\n- `onFileDoubleClick`: A function to be called when the file is double clicked. If ommited, the `onFileDoubleClick` callback of the file browser will be used.\n- `contextMenu`: A custom context menu for the file (if ommited, the default context menu will be used). __(*) See the \"context menu\" section for more information__.\n  \n### Context menu\n\nThe context menu is a set of actions that can be performed on a file. It is shown with three dots on the right side of the file like this:\n\n![Context menu](img/context-menu.png)\n\nThe default context menu for the file browser can be customized by providing some callbacks in the `options` object of the `FileBrowser` instance. The default context menu has the following actions:\n\n- `onFileDownload`: A function to be called when the option \"Download\" is selected in the default context menu.\n- `onFileDelete`: A function to be called when the option \"Delete\" is selected in the default context menu.\n- `onFileRename`: A function to be called when the option \"Rename\" is selected in the default context menu.\n- `onFileCopy`: A function to be called when the option \"Copy\" is selected in the default context menu.\n- `onFileMove`: A function to be called when the option \"Move\" is selected in the default context menu.\n- `onFileShare`: A function to be called when the option \"Share\" is selected in the default context menu.\n- `onFileInfo`: A function to be called when the option \"Info\" is selected in the default context menu.\n\nEach callback is a function or a string of _javascript_ code that will be evaluated in the context of the file browser, and the `file` variable is available. The code is evaluated in the context of the file browser, so the `this` variable is available.\n\nIt is possible to provide a custom context menu (either for the whole `FileBrowser` instance or for a particular file) by providing a `contextMenu` property in the `options` object. The `contextMenu` property is a dictionary with the keys being the labels for the actions of the context menu and the values, the callback to use `(file) =\u003e {}` when the option is selected.\n\nFor example, the following code creates a custom context menu for the file browser:\n\n```javascript\nlet fb = new FileBrowser('.fb-filebrowser', {\n    contextMenu: {\n        'Download': (file) =\u003e { window.open(file.data) },\n        'Info': (file) =\u003e { alert(`The file ${file.name} has a size of ${file.size} bytes`) }\n    }\n});\n```\n\nFor a more complex case, the values of the `contextMenu` dictionary can be objects with the following properties:\n\n- `label`: The label of the action.\n- `icon`: The icon of the action.\n- `callback`: The callback to be called when the action is selected.\n\nFor example, the following code creates a custom context menu for the file browser with icons:\n\n```javascript\nlet fb = new FileBrowser('.fb-filebrowser', {\n    contextMenu: {\n        'Download': {\n            label: 'Download',\n            icon: 'fas fa-download',\n            callback: (file) =\u003e { window.open(file.data) }\n        },\n        'Info': {\n            label: 'Info',\n            icon: 'fas fa-info',\n            callback: (file) =\u003e { alert(`The file ${file.name} has a size of ${file.size} bytes`) }\n        }\n    }\n});\n```\n\n## Styling\n\n### Grid mode\n\nIn the grid mode, the default behavior is to show 2 files per row (i.e. `fb-grid-2`). This can be changed by using the classes:\n\n- `fb-grid-1`, `fb-grid-2`, `fb-grid-3`, `fb-grid-4`, `fb-grid-5`, `fb-grid-6`, `fb-grid-7`, `fb-grid-8`: To show one, two, three, four, five, six, seven or eight files per row.\n\nIt is also possible to change the amount of files per row depending on the screen size by using the classes:\n\n- From `fb-grid-1` to `fb-grid-8`: To set the amount of files per row for all screens.\n- From `fb-grid-xs-1` to `fb-grid-xs-8`: To set the amount of files per row for extra small screens (e.g. smartphones).\n- From `fb-grid-sm-1` to `fb-grid-sm-8`: To set the amount of files per row for small screens.\n- From `fb-grid-md-1` to `fb-grid-md-8`: To set the amount of files per row for medium screens.\n- From `fb-grid-lg-1` to `fb-grid-lg-8`: To set the amount of files per row for large screens.\n- From `fb-grid-xl-1` to `fb-grid-xl-8`: To set the amount of files per row for extra large screens.\n\nYou can get distributions like in the next image, depending on the screen size:\n\n![Grid mode 6](img/grid-mode-6.png)\n\nor like this:\n![Grid mode 4](img/grid-mode-4.png)\n\nJust by using the classes:\n\n```html\n\u003cdiv class=\"fb-filebrowser fb-grid-2 fb-grid-md-4 fb-grid-lg-6\"\u003e\n\u003c/div\u003e\n```\n\n### Preview mode\n\nIn the preview mode, the default behavior is to show the preview of the file in a size of 288 pixels. But it is possible to change the size of the preview by using the classes:\n\n- `fb-preview-big`: To show the preview in a size of 432px.\n- `fb-preview-bigger`: To show the preview in a size of 576px.\n\nMoreover, it is possible to change the size of the preview depending on the screen size by using the classes:\n\n- `fb-preview-sm-big`, `fb-preview-sm-bigger`: To set the size of the preview for small screens.\n- `fb-preview-md-big`, `fb-preview-md-bigger`: To set the size of the preview for medium screens.\n- `fb-preview-lg-big`, `fb-preview-lg-bigger`: To set the size of the preview for large screens.\n- `fb-preview-xl-big`, `fb-preview-xl-bigger`: To set the size of the preview for extra large screens.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdealfonso%2Fjsfb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdealfonso%2Fjsfb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdealfonso%2Fjsfb/lists"}