{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: html_upload"]}, {"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", "from pathlib import Path\n", "\n", "with gr.Blocks() as demo:\n", "\n", "    file_uploader = gr.HTML(\n", "        html_template=\"\"\"\n", "        <div>\n", "            <input type=\"file\" id=\"file-input\" accept=\".txt,text/plain\" />\n", "            <button id=\"upload-btn\" style=\"margin-left: 8px;\">Upload</button>\n", "        </div>\n", "        \"\"\",\n", "        js_on_load=\"\"\"\n", "        const input = element.querySelector('#file-input');\n", "        const btn = element.querySelector('#upload-btn');\n", "\n", "        btn.addEventListener('click', async () => {\n", "            const file = input.files[0];\n", "            const { path } = await upload(file);\n", "            props.value = path;\n", "        });\n", "        \"\"\",\n", "        elem_id=\"file_uploader\"\n", "    )\n", "\n", "    view_content_btn = gr.Button(\"View Uploaded File Content\")\n", "    upload_content = gr.Textbox(label=\"Uploaded File Content\")\n", "\n", "    view_content_btn.click(lambda path: Path(path).read_text(), file_uploader, upload_content)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}