Code Monkey home page Code Monkey logo

frappe-better-attach-control's Introduction

Frappe Better Attach Control

A small plugin for Frappe that adds customization to the attach control. It supports RTL layout and dark mode out of the box.

⚠️ v2 is still in BETA stage ⚠️

v2 Beta15

Apologies in advance for any problem or bug you face with this module. Please report any problem or bug you face so it can be fixed.


Better Attach Control

Better Attach Control

Better Attach Control


Status

  • Desk: 🔵 Testing
  • Web Form: 🔵 Testing

Special Thanks

A simple display of gratitude and appreciation to those who provided helped and kind support.

Version 2

  • MohsinAli
  • Robert C
  • NirajRegmi

Version 1

  • CA. B.C.Chechani

Table of Contents


Requirements

  • Frappe >= v12.0.0

Setup

⚠️ Do not forget to replace [sitename] with the name of your site in all commands. ⚠️

Install

  1. Go to bench directory
cd ~/frappe-bench
  1. Get plugin from Github

(Required only once)

bench get-app https://github.com/kid1194/frappe-better-attach-control
  1. Build plugin

(Required only once)

bench build --app frappe_better_attach_control
  1. Install plugin on a specific site
bench --site [sitename] install-app frappe_better_attach_control
  1. Check the usage section below

Update

  1. Go to app directory
cd ~/frappe-bench/apps/frappe_better_attach_control
  1. Get updates from Github
git pull
  1. Go to bench directory
cd ~/frappe-bench
  1. Build plugin
bench build --app frappe_better_attach_control
  1. Update a specific site
bench --site [sitename] migrate
  1. (Optional) Restart bench to clear cache
bench restart

Uninstall

  1. Go to bench directory
cd ~/frappe-bench
  1. Uninstall plugin from a specific site
bench --site [sitename] uninstall-app frappe_better_attach_control
  1. Remove plugin from bench
bench remove-app frappe_better_attach_control
  1. (Optional) Restart bench to clear cache
bench restart

Usage

  1. Go to Customization > Customize Form

  2. Enter the form doctype (Ex: 'User')

  3. Scroll down to the fields area

  4. Create an Attach or Attach Image field or edit an existing custom field

  5. Inside the field's Options property, add the options you want as a JSON string.

    Ex: {"allowed_file_types": [".jpg", ".png", ".gif"]}

⚠️ Remember

You can't modify the original fields of a doctype, so create a new field or clone and modify the entire doctype.


Available Field Options

Option Description
dialog_title 🔴 Upload dialog title to be displayed ️(🔶Frappe >= v14.0.0).

🔹Example: "Upload Images"
🔹Default: "Upload"
upload_notes Upload text to be displayed.

🔹Example: "Only images and videos, with maximum size of 2MB, are allowed to be uploaded"
🔹Default: ""
disable_file_browser 🔴 Disable file browser uploads.

⚠️ (File browser is always disabled in Web Form)

🔹Default: false
allow_multiple Allow multiple uploads.

⚠️ (Field value is a JSON array of files url)

🔹Default: false
max_file_size Maximum file size (in bytes) that is allowed to be uploaded.

🔹Example: 2048 for 2KB
🔹Default: Value of maximum file size in Frappe's settings
allowed_file_types Array of allowed file types (mimes) or extensions to upload. Prefix escaped RegExp string types with $.

⚠️ (File extensions must have a leading dot ".")
⚠️ (RegExp string types will not be used to in HTML accept attribute)

🔹Example: ["image/", "video/", ".pdf", ".doc", "$audio/([a-z]+)"]
🔹Default: null or ["image/*"]
max_number_of_files Maximum number of files allowed to be uploaded if multiple upload is allowed.

⚠️ (Bypassing the maximum attachments of doctype might not work)

🔹Example: 4
🔹Default: Value of maximum attachments set for the doctype
crop_image_aspect_ratio Crop aspect ratio for images (🔶Frappe >= v14.0.0).

🔹Example: 1 or 16/9 or 4/3
🔹Default: null
as_public Force uploads to be saved in public folder by default.

🔹Default: false
allowed_filename 🔴 Only allow files that match a specific file name to be uploaded.

🔹Example: (String)"picture.png" or (RegExp String)"/picture-([0-9]+).png/"
🔹Default: null
allow_reload Allow reloading attachments (🔶Frappe >= v13.0.0).

🔶 Affect the visibility of the reload button.🔶

🔹Default: true
allow_remove Allow removing and clearing attachments.

🔶 Affect the visibility of the remove and clear buttons.🔶

🔹Default: true

Available JavaScript Methods

Method Description
toggle_reload(allow: Boolean !Optional) Allow/Deny reloading attachments and toggle the reload button (🔶Frappe >= v13.0.0).
toggle_remove(allow: Boolean !Optional) Allow/Deny removing and clearing attachments and toggle the clear and remove buttons.
set_options(options: JSON Object) Set or change the plugin options.

Supported Fields

  • Attach
  • Attach Image

Issues

If you find bug in the plugin, please create a bug report and let us know about it.


License

This repository has been released under the MIT License.

frappe-better-attach-control's People

Contributors

grolaf avatar kid1194 avatar mohsinalimat avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

frappe-better-attach-control's Issues

[BUG]: Incorrect path for API request

When JS frontend tries to retrieve options data for Attach Field, it goes to not existing route.
When inspecting network request in dev console, it show api/method/frappe_better_attach_control.api.get_options, but there is no api controller selected. It should be api/method/frappe_better_attach_control.api.field.get_options.

I think, starting in

there should by:

request(
  'field.get_options',

[BUG]: Missing comma in field.py

frappe/apps/frappe_better_attach_control/frappe_better_attach_control/api/field.py

a missing comma is causing the program to break on line 35

Question 🙋‍♂️

Hello kid1194,

Thanks for your script.

Before installing it may I ask, where is this better-attach UI element located?

I would like to have an upload button placed in list view, and not in any Doc form. Is this possible?

Image Not Attaching

Okay so we installed the master branch and we can't get attach any document/ image to the upload button. The standard behavior is for the attached file to link to the upload button.

[BUG]: Unable to clear the uploaded attachments.

Describe the bug
Error message after remove the attachment and hit clear button.

To Reproduce

  1. Remove the attachment from sidebar by clicking x
  2. Hit Clear of the attachment field
  3. The error message

Expected behavior
Attachment is cleared and allow to upload

Screenshots
Shot 2023-05-03 at 01 23 41

Desktop (please complete the following information):
ERPNext: v14.22.0 (version-14)
Frappe Framework: v14.33.0 (version-14)
Frappe Better Attach Control: v2.0.0 (main)

Additional context
None.

[REQ]: Restrict Uploaded File Name

Is your feature request related to a problem? Please describe.
It is better to have predefined file name for better search in future.

Describe the solution you'd like

  1. Allow to use REGEX to define the name format.
  2. And Show Name Format on the front for the user to understand when upload or see the error why it is rejected.

Describe alternatives you've considered
No

Additional context
No

Error while getting branch v2-beta

find the log below... the error seems to be a build error

Getting frappe-better-attach-control
$ git clone https://github.com/kid1194/frappe-better-attach-control --branch v2-beta --depth 1 --origin upstream
Cloning into 'frappe-better-attach-control'...
remote: Enumerating objects: 59, done.
remote: Counting objects: 100% (59/59), done.
remote: Compressing objects: 100% (41/41), done.
remote: Total 59 (delta 15), reused 40 (delta 10), pack-reused 0
Receiving objects: 100% (59/59), 31.04 KiB | 836.00 KiB/s, done.
Resolving deltas: 100% (15/15), done.
Ignoring dependencies of https://github.com/kid1194/frappe-better-attach-control. To install dependencies use --resolve-deps
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
✔ 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
✘ [ERROR] No matching export in "../frappe_better_attach_control/frappe_better_attach_control/public/js/filetypes/audio.js" for import "default"

    ../frappe_better_attach_control/frappe_better_attach_control/public/js/filetypes/index.js:8:7:
      8 │ import is_audio from './audio.js';
        ╵        ~~~~~~~~

✘ [ERROR] No matching export in "../frappe_better_attach_control/frappe_better_attach_control/public/js/filetypes/pdocument.js" for import "default"

    ../frappe_better_attach_control/frappe_better_attach_control/public/js/filetypes/index.js:11:7:
      11 │ import is_pdocument from './pdocument.js';
         ╵        ~~~~~~~~~~~~

 ERROR  There were some problems during build

Error: Build failed with 2 errors:
../frappe_better_attach_control/frappe_better_attach_control/public/js/filetypes/index.js:8:7: ERROR: No matching export in "../frappe_better_attach_control/frappe_better_attach_control/public/js/filetypes/audio.js" for import "default"
../frappe_better_attach_control/frappe_better_attach_control/public/js/filetypes/index.js:11:7: ERROR: No matching export in "../frappe_better_attach_control/frappe_better_attach_control/public/js/filetypes/pdocument.js" for import "default"
    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)
Terminated
error Command failed with exit code 143.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Traceback (most recent call last):
  File "/usr/lib/python3.10/runpy.py", line 196, in _run_module_as_main
    return _run_code(code, main_globals, None,
  File "/usr/lib/python3.10/runpy.py", line 86, in _run_code
    exec(code, run_globals)
  File "/home/frappe/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 109, in <module>
    main()
  File "/home/frappe/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 18, in main
    click.Group(commands=commands)(prog_name="bench")
  File "/home/frappe/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 829, in __call__
    return self.main(*args, **kwargs)
  File "/home/frappe/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 782, in main
    rv = self.invoke(ctx)
  File "/home/frappe/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 1259, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "/home/frappe/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 1259, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "/home/frappe/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 1066, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "/home/frappe/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 610, in invoke
    return callback(*args, **kwargs)
  File "/home/frappe/frappe-bench/apps/frappe/frappe/commands/utils.py", line 82, in build
    bundle(mode, apps=apps, hard_link=hard_link, verbose=verbose, skip_frappe=skip_frappe)
  File "/home/frappe/frappe-bench/apps/frappe/frappe/build.py", line 257, in bundle
    frappe.commands.popen(command, cwd=frappe_app_path, env=get_node_env(), raise_err=True)
  File "/home/frappe/frappe-bench/apps/frappe/frappe/commands/__init__.py", line 98, in popen
    raise subprocess.CalledProcessError(return_, command)
subprocess.CalledProcessError: Command 'yarn run production --apps frappe_better_attach_control --run-build-command' returned non-zero exit status 143.
ERROR: 
Traceback (most recent call last):
  File "/home/frappe/.local/bin/bench", line 8, in <module>
    sys.exit(cli())
  File "/home/frappe/.local/lib/python3.10/site-packages/bench/cli.py", line 127, in cli
    bench_command()
  File "/usr/lib/python3/dist-packages/click/core.py", line 1128, in __call__
    return self.main(*args, **kwargs)
  File "/usr/lib/python3/dist-packages/click/core.py", line 1053, in main
    rv = self.invoke(ctx)
  File "/usr/lib/python3/dist-packages/click/core.py", line 1659, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "/usr/lib/python3/dist-packages/click/core.py", line 1395, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "/usr/lib/python3/dist-packages/click/core.py", line 754, in invoke
    return __callback(*args, **kwargs)
  File "/home/frappe/.local/lib/python3.10/site-packages/bench/commands/make.py", line 159, in get_app
    get_app(
  File "/home/frappe/.local/lib/python3.10/site-packages/bench/app.py", line 432, in get_app
    app.install(verbose=verbose, skip_assets=skip_assets, restart_bench=restart_bench)
  File "/home/frappe/.local/lib/python3.10/site-packages/bench/utils/render.py", line 126, in wrapper_fn
    return fn(*args, **kwargs)
  File "/home/frappe/.local/lib/python3.10/site-packages/bench/app.py", line 230, in install
    install_app(
  File "/home/frappe/.local/lib/python3.10/site-packages/bench/app.py", line 574, in install_app
    build_assets(bench_path=bench_path, app=app)
  File "/home/frappe/.local/lib/python3.10/site-packages/bench/utils/bench.py", line 330, in build_assets
    exec_cmd(command, cwd=bench_path, env={"BENCH_DEVELOPER": "1"})
  File "/home/frappe/.local/lib/python3.10/site-packages/bench/utils/__init__.py", line 155, in exec_cmd
    raise CommandFailedError
bench.exceptions.CommandFailedError

[REQ]: make it wiki pages

Please make it wiki pages with image, gif and video view. Need good documents with image,gif and video.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.