title: Filepond customize droparea
body: <p>Using filepond I need to customize the filepond droparea, meaning that I need to add some custom HTML with some placeholder images to give an idea to the user about what kind of images should be uploaded and should allow multiple uploads.</p>
  
  <p><a href="https://i.stack.imgur.com/VFGfJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VFGfJ.png" alt="enter image description here"></a></p>
  
  <p>Is there a way to do this?</p>
  
  <p>I tried to add an absolutely positioned conatiner with the placeholders but I can't cover on upload my custom element.</p>
  
  <p>Here is how I'm using Filepond inside react :</p>
  
  <pre><code>...
      return (
        &lt;div className="uploads"&gt;
          &lt;div className="uploads__placeholders"&gt;{placeholderImages}&lt;/div&gt;
          &lt;FilePond
            ref={(ref) =&gt; (this.pond = ref)}
            files={this.state.files}
            labelIdle={""}
            allowMultiple={true}
            maxTotalFileSize={10485760}
            acceptedFileTypes={this.props.acceptedFileTypes}
            labelMaxTotalFileSize={"Total file size should be lesser than 10MB."}
            maxFiles={maxFilesAllowed}
            allowProcess={this.props.process ? this.props.process : true}
            imagePreviewHeight={135}
            //imagePreviewTransparencyIndicator={"grid"}
            server={{...}}
            onremovefile={(file) =&gt; {...}}
            oninit={(t) =&gt; {...}}
            onupdatefiles={(fileItems) =&gt; {...}}
          /&gt;
        &lt;/div&gt;
      );
  ...
  </code></pre>
  
  <p>So I create a custom wrapper and I align with css on top of filepond wrapper but this seems to not be the ideal workaround.</p>