Support for file input field / Dropzone.js?

[roberttolton]

Hi, what would be the chance, or is it already possible, to integrate a file upload input field type, or something like Dropzone.js (which angular-formly already supports)?

Thanks!

[MacKentoch]

Hi,

Nice idea!

DropzoneJS would be nice to integrate in easyFormGenerator.
As you mentioned, it plays well in angular formly so it should play well too in easyFormGenerator.

The only thing I have to think about is :

• what and how I'll give access to configuration

The main configuration parameter is clearly the url.

The good news is :
EasyFormGenerator new version — v1.1.0 — is coming (this weekend or if I don't have enough time at least following week).
This version v1.1.0 was long time consuming since it was a complete ES6 migration.

So
I will have pleasure working on integrating DropZoneJS in the following version v1.1.1.

[MacKentoch]

v1.1.1 won't exist but v1.2.0 instead.
it will be a better support for ui-bootrap up to date versions (I mean when directives name changed to uib-*).

Then I take care (v1.2.1) of DropZoneJS (it is very demanded).

[MacKentoch]

I think Dropzone will not be able to integrate (don't worry I have a fallback solution).

Explanations:
Existing example with Dropzone in angular formly is more a hack than a regular formly template.

there is no:

formlyConfig.setType({})

// or if in config:
formlyConfigProvider.setType({})

But it remain in html (here is what I call hack since it breaks the principle of angular formly to generate from by a model not html)

      <form ng-submit="vm.onSubmit()" name="vm.form" novalidate>
        <formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form">
          <!-- drop zone is here it is not in vm.fields model...  -->
           <button dropzone="dropzoneConfig">
                    Drag and drop files here or click to upload
           </button>
          <button type="submit" class="btn btn-primary submit-button" ng-disabled="vm.form.$invalid">Submit</button>
          <button type="button" class="btn btn-default" ng-click="vm.options.resetModel()">Reset</button>
        </formly-form>
      </form>

fallback solution since I would like to have an upload control in easy Form Generator:
Good news is I found an example of file upload in angular formly
other way to implement file upload in angular formly

otherwise:
if someone reading has an implement of dropzone as a real angular formly type I will be interested to have an eye on it.

[MacKentoch]

v1.2.0 is now released, I will have more time to focus on upload file control.

let's go on!

[MacKentoch]

I don't find any working example that could fit in easyFormGenerator.

Until something works, I will go on refactoring easyFormGenerator using angular 1.5 components (and all new angular2 like stuffs)

• to why not being able to be more dynamic in adding new control
• to be ready to migrate to angular2 some day (hoping angular formly will migrate it would be great).

[ashkrishan]

@MacKentoch Yeh that sounds more beneficial to extend it so dynamic controls can be added.