File upload field?

[etodanik]

How complicated would it be to create a File field support? I'd be happy for a few pointers since I'm going to need this functionality in my project.

[davidlgj]

Hi @israelidanny,

extending schema form with a new form field is kind of simple, so the complication probably mostly lies in how to handle the file upload, how it should validate etc.

There is no documentation (yet) on how to create your own add-on, but looking at either the colorpicker or the datepicker

A god place to start is the .config of either add-ons, there are two interesting parts.

The first is adding a function to the schemaFormProvider.defaults object, see here. This is strictly not necessary and just add default form definitions, in the datepicker case this is the rule that says "if its type string and 'format'=date it's a datepicker". Without out it you can always specify it anyways in the form definition.

The second part is more important (src here)

schemaFormDecoratorsProvider.addMapping(
'bootstrapDecorator',
'datepicker',
'directives/decorators/bootstrap/datepicker/datepicker.html'
);

Basically it registers the form type datePicker and says that if that ever comes up use 'directives/decorators/bootstrap/datepicker/datepicker.html' as the template. Then its actually up to the template to render the field.

All fields in schema form should have a ng-model="$$value$$" to hook into validation and bind to the model, so if you find a angular directive for file upload that does that then you're pretty much done! (the $$value$$ part is a ugly hack to bind the correct model value dynamically, its' actually replaced before $compiling the template)

[etodanik]

Is there any way at all to access $$value$$ from a controller I created for the file field? Everything is very good so far, the only thing is that I had to create a controller that does stuff with the server, and eventually gets an AJAX response with the URL of the file. I need to set that sort of information into $$value$$ but have no idea how to touch it from a controller.

[mike-marcacci]

Hi @israelidanny, you shouldn't have to modify the template directly, rather, I'd suggest making a directive that is used by the the decorator. Check out this directory to see how I implemented file uploads for one of my projects.

[davidlgj]

@mike-marcacci is right, make a directive that requires the ngModel.NgModelController and set the value with $setViewValue this way it will play nice with the rest of the form and you can even do validation etc.

[Dervisevic]

This has been answered and no new comment for 2 months so I'm closing it, if you have any further questions feel free to reopen it.

[etodanik]

Your example was actually very close to my implementation, just with the directive declaration. Big like.

However, quick question regarding validation. Say I want to limit the file extensions or file size e.t.c

How do I do the validation? I see sfValidator.validate(scope.form, scope.data); being called in scope.validateArray. But I'm not sure where to go next.

[stefanhuber]

Has anybody released the Upload Field as an Open Source extension?

[FrankOrtmann]

I too would be interested in using such an extension.

[spva-git]

https://github.com/chengz/schema-form-file-upload

This might help!!!!!!

[FrankOrtmann]

Thanks, will look into it!