Combine FilePond with Pintura and create the perfect image edit and upload experience.
The File Size Validation plugin handles blocking of files that are too large.
npm i filepond-plugin-file-validate-size --save
Now we can add the File Validate Size plugin to our project like this.
// Import FilePond
import * as FilePond from 'filepond';
// Import the plugin code
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
// Register the plugin
FilePond.registerPlugin(FilePondPluginFileValidateSize);
<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
// Register the plugin
FilePond.registerPlugin(FilePondPluginFileValidateSize);
// ... FilePond initialisation code here
</script>
<!-- add before </body> -->
<script src="filepond-plugin-file-validate-size.js"></script>
<script src="filepond.js"></script>
<script>
// Register the plugin
FilePond.registerPlugin(FilePondPluginFileValidateSize);
// ... FilePond initialisation code here
</script>
Property | Default value | Description |
---|---|---|
allowFileSizeValidation
|
| Enable or disable file size validation |
minFileSize
|
| The minimum size of a file, for instance 5MB or 750KB
|
maxFileSize
|
| The maximum size of a file, for instance 5MB or 750KB
|
maxTotalFileSize
|
| Maximum size of all files in list, same format as maxFileSize
|
labelMaxFileSizeExceeded
|
| Status message shown when large file is dropped. |
labelMaxFileSize
|
| Detail message shown when max file size was exceeded. {filesize} is replaced with the value of the maxFileSize property.
|
labelMaxTotalFileSizeExceeded
|
| Status message shown when total file size exceeds maximum. |
labelMaxTotalFileSize
|
| Detail message shown when total file size exceeds maximum. |