Customize the Size of Lightning-File-Upload

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?

Answer

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>

Attribution
Source : Link , Question Author : Max , Answer Author : Nikita Ermak

Leave a Comment