add image resize and compressor

shye11 · May 4, 2019 · c1e3036 · c1e3036
1 parent 6d2936a
commit c1e3036
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/public/assets/js/app.js b/public/assets/js/app.js
@@ -1,8 +1,11 @@
 $(function() {
 
-    $.fn.filepond.registerPlugin(FilePondPluginImagePreview);
-    $.fn.filepond.registerPlugin(FilePondPluginFileEncode);
-    $.fn.filepond.registerPlugin(FilePondPluginFileValidateSize);
+    $.fn.filepond.registerPlugin(
+        FilePondPluginImagePreview,
+        FilePondPluginFileEncode,
+        FilePondPluginFileValidateSize,
+        FilePondPluginImageResize,
+        FilePondPluginImageTransform);
 
     // This is the back button on the dynamic options
     $(document).on("click",".backButton",function(e){
@@ -295,17 +298,21 @@ $(function() {
 
         // First register any plugins
         $.fn.filepond.setDefaults({
-            maxFileSize: '1MB'
+            maxFileSize: '3MB',
+            allowImageResize: true,
+            allowFileEncode: true,
+            allowMultiple: false,
+            imageTransformOutputQuality: 60,
+            imageResizeTargetWidth: 400,
+            imageResizeTargetHeight: 150,
+            imageResizeMode: 'contain',
+            imageCropAspectRatio: 1,
+            imageTransformOutputStripImageHead: true,
         });
 
         // Turn input element into a pond
         file.filepond();
 
-        file.filepond('allowFileEncode',true);
-
-        // Set allowMultiple property to true
-        file.filepond('allowMultiple', false);
-
     }
 
     // Listen for addfile event

diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
@@ -30,7 +30,8 @@
 
 		<script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.js"></script>
 		<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
-
+		<script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.js"></script>
+		<script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
 
 		<!-- include FilePond library -->
 		<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>