|
| 1 | +[-orange.svg)](https://docs.mendix.com/developerportal/app-store/app-store-content-support) |
| 2 | +[](https://appstore.home.mendix.com/link/modeler/) |
| 3 | + |
| 4 | +# FileDropper |
| 5 | + |
| 6 | +Inspired by the [Mendix Dropzone widget](https://appstore.home.mendix.com/link/app/916/). Drop files in your Mendix application. WebModeler compatible! This widget is based on [react-dropzone](https://github.com/react-dropzone/react-dropzone) and [MobX](https://github.com/mobxjs/mobx) (version 4, needed for IE11 compatibility). |
| 7 | + |
| 8 | + |
| 9 | + |
| 10 | +Show this dropzone: |
| 11 | + |
| 12 | + |
| 13 | + |
| 14 | +## Features |
| 15 | + |
| 16 | +- Drop files in a dropzone on your page |
| 17 | +- Automatically upload to Mendix |
| 18 | +- Save using a `POST` method (enabled progress bar) or `saveDocument` (this uses the `mx.data.saveDocument` method and should work offline) |
| 19 | +- Restrict files based on size, number of files and mime types |
| 20 | +- Verify a file after it is uploaded (onAccept Mf), or use a Verification Entity (see below) and verify before using a microflow or nanoflow |
| 21 | +- Execute microflow/nanoflow after it is succesfully uploaded |
| 22 | +- Show/hide labels & image previews |
| 23 | + |
| 24 | +> Widget size: ~180Kb, which is ~52Kb Gzipped online |
| 25 | +
|
| 26 | +## Compatibility |
| 27 | + |
| 28 | +### Mendix version |
| 29 | + |
| 30 | +Only works in Mendix 8.0.0 and upwards. This widget was created using MobX, which needs a newer React version. Due to that limitation this widget will not work in Mendix versions lower than 8. |
| 31 | + |
| 32 | +### Browsers |
| 33 | + |
| 34 | +- IE 11 |
| 35 | +- Chrome,Firefox,Safari,Edge |
| 36 | +- Should work on Mobile Web, but untested. If you find an issue, please let me know! |
| 37 | + |
| 38 | +**Known issues:** |
| 39 | + |
| 40 | +- In IE11, preview might not work or become very slow. If you experience problems with IE 11 (who uses this anyway??), please switch of previews. |
| 41 | +- Progress bar relies on SVG which does not render properly in Microsoft Edge. It's on the Todo to replace this with a normal DIV element |
| 42 | + |
| 43 | +## Basic configuration |
| 44 | + |
| 45 | +### 1. Data |
| 46 | + |
| 47 | + |
| 48 | + |
| 49 | +- Select and Entity that is (or extends) a `System.FileDocument` (`System.Image` also works) |
| 50 | +- **Name** attribute is required, others are not |
| 51 | +- Auto save is by default set to true. If for whatever reason you want to give the user control over that, set this to false |
| 52 | +- Save Method: |
| 53 | + |
| 54 | +We include the normal **POST** method (default) which will do a request to the Mendix server. The upside of that is that it includes a progress bar, which is beneficial if you handle big files or have a slow connection. If for whatever reason this doesn't work, you can use the **saveDocument** method. This uses `mx.data.saveDocument` and should (need to verify) also work offline. |
| 55 | + |
| 56 | +### 2. Restrictions |
| 57 | + |
| 58 | + |
| 59 | + |
| 60 | +- Max file size can be set to 0 to have no restrictions. This is always in Mb (1024 * 1024 bytes) |
| 61 | +- Max files can be set to 0 to have no restrictions. If it is set to 1, the dropzone (which is clickable) will also restrict the amount of files you can select in the file dialog |
| 62 | +- Mime types is used to restrict the type of files that can be uploaded. This is not fool-proof and might not work the same across browsers. Furthermore, if the Entity set in Data is of type `System.Image`, this option will be ignored. |
| 63 | + |
| 64 | +### 3. Verification |
| 65 | + |
| 66 | + |
| 67 | + |
| 68 | +Verification can be done in two ways: |
| 69 | + |
| 70 | +- onAccept Mf: Microflow that is executed after upload. This can be done when handling small files, but will polute your system with files that are uploaded and maybe not removed |
| 71 | +- beforeAccept Mf/Nf: This method uses an extra Entity (non-persistant!) that will be filled with some data from the file (name, size, type, extension) and sent to a microflow/nanoflow. This Mf/Nf will return a string. If the string is `""` or `empty`, it is considered accepted. If the string contains a text, this is used as the error message in the widget. |
| 72 | + |
| 73 | +### 4. Events |
| 74 | + |
| 75 | + |
| 76 | + |
| 77 | +- This microflow/nanoflow (can be used both) will be executed after a succesful upload. It will send the file object itself as an input parameter |
| 78 | + |
| 79 | +### 5. UI |
| 80 | + |
| 81 | + |
| 82 | + |
| 83 | +- For various icons you can either use the standard Bootstrap Gylphicon (the classname will be prefixed with `glyphicon glyphicon-`) or a built-in icon. |
| 84 | + |
| 85 | +### 6. Texts |
| 86 | + |
| 87 | + |
| 88 | + |
| 89 | +- Various texts can be configured. These are actually translatable strings, so the can be translated in Mendix based on the locale. |
| 90 | + |
| 91 | +## Demo project |
| 92 | + |
| 93 | +> _Will be published soon._ |
| 94 | +
|
| 95 | +Here is the used Domain Model: |
| 96 | + |
| 97 | + |
| 98 | + |
| 99 | +## Issues, suggestions and feature requests |
| 100 | + |
| 101 | +Please file an issue here on Github |
| 102 | + |
| 103 | +## Development and contribution |
| 104 | + |
| 105 | +TBD... |
| 106 | + |
| 107 | +## TODO |
| 108 | + |
| 109 | +- Add unit tests |
| 110 | +- Add e2e tests |
| 111 | +- Replace progress bar with proper div so it works in Edge |
| 112 | +- Add styling properties (class prefixes etc), replace some BEM |
| 113 | +- Make document icon optional |
| 114 | + |
| 115 | +## IDEAS |
| 116 | + |
| 117 | +- This widget is perfect right? Who needs new ideas? ;-) |
| 118 | + |
| 119 | +## License |
| 120 | + |
| 121 | +Apache 2 |
0 commit comments