9

I have a FilePond component used to upload files in my React App with the following implementation : 

~~~React.js 

   render() {
    return (
        <div className="App">

           //Pass FilePond properties as attributes
          <FilePond
                      ref={ref => this.pond = ref}
                      files={this.state.files}
                      allowMultiple={false}
                      maxFiles={1}
                      onupdatefiles={(fileItems) => {
                         //add image to database 
                      }
            </FilePond>

~~~

This code renders a nice looking component to let users upload their files.

However I would like to scale up (edit width and height) this component taken from https://pqina.nl/filepond/. Unfortunately I can seem to find a way to do that, can someone please help me ?

Volck
  • 334
  • 6
  • 14

1 Answers1

13

On their documentation they recommend overriding their styles. So you can do the same, just adjust the height of whatever you need to. 

.filepond--root,
.filepond--root .filepond--drop-label {
  height: 200px;
}

See it live!

John Ruddell
  • 25,283
  • 6
  • 57
  • 86
  • 1
    @Volck yep! happy to help! remember you can open the developer console, and look at the elements. find the class names you need to update and then apply the styles to those classes :) – John Ruddell Jun 28 '19 at 22:04
  • Hi. Please look at my question: https://stackoverflow.com/q/58471218/1767712 – meph Oct 20 '19 at 09:50