5

I would like to customize the size of the lightning-file-upload so that the 'dotted'/drag-n-drop area is larger. I don't see any documentation on changing that. Here is an example of what I am referring too:

HTML:

           <lightning-file-upload
                    label="Attach receipt"
                    name="fileUploader"
                    accept={acceptedFormats}
                    record-id={recordId}
                    onuploadfinished={handleUploadFinished}
                    multiple
                    >
            </lightning-file-upload>

Image/Result:

enter image description here

But I would like it to look something like this, if not larger:

enter image description here

This image was obtained Here, but I don't see any documentation on how to handle the upload in JS.

Has anyone been able to manipulate the lightning-file-upload to make it larger?

Or does anyone know how to handle the JS portion of the file Selector?

2
  • did you find any solution to this?
    – Patlatus
    Feb 16, 2021 at 12:52
  • @patlatus I have not unfortunately
    – Max
    Feb 16, 2021 at 22:58

2 Answers 2

1

The same approach using Static Resources but having better CSS:

JavaScript:

import {loadStyle} from 'lightning/platformResourceLoader'; 
import fileSelectorStyles from '@salesforce/resourceUrl/fileSelectorStyles';

export default class UploadFileClass extends LightningElement {

    renderedCallback() {
        Promise.all([
            loadStyle(this, fileSelectorStyles)
        ]);        
    } 
} 

CSS (in Static Resources):

.file-selector-image .slds-file-selector {
    display: block;
}

.file-selector-image .slds-file-selector__dropzone {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: auto;
    padding: 1rem;
}

.file-selector-image .slds-file-selector__dropzone slot {
    width: 100%;
}

.file-selector-image .slds-file-selector_files .slds-file-selector__body {
    display: block;
    text-align: center;
}

.file-selector-image .slds-file-selector_files .slds-file-selector__text {
    margin-top: 0.75rem;
}

HTML:

<lightning-file-upload
          label=""
          name="fileUploader"
          record-id={recordId}
          onuploadfinished={handleUploadFinished}
          multiple
          class="file-selector-image">
  </lightning-file-upload>
0

To increase the size of the lightning-file-upload, the inbuilt CSS classes need to be overriden. The only way to do that is through a CSS uploaded as a static resource. To add the css through static resource: In your JS:

import { loadStyle } from 'lightning/platformResourceLoader';
import customStyle from '@salesforce/resourceUrl/customStyle';

export default class UploadFileClass extends LightningElement {

renderedCallback() {
        Promise.all([
            loadStyle(this, customStyle)
        ]);        
    }
}

In your CSS file:

.fileClass{
  width:100% !important;
}


.fileClass .slds-file-selector{
  width:100% !important;
}

.fileClass .slds-file-selector__dropzone{
  width:100% !important;
}

.fileClass .slds-file-selector__dropzone slot{
  display: inline-block;
  width:100% !important;
  padding-top:2%;
  padding-bottom:2%
}

.fileClass .slds-file-selector__dropzone slot .slds-file-selector__body{
  margin-left: 41% !important;
}

Make sure to add the custom fileClass to your lightning file upload component, so that it does not override the slds class elsewhere. Your html will look like:

<lightning-file-upload name="fileUploader" accept={acceptedFormats}
                    onuploadfinished={handleUploadFinished} class="fileClass">
                </lightning-file-upload>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .