0

enter image description here

I don't do angularjs daily, and I've tried to add a upload file button. It should only take .zip and 20 MB max. I did

Try#1

<input class="pull-right" type="file" id="fileUpload" name="fileUpload" ngf-select="$ctrl.uploadFile()" ngf-pattern="'application/zip'" ngf-max-size="20MB">

Try#2

Add onchange="angular.element(this).scope().setFiles(this)"

<input class="pull-right" type="file" id="fileUpload" name="fileUpload" ngf-select="$ctrl.uploadFile()" ngf-pattern="'application/zip'" onchange="angular.element(this).scope().setFiles(this)" ngf-max-size="20MB">

and my component file I have

this.uploadFile = {};
this.uploadFile.Iserror=false;


this.uploadFile = function(files) {    
    this.uploadFile.Iserror=false;



    console.log(files); //undefined
    


                   
    if(files[0].type!=="zip"){
        alert("Not a zip file.");
        this.uploadFile.Iserror=true;
        return false;
    }       
};

enter image description here

What do I need to do to access the file I selected ?

code-8
  • 54,650
  • 106
  • 352
  • 604
  • You'll need a package to help - https://stackoverflow.com/a/20506037/1772933 – Kinglish May 07 '21 at 18:41
  • We can’t use pure angular js or with vanilla js to solve this ?? I hope we don’t have to include others libraries for this one browse button. – code-8 May 07 '21 at 18:42

1 Answers1

0

input

<input class="pull-right" type="file" ngf-max-size="20MB" ngf-select="$ctrl.uploadFile($file, $invalidFiles)" ngf-pattern="'*zip*'"/>

component

this.uploadFile = function(file, invalidFiles) {    
    console.log(file, invalidFiles);
};

console

enter image description here

access

console.log(file.name, file.size, file.type);
// ea8300-1.0.0.tar.gz 11980935 application/x-gzip
code-8
  • 54,650
  • 106
  • 352
  • 604