Restrict specific file type while uploading

getting below error while doing get-app

Cloning into 'frappe-better-attach-control'...
remote: Enumerating objects: 45, done.
remote: Counting objects: 100% (45/45), done.
remote: Compressing objects: 100% (39/39), done.
remote: Total 45 (delta 7), reused 13 (delta 1), pack-reused 0
Unpacking objects: 100% (45/45), 25.47 KiB | 815.00 KiB/s, done.
INFO:bench.app:installing frappe_better_attach_control
$ ./env/bin/pip install -q -U -e ./apps/frappe_better_attach_control 
$ bench build --app frappe_better_attach_control
✔ Application Assets Linked                                                                                                                                                                               


yarn run v1.22.17
$ node esbuild --production --apps frappe_better_attach_control --run-build-command
clean: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
clean: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
clean: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
clean: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
✘ [ERROR] Could not resolve "../../integrations/google_drive_picker"

    ../frappe_better_attach_control/frappe_better_attach_control/public/js/file_uploader/v13/FileUploader.vue:126:30:
      126 │ import GoogleDrivePicker from '../../integrations/google_drive_picker';
          ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Could not resolve "./../../filetypes/image.js"

    ../frappe_better_attach_control/frappe_better_attach_control/public/js/file_uploader/v13/FileUploader.vue:127:31:
      127 │ import { get_image_type } from './../../filetypes/image.js';
          ╵                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Unexpected "."

    ../frappe_better_attach_control/frappe_better_attach_control/public/js/file_uploader/FileUploader.vue:320:7:
      320 │           .filter(this.check_restrictions)
          ╵           ^

 ERROR  There were some problems during build

Error: Build failed with 3 errors:
../frappe_better_attach_control/frappe_better_attach_control/public/js/file_uploader/FileUploader.vue:320:7: ERROR: Unexpected "."
../frappe_better_attach_control/frappe_better_attach_control/public/js/file_uploader/v13/FileUploader.vue:126:30: ERROR: Could not resolve "../../integrations/google_drive_picker"
../frappe_better_attach_control/frappe_better_attach_control/public/js/file_uploader/v13/FileUploader.vue:127:31: ERROR: Could not resolve "./../../filetypes/image.js"
    at failureErrorWithLog (/home/frappe/bren-bench/apps/frappe/node_modules/esbuild/lib/main.js:1600:15)
    at /home/frappe/bren-bench/apps/frappe/node_modules/esbuild/lib/main.js:1246:28
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

@mohitchechani My bad, I forgot to make some simple modifications…
I have fixed the code…
I hope that it works well now…

Still getting below error

 git clone https://github.com/kid1194/frappe-better-attach-control  --depth 1 --origin upstream
Cloning into 'frappe-better-attach-control'...
remote: Enumerating objects: 45, done.
remote: Counting objects: 100% (45/45), done.
remote: Compressing objects: 100% (39/39), done.
remote: Total 45 (delta 7), reused 12 (delta 1), pack-reused 0
Unpacking objects: 100% (45/45), 25.54 KiB | 1.82 MiB/s, done.
Installing frappe_better_attach_control
$ /home/frappe/frappe-bench/env/bin/python -m pip install --quiet --upgrade -e /home/frappe/frappe-bench/apps/frappe_better_attach_control 
$ bench build --app frappe_better_attach_control
Linking /home/frappe/frappe-bench/apps/frappe/node_modules to ./assets/frappe/node_modules                                                                      Linking /home/frappe/frappe-bench/apps/bren_erp/bren_erp/public to ./assets/bren_erp                                                                            Linking /home/frappe/frappe-bench/apps/erpnext/erpnext/public to ./assets/erpnext                                                                               Linking /home/frappe/frappe-bench/apps/erpnext/node_modules to ./assets/erpnext/node_modules                                                                    Linking /home/frappe/frappe-bench/apps/frappe_better_attach_control/frappe_better_attach_control/public to ./assets/frappe_better_attach_control                Linking /home/frappe/frappe-bench/apps/payments/payments/public to ./assets/payments                                                                            ✔ Application Assets Linked                                            


yarn run v1.22.19
warning ../../package.json: No license field
$ node esbuild --production --apps frappe_better_attach_control --run-build-command
clean: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
✘ [ERROR] Could not resolve "./../../../../frappe/js/integrations/google_drive_picker"

    ../frappe_better_attach_control/frappe_better_attach_control/public/js/file_uploader/v13/FileUploader.vue:126:30:
      126 │ ...cker from './../../../../frappe/js/integrations/google_drive_p...
          ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

clean: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
✘ [ERROR] Could not resolve "./../../../frappe/js/integrations/google_drive_picker"

    ../frappe_better_attach_control/frappe_better_attach_control/public/js/file_uploader/FileUploader.vue:135:30:
      135 │ ...cker from './../../../frappe/js/integrations/google_drive_pick...
          ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 ERROR  There were some problems during build

Error: Build failed with 2 errors:
../frappe_better_attach_control/frappe_better_attach_control/public/js/file_uploader/FileUploader.vue:135:30: ERROR: Could not resolve "./../../../frappe/js/integrations/google_drive_picker"
../frappe_better_attach_control/frappe_better_attach_control/public/js/file_uploader/v13/FileUploader.vue:126:30: ERROR: Could not resolve "./../../../../frappe/js/integrations/google_drive_picker"
    at failureErrorWithLog (/home/frappe/frappe-bench/apps/frappe/node_modules/esbuild/lib/main.js:1600:15)
    at /home/frappe/frappe-bench/apps/frappe/node_modules/esbuild/lib/main.js:1246:28
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
Done in 2.71s.
$ supervisorctl restart frappe-bench-workers: frappe-bench-web:

@mohitchechani Fixed bro…
I tried to get some unmodified files from frappe but, as you can see, it raises error when built…

@mohitchechani Please let me know how did the build go and does it work well or not…

Hi, the build worked fine. but the restrictions for other than My Device does not work

@mohitchechani Well it should work…
Have you tried clearing the cache?
I have made sure that files selected using file browser, web link and google drive goes through the same restrictions as the selected files from device…

Hi,
I tried clearing cache, bench build and bench restart. But still the restrictions were not applied

1 Like

you can try this too [Plugin] Frappe/ERPNext Better Attach Control - #4 by Helio_Jesus

@mohitchechani Thanks for trying bro, I really appreciate it…
I have updated the plugin and I’m pretty sure that it’s going to work…
Let me know if it doesn’t work…

hi getting this build error

yarn run v1.22.19
warning ../../package.json: No license field
$ node esbuild --production --run-build-command
clean: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
✘ [ERROR] Unexpected "="

    ../frappe_better_attach_control/frappe_better_attach_control/public/js/better_uploader.bundle.js:31:25:
      31 │             restrictions = {},
         ╵                          ^

✘ [ERROR] Unexpected "."

    ../frappe_better_attach_control/frappe_better_attach_control/public/js/better_uploader.bundle.js:55:16:
      55 │                 .filter(this.check_restrictions)
         ╵                 ^

Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
clean: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
 ERROR  There were some problems during build

@mohitchechani Sorry for this. I copied the code that caused this error from frappe…
I have fixed it and updated the plugin…

Hi, the build was successful. but I am still able to attach unsupported files via “Library”

FYI, I ran migration, bench build, bench clear-cache

@mohitchechani Sorry, I forgot to mention that currently you will be able to select files without restriction but you won’t be able to upload them…

Please check and then let me know…

And I will try to find a way to restrict the selection also…

@mohitchechani If the upload restriction is working, I might have found a way to restrict selection. So please let me know if it is working…

The upload from my device with restriction is working

But from library is not working

1 Like

@mohitchechani Apparently adding restrictions to the library uploads needs some Python coding…

I will inform you when I’m done…

to restrict file upload on frappe path :- apps/frappe/core/doctype/file//file.json { "fieldname": "file_type", "fieldtype": "Select", "label": "File Type", "options": "JPG\nJPEG\nPNG\nPDF\nCSV\nXLS\nXLSX", "in_list_view": 1, "in_standard_filter": 1, "read_only": 1 }

The provided script is functional in version 14, and I trust it will meet your requirements as well.

frappe.ui.form.on('doctype_name', {
    validate: function (frm) {
        // Get the file field
        var fileField = frm.doc.field_name;

        // Check if the file field is empty
        if (fileField) {
            // Define allowed file extensions
            var allowedExtensions = ['.xls', '.xlsx', '.csv'];

            // Get the file extension of the selected file
            var fileExtension = fileField.split('.').pop().toLowerCase();

            // Check if the file extension is allowed
            if (!allowedExtensions.includes('.' + fileExtension)) {
                frappe.msgprint(__('Only files with extensions ' + allowedExtensions.join(', ') + ' are allowed.'));
                frappe.validated = false;
            }
        }
    }
});
3 Likes

Check this post for a Client Script restricting the allowed file types for an Attach field (tested on develop / v16):