[BUG]: Attach Control not working in web-form about frappe-better-attach-control

[kid1194]

@mohsinalimat I suspect that it is because of the dialog that is supposed to display the file when the filename is clicked..

Is the field type Attach or Attach Image?

Attach Image field doesn't have a dialog so can you please try the child table with Attach Image field..

And can you please try both Attach and Attach Image fields outside child table..

v2 will be dedicated to you bro for your enormous help 😁

[mohsinalimat]

You mean the edit dialog is still not opening?
Or it is something else?

Yes. Not opening

[mohsinalimat]

Yes, not opening in form view in child table.

[mohsinalimat]

Still not opening in form view in child table.

[kid1194]

@mohsinalimat Thanks a lot buddy for reporting this..

I knew that there is an issue with the web form but I didn't find a way to fix it..

Can you please check the console for any error..
And please also check if only the allowed_file_types option is what makes the control stop working or other options cause that too..

I'm very thankful for your help..

Best regards..

[mohsinalimat]

in inspect element html we put accept="image/*" then only images option comes in file browser.

[mohsinalimat]

If I change below line in core code then after it works in web-form and doctype form.

I also check in version-13 and version-14.

[kid1194]

@mohsinalimat That's weird..

Anyway, I have updated the plugin, hopefully it will fix this issue..
Please give it a try and let me know if you find any bug..

Best regards..

[mohsinalimat]

Still not working in web-from in version-14.

[kid1194]

@mohsinalimat I couldn't find a solution for this problem..

I think that the problem isn't from the plugin, but from the web_script.js file..

Check this #4 for more info..

Best regards..

[kid1194]

@mohsinalimat Hey buddy..

I think that I have found a solution for the web form. Can you please update the plugin, move the config from the Options property to the Better Attach Optiins property and then check if the plugin works properly in desk and in web form..

To show gratitude for your contribution to this plugin, I have added your name in the README file..

Best regards..

[mohsinalimat]

Still same error.

[mohsinalimat]

@mohsinalimat Hey buddy..

I think that I have found a solution for the web form. Can you please update the plugin, move the config from the Options property to the Better Attach Optiins property and then check if the plugin works properly in desk and in web form..

To show gratitude for your contribution to this plugin, I have added your name in the README file..

Best regards..

Please share a demo video for web-form restrictions.

[kid1194]

@mohsinalimat Sorry buddy, I can't test it currently..

The issue was that in web_script.js, the web form fields of type Attach and Attach Image gets their options property set to null if the property value is not an object and since the plugin options is JSON that means it gets removed..

So, I added a custom field to hold the plugin options in order to bypass this action of web_script.js, and the plugin gets the options from the custom field..

Have you tried it after putting the options in the custom field?

If yes and it still doesn't work, please let me know..

Best regards..

[mohsinalimat]

I have child table in web-form. And in child table assign the image property.

[kid1194]

Is there a field property called Better Attach Options?
It should appear under the Options property..

If yes, did you put the plugin options inside it instead of the Options property?

if yes, then did it work for you in web form or not?

[kid1194]

@mohsinalimat Hey buddy..

I just wanted to remind you about the questions I wrote in the above comment..

I'm still waiting for your reply..

Best regards..

[mohsinalimat]

Is there a field property called Better Attach Options? It should appear under the Options property..

If yes, did you put the plugin options inside it instead of the Options property?

if yes, then did it work for you in web form or not?

I can not find any Better Attach Options property.

[kid1194]

@mohsinalimat There should be a field for the plugin options..

What version you are using?
Are you using the Beta version?

The field exists in the Beta-8 version...

[mohsinalimat]

What version you are using?

version-14 & version-13

Are you using the Beta version?

Yes, Beta-8

[mohsinalimat]

Web From

Child Doctype

[kid1194]

@mohsinalimat I believe that you understood me wrong..

The plugin field will only appear if the field type is Attach or Attach Image...

So, when you edit your attach field you will see it and not when editing the child table...

If you edit your WF Attachment Child and you edit the attach field, you will be able to see the plugin options field below the normal options field..

[mohsinalimat]

I can not find anything related the plugin options.

[kid1194]

@mohsinalimat The plugin setup code might not have created the custom field..

Can you please do the following..

1. Go to Home > Customization > Form Customization > Custom Field
2. In the list, check if there is a custom field called Better Attach Options
3. If there is no custom field, then create a new field and set the following data:
   • Document: DocField
   • Label: Better Attach Options
   • Field Type: Small Text
   • Field Name: better_attach_options
   • Depends On: eval:in_list(['Attach', 'Attach Image'], doc.fieldtype)
   • Insert Below: options

After creating the custom field, you will be able to see it when editing an Attach or Attach Image field..

If you can't find the document DocField, please let me know..

Best regards..

[mohsinalimat]

When I add Better Attach Options in Core Doctype of DocField then I will show. Issue is not solved in web form.

[kid1194]

It should be working..

Anyway, I have made a small change to the plugin..

Please update and then when you open the web form, open the browser console and you will see the current options of the plugin. Check if the options from the console matches the options from the Better Attach Options field..

Also you will find in the console the uploader options that is being used when you click on the attach button and the file browser options when you click on the file browser button..

All the 3 options that you will find in the console should match with the options from the Better Attach Options field..

Thanks a lot buddy for your help..

[mohsinalimat]

		frappe._messages = {
 "Sr": "Sr"
};
		frappe.web_form_doc = {
 "allow_comments": 0,
 "allow_delete": 0,
 "allow_edit": 0,
 "allow_incomplete": 0,
 "allow_multiple": 0,
 "allow_print": 0,
 "apply_document_permissions": 0,
 "button_label": "Save",
 "creation": "2023-02-22 11:28:13.181937",
 "doc_type": "WF Attachment",
 "docstatus": 0,
 "doctype": "Web Form",
 "idx": 0,
 "in_edit_mode": false,
 "in_view_mode": false,
 "is_new": true,
 "is_standard": 0,
 "list_columns": [],
 "login_required": 0,
 "max_attachment_size": 0,
 "modified": "2023-02-22 11:28:15.646272",
 "modified_by": "Administrator",
 "module": "Website",
 "name": "wf-attachment",
 "owner": "Administrator",
 "published": 1,
 "route": "wf-attachment",
 "show_attachments": 0,
 "show_list": 0,
 "show_sidebar": 0,
 "title": "WF Attachment",
 "web_form_fields": [
  {
   "allow_read_on_all_link_options": 0,
   "creation": "2023-02-22 11:28:13.181937",
   "docstatus": 0,
   "doctype": "Web Form Field",
   "fieldname": "name1",
   "fieldtype": "Data",
   "hidden": 0,
   "idx": 1,
   "label": "Name",
   "max_length": 0,
   "max_value": 0,
   "modified": "2023-02-22 11:28:15.646272",
   "modified_by": "Administrator",
   "name": "192ee1f888",
   "owner": "Administrator",
   "parent": "WF Attachment",
   "parentfield": "web_form_fields",
   "parenttype": "Web Form",
   "read_only": 0,
   "reqd": 0,
   "show_in_filter": 0
  },
  {
   "allow_read_on_all_link_options": 0,
   "creation": "2023-02-22 11:28:13.181937",
   "docstatus": 0,
   "doctype": "Web Form Field",
   "fieldname": "wf_attachment_child",
   "fields": [
    {
     "fieldname": "name",
     "fieldtype": "Data",
     "label": "Name"
    },
    {
     "allow_bulk_edit": 0,
     "allow_in_quick_entry": 0,
     "allow_on_submit": 0,
     "better_attach_options": "{\"allowed_file_types\": [\"image/*\"]}",
     "bold": 0,
     "collapsible": 0,
     "collapsible_depends_on": null,
     "columns": 0,
     "creation": "2023-02-22 11:26:43.193107",
     "default": null,
     "depends_on": null,
     "description": null,
     "docstatus": 0,
     "doctype": "DocField",
     "documentation_url": null,
     "fetch_from": null,
     "fetch_if_empty": 0,
     "fieldname": "attach",
     "fieldtype": "Attach",
     "hidden": 0,
     "hide_border": 0,
     "hide_days": 0,
     "hide_seconds": 0,
     "idx": 1,
     "ignore_user_permissions": 0,
     "ignore_xss_filter": 0,
     "in_filter": 0,
     "in_global_search": 0,
     "in_list_view": 1,
     "in_preview": 0,
     "in_standard_filter": 0,
     "is_virtual": 0,
     "label": "Attach",
     "length": 0,
     "mandatory_depends_on": null,
     "max_height": null,
     "modified": "2023-02-24 13:15:05.238014",
     "modified_by": "Administrator",
     "name": "44e44f08b8",
     "no_copy": 0,
     "non_negative": 0,
     "oldfieldname": null,
     "oldfieldtype": null,
     "options": "{\"allowed_file_types\": [\"image/*\"]}",
     "owner": "Administrator",
     "parent": "WF Attachment Child",
     "parentfield": "fields",
     "parenttype": "DocType",
     "permlevel": 0,
     "precision": null,
     "print_hide": 0,
     "print_hide_if_no_value": 0,
     "print_width": null,
     "read_only": 0,
     "read_only_depends_on": null,
     "remember_last_selected_value": 0,
     "report_hide": 0,
     "reqd": 0,
     "search_index": 0,
     "set_only_once": 0,
     "show_dashboard": 0,
     "show_preview_popup": 0,
     "translatable": 0,
     "trigger": null,
     "unique": 0,
     "width": null
    }
   ],
   "fieldtype": "Table",
   "hidden": 0,
   "idx": 2,
   "label": "WF Attachment Child",
   "max_length": 0,
   "max_value": 0,
   "modified": "2023-02-22 11:28:15.646272",
   "modified_by": "Administrator",
   "name": "fb7fd3d135",
   "options": "WF Attachment Child",
   "owner": "Administrator",
   "parent": "WF Attachment",
   "parentfield": "web_form_fields",
   "parenttype": "Web Form",
   "read_only": 0,
   "reqd": 0,
   "show_in_filter": 0
  }
 ]
};

Update the custom app but still same issue.

[kid1194]

@mohsinalimat Can you please post a screenshot of the web browser console when using the web form..

[mohsinalimat]

Browser Console log of web form.

[kid1194]

@mohsinalimat I realized that the plugin doesn't override the default attach controls in web forms since it doesn't get loaded at all..

Injecting custom JavaScript and CSS files to web forms cannot be done unless specified in the hooks and for specific standard web forms only..

Because of that, I have made the plugin intercept the web form load and manually inject both JavaScript and CSS but I'm not sure that it will work since I don't know when the code will be executed, at the beginning of the web form load or at the end (which is the right time)..

So please update the plugin and check if it works automatically in web forms or not..

If it doesn't work, then the please try the following..

• If the web form is set as Standard, then the following code must be placed at the top of the exported web form js file..
• But if it is not set as Standard, then the desired web form must modified and following code must be placed at top inside the Client Script field of the web form..

For v14

frappe.require(['better_attach.bundle.js', 'better_attach.bundle.css']);

For v13

frappe.require([
    '/assets/frappe_better_attach_control/js/better_attach.js',
    '/assets/frappe_better_attach_control/css/better_attach.css',
]);

For v12

frappe.require([
    '/assets/frappe_better_attach_control/js/better_attach_v12.js',
    '/assets/frappe_better_attach_control/css/better_attach.css',
]);

[mohsinalimat]

Still facing same issue.

[kid1194]

@mohsinalimat Did you update the plugin?

If you did then please check frappe error log doctype and see if there is an entry from the plugin..

Have you tried the second method which is adding the js code?

[mohsinalimat]

I have update the app and uninstall and install again.

Second option is also tried but no luck.

[kid1194]

@mohsinalimat Did you check frappe error log doctype for any error entry posted by the plugin?

If you checked and there were no plugin errors then making the plugin work for web forms might not be possible..😔

I have checked frappe source code for any possible workaround but I couldn't find any other than what I mentioned in the comment before last..

The context injection hook seems to be executed before the web form which is why the injection code doesn't work..

Even if I inject the js and css files for every web page and form, web forms will override both js and css if the form is set as Standard..

[mohsinalimat]

For v14

frappe.require(['better_attach.bundle.js', 'better_attach.bundle.css']);

I used this code in web form script but error is said no file found.

[kid1194]

@mohsinalimat Then please try using the code for v13..

This might be our last hope with web form..

frappe.require([
    '/assets/frappe_better_attach_control/js/better_attach.js',
    '/assets/frappe_better_attach_control/css/better_attach.css',
]);

[kid1194]

@mohsinalimat I think that I have solved this problem..

Please update the plugin and then check if it works for web forms..

The plugin should load in web forms with any Attach or Attach Image fields..

If it doesn't then please check frappe error log for any entry posted by the plugin..

Thanks a lot buddy..

[mohsinalimat]

[kid1194]

@mohsinalimat Finally we got something although it is an error..

I will fix it and get back to you..

Thanks a lot buddy..

[kid1194]

@mohsinalimat I have updated the plugin..

It should work but if the plugin was unable to load a specific file, instead of throwing an error like before it will post an error entry with the file name to the Error Log doctype..

Please give it another try..

Best regards..

[mohsinalimat]

Still get same error.

[kid1194]

@mohsinalimat Thanks to you bro I have managed to load both js and css for v14..

v13 and v12 someone must test and see it it loads or not..

Anyway I have updated the plugin..

Please give it a try..

Best regards..

[mohsinalimat]

After take latest pull then below error comes.

[kid1194]

@mohsinalimat A million thanks for your contribution bro..

It looks like the js files must be built before being used directly so I built the js files manually for v14, v13 and v12..

Now it should work 😁

Please update then give it another try and let me know if you face any problem..

Best regards..

[mohsinalimat]

Can you please do the following..

Go to Home > Customization > Form Customization > Custom Field
In the list, check if there is a custom field called Better Attach Options
If there is no custom field, then create a new field and set the following data:
Document: DocField
Label: Better Attach Options
Field Type: Small Text
Field Name: better_attach_options
Depends On: eval:in_list(['Attach', 'Attach Image'], doc.fieldtype)
Insert Below: options
After creating the custom field, you will be able to see it when editing an Attach or Attach Image field..

If you can't find the document DocField, please let me know..

In this one issue is there. I can see in property list but I can not see in customize form. Then after I added in core doctype DocField doctype then it works.

[kid1194]

In this one issue is there. I can see in property list but I can not see in customize form. Then after I added in core doctype DocField doctype then it works.

That is weird, because it's a custom field for DocField doctype so it must be included in any DocField doctype form..

Maybe it wasn't included because you didn't set the module for this custom field as Frappe Better Attach Control, which I forgot to tell you about..

[kid1194]

@mohsinalimat Hey bro..

Do you think that the plugin doesn't have any errors?
Do you think that it is production ready or not yet?

Best regards..

[mohsinalimat]

Finally Now, I can only pick image extension but After select image below error comes.

[kid1194]

Thanks bro for reporting this..

I have updated the plugin, please update and give it a try..

Best regards..

[mohsinalimat]

Please check this issue.

Screen.Recording.2023-03-08.at.8.34.11.PM.mov

[kid1194]

@mohsinalimat I have checked the video and I think that the file success upload handler that is being used is of the original control..

I have updated the plugin and added a lot of console logs so if it doesn't work we can find out what is going wrong..

Please give it a try and get back to me..

Best regards..

[mohsinalimat]

Please check console log.

Screen.Recording.2023-03-09.at.10.08.48.AM.mov

[kid1194]

@mohsinalimat Thanks a lot buddy..

Now I know where is the problem..

[mohsinalimat]

Great 👍

[kid1194]

@mohsinalimat I have updated the plugin. It should work..

Can you please check if the same problem exists in desk?

Best regards..

[mohsinalimat]

When pick image and upload then memory goes high.

[kid1194]

@mohsinalimat Browser memory or server memory?

Can you please provide a screenshot..

[mohsinalimat]

Browser memory.

[kid1194]

@mohsinalimat please post a screenshot of the console and of the memory..

[kid1194]

@mohsinalimat Thanks bro. It's a bug and I will fix it 😀..

[mohsinalimat]

[kid1194]

@mohsinalimat Thanks a lot bro for the screenshots..

There was a loop problem..

I have updated the plugin so please give it a try and get back to me..

Best regards..

[mohsinalimat]

Upload issue solve but image extension issue comes up. I already set {"allowed_file_types": ["image/*"]} in Better Attach Options and Options

[mohsinalimat]

Another issue in form attachment.

[kid1194]

@mohsinalimat Thanks a lot bro..

I will fix everything and get back to you..

I was just waiting for the confirmation from you regarding the web form so I can fix it for desk too..

Best regards..

[mohsinalimat]

Image extension issue is there in web from also.

[kid1194]

@mohsinalimat Thanks a million buddy..

I have updated the plugin and fixed every known bug 😁

Please give it a try and check if there are still some bugs in both, web form and desk..

Best regards..

[mohsinalimat]

Now, upload the image but image extension is not working.

[kid1194]

@mohsinalimat My mistake bro..

I made some changes to the list of allowed files to reduce memory but it is supposed to be done after it get used in html..

I have fixed this issue and added support for use of regex in allowed file types by adding $ as a prefix to the regex like $image\/([a-z]+)..

Please update and check if you still face any problem..

Many thanks to you bro for your help..

Best regards..

[mohsinalimat]

Still restrictions not working

[kid1194]

@mohsinalimat That is weird..

Does the allowed file types appear in the accept html attribute?

Anyway, I will check the code to see if I missed something..

Best regards..

[mohsinalimat]

I used in options {"allowed_file_types": ["image/*"]}

https://user-images.githubusercontent.com/973676/224465071-352d0445-a5d0-4d8d-a520-5662137a5db2.png

[kid1194]

@mohsinalimat I have updated the plugin and there will be some messages in the browser console..

Everything is supposed to work but please let me know if it doesn't and post a screenshot of the console..

Best regards..

[mohsinalimat]

Now, it's working but let me check tomorrow because take lots of browser memory in form and web form also.

I think log takes too much browser memory.

[mohsinalimat]

Screen.Recording.2023-03-13.at.10.46.33.AM.mov

[kid1194]

@mohsinalimat Thanks a lot buddy for your help..

Just to clarify things, you have an attach field in a child table and because of the attach field, you can't edit a row or add a new one in that child table. Am I right?

What about if the attach field is not in a child table, does it work or not?

[mohsinalimat]

What about if the attach field is not in a child table, does it work or not?

Not checked.

[mohsinalimat]

Yes. And it's sometimes this happened.

[mohsinalimat]

It's Attach field type.

[kid1194]

@mohsinalimat I have changed a bit for v14 desk and web form controls in terms of the filename click.

I have put some console logs for the click event and removed the previous logs..

So please update and check the console after you click on the attached filename, edit button and add row button..

If you find any log in the console, please post a screenshot..

Best regards..

[mohsinalimat]

• In web form working perfect now.
• Still Edit button not in form view, Please check below video.

ScreenRecorderProject1.mp4

[kid1194]

@mohsinalimat I have updated the plugin..

I have disabled the uploaded files list and preview dialog that appears after clicking the file name, only if the field is placed inside a child table..

I'm trying to find out if the problem is from the dialog or not..

There should be a console log stating that the field is inside a child table but if it doesn't appear in console it means that the child table check code isn't working..

Please give it a try and then let me know if it is still working in web form and if the bug is fixed in desk..

Best regards..

[kid1194]

@mohsinalimat Hey buddy..

I just wanted to check if you have tried the last update or not.

Best regards..

[mohsinalimat]

I think all is good. And in form edit view there is bug in frappe framework.

[kid1194]

@mohsinalimat Thanks a lot bro..

So the problem was with the dialog of uploaded files..

I will create a custom dialog that is not bound to frappe dialogs, then I will update the plugin and let you know..

Can you please tell me about the frappe bug you found so I can check if I can help them fixing it..

Best regards..

[mohsinalimat]

In Attach field type in child table issue.

[kid1194]

@mohsinalimat I have updated the plugin with custom dialog for uploaded files..

Please give it a try..

In Attach field type in child table issue.

You mean the edit dialog is still not opening?
Or it is something else?

[kid1194]

@mohsinalimat Bro, I just want to remind you about trying out the latest update..

Have you tried it?

In Attach field type in child table issue.

You mean the edit dialog is still not opening?
Or it is something else?

[kid1194]

@mohsinalimat Is the edit dialog not opening using the latest update? If yes, then I need to create a different way to display the list of uploaded files in child table..

Thanks a lot bro..

[kid1194]

@mohsinalimat Brother, I have updated the plugin..

Now the child table dialog should open and everything should work..

Please give it a try and let me know if you find any bug or problem..

Please also try it with multiple files disabled, using Attach Image and also when editing an entry with already uploaded files, only if you have time..

Best regards..

[kid1194]

@mohsinalimat I just want to check if everything is working or there are any issues..

Best regards..

[kid1194]

That's weird bro. I have made the dialog gets created on demand and gets destroyed when closed so it doesn't block the child table dialog. Just like dialog of frappe File Uploader..

Do you think that I should get rid of the dialog and find another way to list and preview the uploaded files?

Should I do that for child table only or for form also?

Thanks a lot for your help bro..

Best regards..

[kid1194]

@mohsinalimat Hey bro..

I have removed the dialog from the plugin and replaced it with a list that is displayed under the field..

I have removed the dialog from desk and web form..

So please whenever you are free, update the plugin and give it a try..

I hope that there will be no bugs this time..

Best regards..

[kid1194]

@mohsinalimat Hey bro..

I just want to check if everything is working well or there are still some bugs..

Best regards..