Fix calls to the component server so that gr.FileExplorer works on …

…Spaces (#5816)

* changes

* add changeset

* changes

* demo

* file explorer

* lint

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/seven-months-divide.md

@@ -0,0 +1,6 @@
+---
+"@gradio/client": patch
+"gradio": patch
+---
+
+fix:Fix calls to the component server so that `gr.FileExplorer` works on Spaces

client/js/src/client.ts

@@ -743,7 +743,11 @@ export function api_factory(
 				if (component?.props?.root_url) {
 					root_url = component.props.root_url;
 				} else {
-					root_url = `${http_protocol}//${host + config.path}/`;
+					root_url = `${http_protocol}//${resolve_root(
+						host,
+						config.path,
+						true
+					)}/`;
 				}
 				const response = await fetch_implementation(
 					`${root_url}component_server/`,

client/js/src/utils.ts

@@ -7,7 +7,7 @@ import type { Config } from "./types.js";
  * Gradio apps on Hugging Face Spaces.
  * @param {string} base_url The base URL at which the Gradio server is hosted
  * @param {string} root_path The root path, which could be a path suffix (e.g. mounted in FastAPI app) or a full URL (e.g. hosted on Hugging Face Spaces)
- * @param {boolean} prioritize_base Whether to prioritize the base URL over the root path. This is used when both the base path and root paths are full URLs. For example, for fetching files the root path should be prioritized, but for making request, the base URL should be prioritized.
+ * @param {boolean} prioritize_base Whether to prioritize the base URL over the root path. This is used when both the base path and root paths are full URLs. For example, for fetching files the root path should be prioritized, but for making requests, the base URL should be prioritized.
  * @returns {string} the resolved URL
  */
 export function resolve_root(

demo/file_explorer_component/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: file_explorer_component"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr \n", "\n", "with gr.Blocks() as demo:\n", "    gr.FileExplorer()\n", "\n", "demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/file_explorer_component/run.py

@@ -0,0 +1,6 @@
+import gradio as gr 
+
+with gr.Blocks() as demo:
+    gr.FileExplorer()
+
+demo.launch()

gradio/components/file_explorer.py

@@ -24,7 +24,7 @@
 @document()
 class FileExplorer(Changeable, IOComponent, JSONSerializable):
     """
-    Creates a file component that allows uploading generic file (when used as an input) and or displaying generic files (output).
+    Creates a file explorer component that allows users to browse and select files on the machine hosting the Gradio app.
     Preprocessing: passes the selected file or directory as a {str} path (relative to root) or {list[str}} depending on `file_count`
     Postprocessing: expects function to return a {str} path to a file, or {List[str]} consisting of paths to files.
     Examples-format: a {str} path to a local file that populates the component.