GithubHelp home page GithubHelp logo

Comments (6)

tcbegley avatar tcbegley commented on June 2, 2024 2

Have you considered writing a simple upload form outside of your Dash app that can handle the file uploads, and then having your Dash app itself just focus on processing / reading the data that has been uploaded?

Here's an example:

File structure:

.
├── app.py
└── templates
    └── upload.html

app.py

from pathlib import Path

import dash_bootstrap_components as dbc
import flask
from dash import Dash, html
from werkzeug.utils import secure_filename

UPLOAD_FOLDER = Path(__file__).parent / "uploads"

server = flask.Flask(__name__)
app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP], server=server)

app.layout = html.Div(
    [
        dbc.NavbarSimple(
            [
                dbc.NavLink("Home", href="/", active=True),
                dbc.NavLink("Upload", href="/upload/", external_link=True),
            ],
            brand="Dashboard",
        ),
        dbc.Container(
            html.P("This is the Dash part of the app"),
            className="pt-3",
        ),
    ]
)


@server.route("/upload-file", methods=["POST"])
def handle_uploaded_file():
    if "file" in flask.request.files:
        file = flask.request.files["file"]
        filename = secure_filename(file.filename)
        file.save(UPLOAD_FOLDER / filename)
    return flask.redirect("/")


@server.route("/upload/")
def render_upload_page():
    return flask.render_template("upload.html")


if __name__ == "__main__":
    UPLOAD_FOLDER.mkdir(parents=True, exist_ok=True)
    app.run_server(debug=True)

upload.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
    <title>Upload</title>
  </head>
  <body>
    <nav color="light" class="navbar navbar-expand-md navbar-light bg-light">
      <div class="container">
        <span class="navbar-brand">Dashboard</span>
        <div class="ms-auto navbar-nav">
          <a href="/" class="nav-link">Home</a>
          <a href="/upload/" class="nav-link active">Upload</a>
        </div>
      </div>
    </nav>
    <div class="container pt-3">
      <form action="/upload-file" method="POST" enctype="multipart/form-data">
        <div class="mb-3">
          <label for="formFile" class="form-label">Upload a file to the server</label>
          <input class="form-control" type="file" name="file" id="formFile" />
        </div>
        <input type="submit" class="btn btn-primary" value="Upload" />
      </form>
    </div>
  </body>
</html>

from dash-bootstrap-components.

tcbegley avatar tcbegley commented on June 2, 2024

Hi @slyin87

The main reason this isn't supported is because there's no established pattern for doing this in Dash.

dcc.Upload reads the file into memory on the client side and then exposes the data to callbacks that way. A conventional file upload via form submission will transmit the file to the server, but that requires writing an endpoint and handling things appropriately. Since this library is only front-end components it's not super clear how we can support it without causing confusion for people.

How would this feature ideally work in your opinion if it were implemented?

from dash-bootstrap-components.

slyin87 avatar slyin87 commented on June 2, 2024

@tcbegley thanks for replying. I want to upload huge files such as pptx or docx into a persistent volume and is kept in there for sometime. I tried using dcc.Upload but it has to translate into binary first. The dash-uploader is a component that directly stores those files into the server volume but the feature is limited and not flexible to edit.

from dash-bootstrap-components.

AnnMarieW avatar AnnMarieW commented on June 2, 2024

Hi @slyin87

This might be more of a general Dash question, and you could try searching the Dash forum for this topic. Here's one post I found that might be helpful: https://community.plotly.com/t/dcc-upload-to-handle-a-word-docx-file/72218

Here's more information about posting to the forum: https://community.plotly.com/t/how-to-get-your-questions-answered-on-the-plotly-forum/40551

from dash-bootstrap-components.

slyin87 avatar slyin87 commented on June 2, 2024

Hi @AnnMarieW yeah the thing is I don't want to read any doc. I just want to store it. Plus I want to avoid the html5 file api converting the file into bytes.

from dash-bootstrap-components.

slyin87 avatar slyin87 commented on June 2, 2024

@tcbegley thanks for the suggestion. :) Will try it.

from dash-bootstrap-components.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.