How to size and position preview file in MDBFileupload?


Topic: How to size and position preview file in MDBFileupload?

Two Aow pro premium priority asked 2 years ago

Expected behavior I expect to be able to size and position the image preview Actual behavior I can't figure out how to size or position the image preview in the MDBFileupload component or ancestor MDBCol/MDBRow Resources (screenshots, code snippets etc.)

<MDBRow
      style={{ border: "1px dashed" }}
      className="d-flex justify-content-center align-items-center"
    >
      <MDBCol md="12" sm="12">
        <MDBFileupload
          id="imgFeaturedPost"
          getValue={handleBannerImageChange}
          maxFileSize="1M"
          maxSizeError="File Size must be less than 1Mb"
          messageDefault="Drop 1600px X 400px image for Blog Post Banner."
          messageError="We were unable to process the file"
          allowedFileExtensions={["jpg", "jpeg", "png", "webp"]}
          style={{
            height: "400px",
          }}
        />
      </MDBCol>
    </MDBRow>

preview image not centered in MDBFileupload or ancestor


Here is the class responsible for displaying the preview: .file-upload-preview-img. You can try to add your custom styles to this img.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 4.2.0
  • Device: Mac
  • Browser: Chrome
  • OS: Monterey
  • Provided sample code: No
  • Provided link: No