dash_uploader breaks use of fontawesome

[mneilly]

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

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

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]

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

[fohrloop]

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]

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]

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