File Upload

[dzeroone]

I can't use custom directive to upload file. I have tried to use https://github.com/danialfarid/ng-file-upload module. But angular keep saying "TypeError: Illegal invocation"

I have tried to follow instructions from these links
https://gitter.im/formly-js/angular-formly/archives/2015/03/08
formly-js/angular-formly-templates-lumx#12

How should we suppose to implement file uploader? I need to upload images after saving other form fields except file type input.

[kentcdodds]

Could you please produce an example of the problem. It's very difficult for me to help without that. Clone this template to produce the example.

[dzeroone]

I have created an example. Please take a look.
http://jsbin.com/livasutuna/2/edit?js,console,output

I have noticed that if remove 'ngf-change' directive from the element, it doesn't throw error, But I don't have value of desired field.

[kentcdodds]

This appears to be a problem with how ngf-select deals with the ng-model and how angular-formly watches the model (the error is thrown when angular's doing dirty checking). I personally use angular-upload and have had great success with it. If you really want to use ng-file-upload, then please help me know what if I need to change anything in angular-formly to make it work. I'm afraid I don't have time right now to figure it out.

[dzeroone]

Thanks for your suggestion. I will try to implement this and find a solution for angular formly.

[mdailous]

Hi Kent,

I found Angular Formly this weekend and WOW... amazing work. Thank you! Today, I ran into the same problem as the other user, using ng-file-upload. I'm trying to use angular-upload per your suggestion above, but I can't get the model to update with the selected value. Can you take a look at my definition and tell me if I'm missing anything?

In my app.run method, I'm creating my custom object like so:

formlyConfig.setType(
{
name: 'licensefile',
extends: 'input',
defaultOptions: {
ngModelAttrs: {
multiple: {
bound: 'ng-multiple',
attribute: 'multiple'
},
accept: {
bound: 'ng-accept',
attribute: 'accept'
}
},
templateOptions: {
label: 'License File',
type: 'file',
required: true,
multiple: false,
accept: '*.lic'
},
validation: {
messages: {
required: function (viewValue, modelValue, scope) {
//return scope.to.label + ' is required '
return 'Please select a license file';
}
}
}
}
});

In my directive, I have this definition in my fields array:
{
type: 'licensefile',
key: 'lfile',
templateOptions: {
focus: true,
}
},

I'm printing out the value of my model on the page, and I can see when I enter valid values into the other fields, but when I select a file, I get nothing.

Thanks for the great tool,
Michael

[kentcdodds]

Hey Michael, glad you found angular-formly and you like it! The best way to get help is by following instructions here: help.angular-formly.com

[mdailous]

Posted in the chat.angular-formly.com room. I couldn't find that room in Stackoverflow... should I ask a "general" question on stack, or is asking in chat.angular-formly.com enough?

Thanks Kent.

[kentcdodds]

chat.angular-formly.com is not a stack overflow room. It just forwards you to a chat room on gitter. It can be helpful for you to ask a stack overflow question with the angular-formly tag as well because sometimes the people over there can help answer your questions as well.

[mdailous]

I'll post the question there, as well. Though I was hoping, since you indicate you use angular-upload, that you'd be able to quickly see what I may have messed up in my code. I didn't have any problem with angular-file-upload uploading the model, but it did have a problem with the angular digest cycle. Now, with angular-upload, the model isn't getting updated, so I'm at a standstill on my project. :(

[mdailous]

Thanks, I ended up creating a non-formly form for the file upload, but I’d rather keep everything in formly to be consistent. I’ll give this a try and let you know. :)

Thanks again,
Michael

On Aug 4, 2015, at 3:12 AM, Abdellatif Ait boudad notifications@github.com wrote:

seems related to $watch I made a quick fix to make it work see my commit aitboudad/angular-formly@92cb0b5 aitboudad@92cb0b5 but not sure if it can be added into angular-formly \cc @kentcdodds https://github.com/kentcdodds

[victor-duarte]

Had the TypeError: Illegal invocation issue with ng-file-upload.
The error seems to be related to the File object created once a file is selected. It has an attribute lastModifiedDate that stores a Date object as a string with no quotes. I am guessing that when its evaluated the type is not valid/illegal.

Had to do some workarounds to make formly and ng-fileupload happy, although i am not :P.
Having shared this, i am not sure where a fix would go or if it can be fixed, at least it works for me now.

created plnkr with something similar to what was implemented. Hope it is useful to anyone.

Regards,
Victor

[dorinniscu]

If I replace "model[options.key]" with a string "files" for example it works fine.