Is there a way to customize the filepond droparea by adding custom HTML with placeholder images to guide users on what kind of images should be uploaded and allow multiple uploads?
https://i.sstatic.net/VFGfJ.png
I attempted to add placeholders in an absolutely positioned container, but I faced challenges covering my custom element upon upload.
This is how Filepond is implemented in 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>
);
...
I created a custom wrapper and used CSS to align it on top of the filepond wrapper, although this might not be the most efficient solution.