Comments (6)
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.
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.
@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.
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.
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.
@tcbegley thanks for the suggestion. :) Will try it.
from dash-bootstrap-components.
Related Issues (20)
- Support tooltips without IDs HOT 3
- [Bug] Console warning on dbc.Tooltip component HOT 3
- Web site is not showing components HOT 5
- Is there a way to use an icon as a label in a dbc.Tab element? HOT 2
- Alert component breaks multi-page navigation HOT 1
- Dash & XLwings. Attempting to pre-load Excel before Dash callback to save load time. HOT 3
- dbc.TextArea n_submit should not increment for Shift+Enter? HOT 3
- Consider Supporting Hyperlinks in Carousel Images HOT 6
- Dropdown presentation in data table doesn't work HOT 1
- Keyword argument for value OR placeholder HOT 2
- BUG: max doesn't work on nested progress bar HOT 3
- Docs app not working with Dash 2.14.0 HOT 3
- Allow icons and html in `dbc.AccordionItem()` title HOT 3
- Remove migration guide in docs
- selected attribute for dbc.Select HOT 1
- `dbc.Checklist` does not accept `label` as `list[Component]` like `dcc.Checklist` does HOT 3
- dash_bootstrap_components version versus python version HOT 5
- Nested tabs in `Offcanvas` component trigger scroll up event on tab change HOT 2
- Tooltip closing race condition with children change callback HOT 10
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dash-bootstrap-components.