Filepond customize droparea

Question

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.

Is there a way to do this?

I tried to add an absolutely positioned conatiner with the placeholders but I can't cover on upload my custom element.

Here is how I'm using Filepond inside react :

...
    return (
      <div className="uploads">
        <div className="uploads__placeholders">{placeholderImages}</div>
        <FilePond
          ref={(ref) => (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) => {...}}
          oninit={(t) => {...}}
          onupdatefiles={(fileItems) => {...}}
        />
      </div>
    );
...

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.

Answer 1

The key answer is to use the labelIdle with beforeAddFile option, which gives you a way to change the default template HTML, and removing any content you want beforehand. You should add it to your Filepond initialisation.

I'm note sure how to remove the content in react, but a jQuery example would be something like this :

FilePond.parse(document.body);
const inputElement = document.querySelector('#file_upload');

FilePond.registerPlugin(FilePondPluginImagePreview);

const pond = FilePond.create(inputElement, {
  allowMultiple: true,
  imagePreviewHeight: 135,
  labelIdle: `
    <div style="width:100%;height:100%;">
    	<p>
        Drag &amp; Drop your files or <span class="filepond--label-action" tabindex="0">Browse</span><br>
        Some samples to give you an idea :
      </p>
    </div>
    <div class="images" id="allImages">
       <div class="images_child">
          <img src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg">
       </div>
       <div class="images_child">
          <img src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg">
       </div>
       <div class="images_child">
          <img src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg">
       </div>
     </div>
  `,
  beforeAddFile (e) {
  	$('#allImages').html('');
  }
});

.filepond--drop-label {
  background-color: #ECF7E9;
  height: auto!important;
}

.images {
  display: inline-block;
  padding: 0 5px;
}

.images_child {
  display: contents;
  padding: 0 5px;
  text-align: center;
}

.filepond--root * {
  height: auto;
  padding: 0 4px;
}

img {
  width: 25%;
  opacity: 0.8;
  filter: grayscale(100%);
  border-radius: 8px;
  cursor: pointer;
}


/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

<script src="https://unpkg.com/[email protected]/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/[email protected]/dist/filepond.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://unpkg.com/[email protected]/dist/filepond.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://unpkg.com/[email protected]/dist/filepond-plugin-image-preview.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

<input type="file" name='file' class='filepond' multiple id='file_upload' />

https://jsfiddle.net/d6e2nh93/

^{Disclaimers :}

^{1) I didn't NOT do the full CSS as your image example as I see no need to, you can easily do it yourself.}

^{2) This is not a react answer, but an answer to guide you through the right direction on how to use filepond to achieve your desired result.}