fix: filepond plugins not working

zuramai · Apr 2, 2023 · b82e7a9 · b82e7a9
1 parent 53c2132
commit b82e7a9
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 23 deletions.
diff --git a/src/assets/static/js/pages/filepond.js b/src/assets/static/js/pages/filepond.js
@@ -1,3 +1,14 @@
+
+FilePond.registerPlugin(
+  FilePondPluginImagePreview,
+  FilePondPluginImageCrop,
+  FilePondPluginImageExifOrientation,
+  FilePondPluginImageFilter,
+  FilePondPluginImageResize,
+  FilePondPluginFileValidateSize,
+  FilePondPluginFileValidateType,
+)
+
 // Filepond: Basic
 FilePond.create(document.querySelector(".basic-filepond"), {
   credits: null,

diff --git a/src/ui-file-uploader.html b/src/ui-file-uploader.html
@@ -191,6 +191,13 @@ <h5 class="card-title">Image Auto Resize</h5>
 <link rel="stylesheet" href="assets/extensions/toastify-js/src/toastify.css">
 {% endblock %}
 {% block js %}
+<script src="assets/extensions/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js"></script>
+<script src="assets/extensions/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js"></script>
+<script src="assets/extensions/filepond-plugin-image-crop/filepond-plugin-image-crop.min.js"></script>
+<script src="assets/extensions/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js"></script>
+<script src="assets/extensions/filepond-plugin-image-filter/filepond-plugin-image-filter.min.js"></script>
+<script src="assets/extensions/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js"></script>
+<script src="assets/extensions/filepond-plugin-image-resize/filepond-plugin-image-resize.min.js"></script>
 <script src="assets/extensions/filepond/filepond.js"></script>
 <script src="assets/extensions/toastify-js/src/toastify.js"></script>
 <script src="assets/static/js/pages/filepond.js"></script>

diff --git a/vite.config.js b/vite.config.js
@@ -14,7 +14,7 @@ const root = resolve(__dirname, 'src')
 
 const getFiles = () => {
     let files = {}
-    
+
     fs.readdirSync(root)
         .filter(filename => filename.endsWith('.html'))
         .forEach(filename => {
@@ -28,7 +28,7 @@ const files = getFiles()
 const getVariables = (mode) => {
     const variables = {}
     Object.keys(files).forEach((filename) => {
-        if(filename.includes('layouts')) filename = `layouts/${filename}`
+        if (filename.includes('layouts')) filename = `layouts/${filename}`
         variables[filename + '.html'] = {
             web_title: "Mazer Admin Dashboard",
             sidebarItems,
@@ -50,6 +50,13 @@ const modulesToCopy = {
     flatpickr: true,
     filepond: true,
     "filepond-plugin-image-preview": true,
+    "filepond-plugin-file-validate-size": true,
+    "filepond-plugin-file-validate-type": true, 
+    "filepond-plugin-image-crop": true,
+    "filepond-plugin-image-exif-orientation": true, 
+    "filepond-plugin-image-filter": true,
+    "filepond-plugin-image-preview": true,
+    "filepond-plugin-image-resize": true,
     "feather-icons": true,
     dragula: true,
     dayjs: false,
@@ -117,7 +124,7 @@ export default defineConfig((env) => ({
             templatesDir: root,
             variables: getVariables(env.mode),
             nunjucksEnvironment: {
-                
+
                 filters: {
                     containString: (str, containStr) => {
                         if (!str.length) return false
@@ -133,11 +140,11 @@ export default defineConfig((env) => ({
     ],
     resolve: {
         alias: {
-          '@': normalizePath(resolve(__dirname, 'src')),
-          '~bootstrap': resolve(__dirname, 'node_modules/bootstrap'),
-          '~bootstrap-icons': resolve(__dirname, 'node_modules/bootstrap-icons'),
-          '~perfect-scrollbar': resolve(__dirname, 'node_modules/perfect-scrollbar'),
-          '~@fontsource': resolve(__dirname, 'node_modules/@fontsource'),
+            '@': normalizePath(resolve(__dirname, 'src')),
+            '~bootstrap': resolve(__dirname, 'node_modules/bootstrap'),
+            '~bootstrap-icons': resolve(__dirname, 'node_modules/bootstrap-icons'),
+            '~perfect-scrollbar': resolve(__dirname, 'node_modules/perfect-scrollbar'),
+            '~@fontsource': resolve(__dirname, 'node_modules/@fontsource'),
         }
     },
     build: {
@@ -146,22 +153,22 @@ export default defineConfig((env) => ({
         target: "chrome58",
         outDir: resolve(__dirname, 'dist'),
         rollupOptions: {
-          input: files,
-          output: {
-            entryFileNames: `assets/compiled/js/[name].js`,
-            chunkFileNames: `assets/compiled/js/[name].js`,
-
-            assetFileNames: (a) => {
-                const extname = a.name.split('.')[1]
-                let folder = extname ? `${extname}/` : ''
-
-                // Put fonts into css folder
-                if(['woff', 'woff2', 'ttf'].includes(extname))
-                    folder = 'fonts/'
-
-                return `assets/compiled/${folder}[name][extname]`
+            input: files,
+            output: {
+                entryFileNames: `assets/compiled/js/[name].js`,
+                chunkFileNames: `assets/compiled/js/[name].js`,
+
+                assetFileNames: (a) => {
+                    const extname = a.name.split('.')[1]
+                    let folder = extname ? `${extname}/` : ''
+
+                    // Put fonts into css folder
+                    if (['woff', 'woff2', 'ttf'].includes(extname))
+                        folder = 'fonts/'
+
+                    return `assets/compiled/${folder}[name][extname]`
+                }
             }
-          }
         },
     }
 }))