Use FileBrowser in sidebar to select a file for a plugin tab

chof · August 13, 2022, 9:37am

In the following plug-in (Autoprint - GitHub - chof747/octoprint-autoprint) the user can select a file in any folder to schedule for later printing. Currently the selection of the file works via two drop down menus (one to select the folder the other one to select the file in that folder). I wonder if there is the opportunity to use (a) the file browser in the sidebar or (b) to invoke a kind of a file selection dialog in the web interface.

a. Direct interaction with the sidebar file browser could e.g. be done simply by catching the click or selection event of the browser, when the user clicks on a file name or by adding an extra mini button to the file entry. - Are there any hooks or api calls available?

b. Is there an existing dialog window that brings up the file browser and allows selection of a specific file? Or is there access to the file browser component that I can mesh up into such a dialog?

Thanks in advance
Christian

b-morgan · August 13, 2022, 1:09pm

There must be because the plugin, Arc-Welder adds an extra mini button.

jneilliii · August 13, 2022, 3:35pm

This is how I do it in print scheduler plugin.

github.com

jneilliii/OctoPrint-PrintScheduler/blob/a9430c944f63a8ba7f2de388b3380991cd774d3b/octoprint_printscheduler/static/js/printscheduler.js#L60-L68


      
          		$(document).ready(function() {
          			let regex = /<div class="btn-group action-buttons">([\s\S]*)<.div>/mi;
          			let template = '<div class="btn btn-mini" data-bind="click: function() { if ($root.loginState.isUser()) { $root.addToScheduledJobs($data) } else { return; } }, css: {disabled: !$root.loginState.isUser()}" title="Add to Print Scheduler"><i class="fa fa-clock-o"></i></div>';
          
          
			$("#files_template_machinecode").text(function () {
          				return $(this).text().replace(regex, '<div class="btn-group action-buttons">$1	' + template + '></div>');
          			});
                  });
              }

chof · August 13, 2022, 9:22pm

Thanks a lot that does the trick for me.
I used it in the latest release of the autoprint plugin to enable selecting files directly from the file browser on the left side bar.

BR
Christian