CSS classes

[krichelj]

are CSS classes written in files from the assets folder currently supported?

[fohrloop]

Hi @krichelj. Yes, you can use CSS to change the appearance of the dash-uploader component as in Dash apps normally.

For example, this is how running an app copied from the usage.py looks like after adding ./assets/01_mycss.css:

/* assets/01_mycss.css */
.resumable-default  {
    color:red;
}

Thanks for asking this. Seems that this part has been completely undocumented, and I have not even added the option to change the class names in the python wrapper. The full list of supported class names are in the auto-generated Upload_ReactComponent.py and the React source code Upload_ReactComponent.react.js:

"""
- className (string; default 'resumable-default'): Class to add to the upload component by default
- hoveredClass (string; default 'resumable-hovered'): Class to add to the upload component when it is hovered
- disabledClass (string; default 'resumable-disabled'): Class to add to the upload component when it is disabled
- pausedClass (string; default 'resumable-paused'): Class to add to the upload component when it is paused
- completeClass (string; default 'resumable-complete'): Class to add to the upload component when it is complete
- uploadingClass (string; default 'resumable-uploading'): Class to add to the upload component when it is uploading
"""

I haven't checked myself if all of them are in use currently, but at least resumable-default and resumable-hovered are. The class will change whenever the state of the upload component changes. The names are resumable-... since this is initially a fork of the dash-resumable-upload component. Perhaps some day in the future these class names should be changed since this package might migrate from resumable.js to something else.

If you want to control the full appearance of the component (at any state), then you could use the id that you give for the du.Upload() component; that will also be the id of the html component. So, for example using the same usage.py code:

/* assets/01_mycss.css */
#dash-uploader {
    color:blue;
}

I am not a front-end developer myself, and just did a minimal effort to make this package usable. If you or someone has great ideas on what kind of styling API would be good for this, I would happily hear about it.

Hope this helps!

• Niko

UPDATE 2021-04-26

As of v.0.5.0 of dash-uploader, the CSS classes are named with dash-uploader- prefix (rather than the resumable-).

[masaoAshtine]

Hi, @np-8 thanks for the comment! I can't get this to work when I place this in my styles.css file however. Particularly, I am really after how to change the height of the button. The box adjusts with the Div width but I can't seem to change the height, yet I can other styles as seen below (not added into styles.css:

def get_upload_button(id):
    return du.Upload(
        text='Drag and Drop, or Select Files',
        id=id,
        max_file_size=50,  # 50 MB
        filetypes=['csv', 'txt'],
        upload_id=None,
        default_style={
            'width': '80%',
            'height': '50%',
            'border': 'none',
            'textAlign': 'center',
            'background': "#ea8f32",
            'color': 'white',
            'outlineColor': '#ea8f32',
            'font-family': 'Avenir',
            'font-size': '10px',
            'font-weight': '150',
            'border-radius': '10px'
        },
    )

Can you help me to figure out where I am going wrong here?

[fohrloop]

Hi @masaoAshtine, do you want to adjust the height of the button with css or from the python code?

[masaoAshtine]

Thanks for the quick reply @np-8 ! Either really, but when I have tried both methods, I can't seem to get the height of the box to change (occupies all of the Div), only the width and the other attributes that I showed above. Any ideas? Thanks!

[fohrloop]

Hi @masaoAshtine, do you mean the height of the whole div? Did you check the CSS selector of the element you want to modify? For example, I managed to edit the height of the whole element from this:

to this:

with these changes:

to a div element with id dash-uploader. One way to accomplish this would be to put this in your .css:

  div#dash-uploader {
    min-height: auto !important;
    line-height: normal !important;
  }

another way would be to give the minHeight and lineHeight in the default_style dict.

    return du.Upload(
        # .. other settings ..
        default_style={
            'minHeight': 1,
            'lineHeight': 1
        })

[masaoAshtine]

Perfect @np-8, this worked great and was exactly the style attribute that I was looking for but did not seem to find in the documentation, but that certainly could have been my fault!

[fohrloop]

If I read right, the questions on this thread have been answered, so I will close this one. Feel free to reopen, if needed.

[fohrloop]

I just uploaded v.0.5.0 of dash-uploader to PyPI, where I've changed the CSS classes resumable-default, resumable-uploading, .. etc. to be called dash-uploader-default, dash-uploader-uploading, .. etc. Sorry for the inconvenience this backwards incompatible change might cause, but the change was made as the component probably will not use resumable.js in the future, and it's better to unify the parameter names in the early stages of this component (rather than later on).

See the Changelog here.

[masaoAshtine]

Thanks for the update @np-8!