required & ng-model

[tandvu]

input name="myInput" type="file" ngf-select
ng-model="form.value" name="file"
accept="image/*" ngf-max-size="2MB" required>{{myInput.$valid}}"

myInput.$valid is false even though the form.value (existing image) is a valid image. myInput.$valid only turn to true if I upload a new image.

Basically, I want the file upload is only required if there is no existing image.

Thanks,

Tan

[danialfarid]

Could you create a jsfiddle?

[tandvu]

It's too complicated to create a JSFiddle for what I am experiencing.

in controller: I define scope.picFile = "someUrl"

in html:
some complex loop
some complex loop
<input type='file' ngf-select ng-model='picFile'....

I notice this:

if the <input is outside the loop: scope.picFile retains value
if the <input is inside the loop with ngf-select: scope.picFile somehow is set to null
if the <input is inside the loop WITHOUT ngf-select: scope.picFile retains value

I don't expect you to be able to find the problem by what I gave you. But if it's obvious enough or something you suspect maybe the problem, I would appreciate your help.

Thank you,

Tan

[danialfarid]

The question is how do you set the initial value of the model that is bind to the file input ngf-select? You need to first select a file so you could have a file to be assigned to the model.

[tandvu]

As I mentioned in previous post, I set scope.picFile to 'someUrl'. Then I bind the input by ng-model = 'picFile'. It works fine (I can see the image). Only when I put the ngf-select in my loop, somehow the scope.picFile is set to null or undefined. I tested by making one ngf-select outside the loop, one inside but both bind to the same scope.picFile. the one outside the loop still has the image but the one inside lost it. It made me wonder the one inside the loop might have pointed to something else. But I know I did not touch scope.picFile anywhere other than ng-model inside the two ngf-select.. I can put the project in a zip file and share on Google drive.

Thank you

Tan

[danialfarid]

url is not a file, so setting the input file model to a url doesn't make sense much. In order to see it in ngf-src or ngf-thumbnail you can do ngf-thumbnail="picFile || someUrl" so it would initially so the url and once you select the file it would show the file.

[fnbns]

Hello,
Short question how can I display a file from an url : http://example.com/file.png in ngf-src ? I get an error of type : Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

I understand that I might need to download the file to base64 ?
If so, how can I achieve this in angular?

Thank you.

[danialfarid]

@FunnyBones ngf-src="'http://example.com/file.png'"

[pbouda]

What would be the best way to create an initial value programmatically for the model that is accepted as valid? I had this structure in previous versions of ng-file-upload, and it worked well:

var file = {
    name: ...,
    type: ...,
    blob: ...,
    $ngfBlobUrl: ...,
    size: ...
};

How can I create sth like this that will be accepted as a valid file in version 12?

[danialfarid]

@pbouda it needs to be of type File or Blob so use File constructor new File(['my file'], 'my file')