How upload working on zk

Upload component: Any zk component, like a button or link, can be added to the user interface. When clicked, it will open a file dialog, allowing the user to select files. Refer to the guide for specific setup details.

Note: Even if we set up a button component to handle file uploads, it doesn't automatically transform into a file input field. It still functions as a standard button, file input is handle by Upload widget

Each upload component you define triggers the creation of a corresponding Upload widget. This widget is responsible for generating the file input field, which serves as control to show file dialog

NOTE:

• The onChange event of the file input is registered within the Upload.prototype.initContent method. See jq(inp).change(_onchange);

• The file input (and entire form) is being regenerated in somewhere, so avoid caching it

• ref points to the upload component (dom)

• The reference to the file input is obtained using the following code (The condition parent != null might occur when using UploadManage it's EE feature)

When use click to upload component (use Button as example) onclick handle call Upload to show file browse

After user choose file onchange is called to handle it and do upload file

How to implement drag and drop to upload file

1. Need a normal upload component setup follow guide

2. Setup a drop area, this one reference to upload component

3. when handle drop event

   1. get reference to file input

   2. set FileList from DataTransfer and set to file input

   3. let file input fire a onChange event to do upload

yes - no problem - I think the progress bar is not important, the normal upload button doesn’t have it.

Thanks for your help, really appreciated.

I know what you concern, i still continue working on this to refine, i just push for test

key point here, i don’t manual do upload like i reuse function of upload button (will do wiki to explain)

about progress bar: it not work at all on file button upload also drag on drop implement on idempiere-5312 (you can test by do on slow network) it’s explain on https://tracker.zkoss.org/browse/ZK-3205

i saw description on ZK-3277 but not yet find out how to setup it

client side progress counting
-> avoids a server side round trip
-> prevents timing issues with load balancers/proxies/virus scanners

Thanks , I created the pull request 2555 from your branch.

My tests went fine, now I can upload files again using drag and drop.

There are just three things that I miss:

• as the input.js script is changed I think the timestamp of org.idempiere.commons must be changed too in lang-addon.xml

• in the actual version, when dropping a file into the attachment dialog it changes to a box surrounded by a green line, that was a good indicator about the area where I can drop the file, because not the whole dialog is droppable. This indicator is lost in the pull request

• the actual version shows also a progress meter, I don’t mind if progress meter is not added back, but at least there must be the “Processing” spinning wheel. I don’t know if that still works because in my local tests the upload is too fast to see if the processing is shown or not.

Hi
I’ll try to have a look on monday, don’t have time ATM.
Thanks anyway