Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dash_uploader breaks use of fontawesome #91

Open
mneilly opened this issue May 27, 2022 · 4 comments
Open

dash_uploader breaks use of fontawesome #91

mneilly opened this issue May 27, 2022 · 4 comments

Comments

@mneilly
Copy link

mneilly commented May 27, 2022

I was happy to find dash-uploader after running into the file size limit for dcc.Upload. Thank you for all the effort!

I'm using fontawesome for various buttons on my site. When I use dash-uploader the fonts break however. The following displays the fonts correctly:

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
#import dash_uploader

FONT_AWESOME = "https://use.fontawesome.com/releases/v6.1.1/css/all.css"

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, FONT_AWESOME])
app.layout = dbc.Container([
    dcc.Store("upload-event"),
    dbc.Button(class_name="fas fa-pen"),
    dbc.Button(class_name="fas fa-plus"),
    dbc.Button(class_name="fas fa-trash-can"),
    dbc.Button(class_name="fas fa-arrow-up"),
    dbc.Button(class_name="fas fa-arrow-down"),
    # du_upload,
    html.Div(id="callback-output")
])
app.run_server(debug=True)

as

image

but uncommenting the import for dash_uploader causes them to be rendered incorrectly as follows:

image

This is with dash 2.4.1 and dash-uploader 0.7.0a1.

If I go into devtools in the browser and delete the style block for button.css the fonts come back and the upload styling appears to be intact. Dash Bootstrap Components is already including Bootstrap 5 as well.

@mneilly
Copy link
Author

mneilly commented May 27, 2022

Oops, this appears to be a duplicate of #43.

@fohrloop
Copy link
Owner

Thanks for the detailed info! This is definitely something that should be fixed. Even if this is similar than Issue 45, I'm happy that you provided the details.

@mneilly
Copy link
Author

mneilly commented May 28, 2022

If remove the button.css and progressbar.css files and their associated imports in Upload_ReactComponent.react.js and rebuild the package the following both work for me:

Using html components:

from dash import Dash, html, Output
import dash_uploader as du

FONT_AWESOME = "https://use.fontawesome.com/releases/v6.1.1/css/all.css"
BOOTSTRAP = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

app = Dash(external_stylesheets=[BOOTSTRAP, FONT_AWESOME])

du_upload = du.Upload(id="du-upload")
du.configure_upload(app, r"/tmp/uploads")


@du.callback(
    output=Output("callback-output", "children"),
    id="du-upload",
)
def callback_on_completion(status):
    return html.Ul([html.Li(str(x)) for x in status.uploaded_files])


app.layout = html.Div([
    html.Button(className="fas fa-pen"),
    html.Button(className="fas fa-plus"),
    html.Button(className="fas fa-trash-can"),
    html.Button(className="fas fa-arrow-up"),
    html.Button(className="fas fa-arrow-down"),
    du_upload,
    html.Div(id="callback-output")
])
app.run_server(debug=True)

Using dash bootstrap components:

from dash import Dash, html, Output
import dash_bootstrap_components as dbc
import dash_uploader as du

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME])

du_upload = du.Upload(id="du-upload")
du.configure_upload(app, r"/tmp/uploads")


@du.callback(
    output=Output("callback-output", "children"),
    id="du-upload",
)
def callback_on_completion(status):
    return html.Ul([html.Li(str(x)) for x in status.uploaded_files])


app.layout = dbc.Container([
    dbc.Button(class_name="fas fa-pen"),
    dbc.Button(class_name="fas fa-plus"),
    dbc.Button(class_name="fas fa-trash-can"),
    dbc.Button(class_name="fas fa-arrow-up"),
    dbc.Button(class_name="fas fa-arrow-down"),
    du_upload,
    html.Div(id="callback-output")
])
app.run_server(debug=True)

@theaaron123
Copy link

It would be good if an argument to disable CSS could be provided as I have the same problem with it overriding the styling for the whole dash app.

I followed @mneilly and removed the .css and import, if anyone doesnt want to modify and build themselves they can add this to their requirements.txt -e git+https://github.com/theaaron123/[email protected]#egg=dash-uploader or pip install

bearing in mind its cut from stable (0.6) not 0.7 (dev) as name suggests

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants