shuyu / angular-material-fileinput Goto Github PK

AngularJS 1.5.5 provides to support handle additional $http events. #14436

View:
<lf-ng-md-file-input name="files00" lf-files="vm.files" lf-api="vm.addRemoteFilesApi" lf-option="optoin08" lf-drag-and-drop-label="تصاویر را اینجا بندازید (بکشید و اینجا رها کنید)" lf-placeholder="تصاویر انتخاب شده" lf-browse-label="انتخاب تصاویر" lf-remove-label="حذف همه" lf-maxcount="20" lf-filesize="10MB" lf-totalsize="20MB" lf-mimetype="image/*" accept="image/*" multiple drag preview></lf-ng-md-file-input>

Controller:
storeService.details({storeId: $stateParams.id}).then(function (res) { vm.store = res.data.storeDetails; $timeout( angular.forEach('vm.store.pictures', function (item, key) { vm.addRemoteFilesApi.addRemoteFile(item.url, item.name, 'image'); }) )}, function (res) { console.log('error: ', res.statusText); });

When drag and dropping with preview, a zip file will show the binary content, rather than the attachment icon as on the readme. This can be seen on the linked demo page, by dragging and dropping any file onto the "Combination" example

When adding

<lf-ng-md-file-input lf-files='files' preview drag multiple progress></lf-ng-md-file-input>

to any template, an error is displayed:

vendor.js:118 Error: [$compile:tpload] http://errors.angularjs.org/1.5.8/$compile/tpload?p0=lfNgMdFileinput.html&p1=404&p2=Not%20Found
    at vendor.js:6
    at vendor.js:156
    at vendor.js:131
    at m.$eval (vendor.js:145)
    at m.$digest (vendor.js:142)
    at m.$apply (vendor.js:146)
    at l (vendor.js:97)
    at J (vendor.js:102)
    at XMLHttpRequest.t.onload (vendor.js:103)

The vendor.js contains the dependencies but the error is being triggered directly on angularjs code v1.5.8.

Hello,

I can't put multiple lf mimetype without having validation errors :

lf-mimetype="image/png,image/gif" won't work but accept="image/png,image/gif" will work.

Any idea ?

Thank you

I would like to use it with NPM and later browserify it within mine. Hope it available soon

I had tried Demo page of this components in IE and its not opening file browse window (https://shuyu.github.io/angular-material-fileinput/example/)

in Console no error reported.

I am getting below warning when Include directive in my code.

[Warning] Invalid CSS property declaration at: * (lf-ng-md-file-input.css, line 144)
[Warning] Invalid CSS property declaration at: * (lf-ng-md-file-input.css, line 145)
[Warning] Invalid CSS property declaration at: * (lf-ng-md-file-input.css, line 146)
[Warning] Unexpected CSS token: : (lf-ng-md-file-input.css, line 170)
[Warning] Unexpected CSS token: : (lf-ng-md-file-input.css, line 182)

Please advise

Hi! I am trying to detect when the input state changes, for example when it is undefined or when it has an image, something like "ng-change", is there any function like this?
Thanks for your time.

Hi,
I want to use this component in my project but i am not sure how to use it.

How can i get value in scope? and is there any way that i can use ng-model

Thanks

Is it possible to prevent audio, image, and video? I only want to upload a text doc for example a word doc or excel doc for parsing. I don't want to allow for images, audio, and video for my purposes. Thank you!

I have an angular-material-fileinput inside md-dialog which is part of "angular material". However, when i am trying to get the model which contain "lfFile" object from main controller $scope, it is give me "undefined". It is even give me "undefined" too at $scope controller of the md-dialog it self. When i see from ng-inspector plugin for Chrome, seem it is create new $scope which is outside of my controller.
Currently i can get the "lfFile" by following:
angular.element('#files').data('$ngModelController').$modelValue[0].lfFile

However i wonder if there is easy way to get the $scope which contain model value for my case. Please advice if there is better way, thanks in advance.

Hi,
I'm using this directive and it's really good. but i have a problem.
When I select file (directive is not multiple), everything is ok and this code works fine:

app.controller('uploadCtrl', function($scope) {
    $scope.$watch('files.length', function(newVal, oldVal) {
        console.log($scope.files);
        if($scope.files.length != 0){
            $scope.fileURLAddress = $scope.files[0].lfDataUrl;
        } else {
            $scope.fileURLAddress = null;
        }
    });
});

but in one situation it's not working:
I select file, without removing that, select another one.
It works fine if I remove the previous file and select new one, but if I want to overwrite that, it's not working.
What can i do?
Thx.

Currently converting from bootstrap to material and this package is great. Thank you.

I get the following error message when I try to use the drag and drop feature. Using the upload button works fine. I think this might have something to do with jQuery being used.

Uncaught TypeError: Cannot read property 'files' of undefined(anonymous function)
@ lf-ng-md-file-input.js:389
jQuery.event.dispatch @ jquery.js:4737
elemData.handle @ jquery.js:4549

The line of code that is giving the issue is in the drop event handler:

389: var files = e.target.files || e.dataTransfer.files;

It works fine if I re-assign the event with the original, if exists:

389: if (angular.isObject(e.originalEvent)) e = e.originalEvent;
390: var files = e.target.files || e.dataTransfer.files;

Any help is greatly appreciated.

For example , i have a exists file add angular-material-fileinput?

Control wont respond on selection of large files (upto 5GB). I have given the file size limit aslf-filesize="6000MB" lf-totalsize="7000MB"

Is there any fix for this issue or what is the max size control supports?

Hi how would i upload the file to a php API? that looks like this:
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

$destination = "myUrl";

$postData = json_decode(file_get_contents('php://input'), true);

$filename = $_FILES['image']['name'];

move_uploaded_file($_FILES['image']['tmp_name'], $destination);

}

When selected larger files (upto 400mb) for upload, it takes few seconds (upto 8-10 secs) to display the file preview

Validation API does not function.

Hello, my friend!
Found blocking "bug".
When angular application is working in "Production mode":
angular.module('appModule').config(['$compileProvider', function($compileProvider) { $compileProvider.debugInfoEnabled(false); }]);
Then, your control is not working. When I try to select file it throws me an error:
onFileChanged is undefined.

Is it possible to use the aria-label attribute with angular-material-fileinput?

following messages are shown by chrome:
ARIA: Attribute " aria-label ", required for accessibility, is missing on node
<input type="file" accept="" ng-disabled="isDisabled" class="lf-ng-md-file-input-tag ng-scope md-input" onchange="angular.element(this).scope().onFileChanged(this)" id="input_8" aria-disabled="false">

Could you please provide an example of usage with multer?

I'm trying but I still don't get it.

Thanks in advance.

It would be nice if we could add the ability to do some validations such as file size, required etc.

Hi,
This is my code:

$scope.$watch('files.length', function(newVal, oldVal) {
            $scope.myCroppedImage='';
            $scope.fileURLAddress='';
            $scope.isNull = true;
            $scope.avatarEditing = false;
            $scope.avatarCropped = false;
            if($scope.files.length != 0){
                $scope.fileURLAddress = $scope.files[0].lfDataUrl;
                $scope.isNull = false;
                $scope.avatarEditing = true;
            } else {
                $scope.fileURLAddress = null;
            }
        });

when I load the page, this error shows in the console:

Cannot read property 'length' of undefined

What is the problem?

Hello,,
Thanks for the great work on this module for ngMaterial.
I've needed to do a check on whether the user confirms file deletion or not so I edited lines from:
if(angular.isFunction(scope.lfOnFileRemove)){
and rewrote it like:
if(angular.isFunction(scope.lfOnFileRemove)){ if (scope.lfOnFileRemove(obj,idx)) { scope.lfFiles.splice(idx,1); return false; } } else { scope.lfFiles.splice(idx,1); return false; }
So, I hope this makes its way to this module (Sorry, I'm too lazy to fork and make a PR 😅).

I get the error: "Unknown provider: eProvider <- e" when using this. When I remove it from my app, all works fine. Including lfNgMdFileInput causes that error

var updateTextCaption = function(){
                    if(scope.lfFiles.length == 1){
                        scope.strCaption = '' + scope.lfFiles[0].lfFileName;
                        scope.isFilesNull  = false;
                    }else if(scope.lfFiles.length > 1){
                        scope.strCaption = '' + scope.lfFiles.length + ' files selected';
                        scope.isFilesNull  = false;
                    }else{
                        scope.strCaption = '';
                        scope.isFilesNull  = true;
                    }
                };

can "files selected" to be control by us??

html:

<lf-ng-md-file-input multiple lf-files="images" 
        lf-mimetype="image/*" lf-remove-label="delete"  preview></lf-ng-md-file-input>

Step:

1. open file 1 name: "abc.jpg"
2. open other file name "abc.jpg" (diffirence folder)
   --> file 1 will be delete

On removing attribute 'preview' the view continues to display the preview . The code for scope.isPreview is not actually used to turn off the template being included in the view.

Im facing issue in clearing selected file after submitting of the form .

view :

after post im executing this below peice of code for clearing the files selected previously

ctrl :
$scope.testModel = undefined.

With single file upload, if I first choose a non-valid file, without removing it, select another valid file (overwrite previous one), the validator will not be called. Thus, the input remains invalid.

The issue doesn't exist the other way around. Weird.

Such as bootstrap file-input,the link is [http://plugins.krajee.com/file-advanced-usage-demo](Bootstrap File Input Demo)

Using the

<lf-ng-md-file-input lf-files="myController.files" ... ></lf-ng-md-file-input>

i can't watch the variable. Is a kwnown issue or is normal?

In chrome no problem

In ff the dialog is never open, because

var elFileinput = event.target.children[2];

elFileinput is always undefined
but using angular 1.5.9 it works!
(angular 1.6 keeps breaking my stuff!)

I've submitted a PR with details, but I found that setting files to null crashed my app because of the unhandled exception this addresses.

PullRequest: #69

Please explain hows we can use multiple files like pdf , image etc

hey,
is there an easy way to implement a spinner or a progressbar that indicates how much time is left to upload?

I'm able to select files but when I click submit to post them to the server the $scope.files is undefined. The $watch is not triggered when I select files.

Html:
<lf-ng-md-file-input lf-files="files" multiple></lf-ng-md-file-input>

Js:

Module:
angular.module('documentModule', [ 'ngRoute', 'ngMaterial', 'ngAnimate' ,'lfNgMdFileInput' ]);

Controller:

angular.module('documentModule').controller('documentViewModel', documentViewModel); documentViewModel.$inject = ['$scope','$http'];

  function documentViewModel($scope, $http) {
     //$scope.files =[];
      $scope.$watch('files.length', function (newVal, oldVal) {
        console.log($scope.files);
      });
 }

I have read that lf-files="files" acts similar to ng-model ="files" but it does not bind to $scope.

Is there any size limit?

Does it allow to upload large files which needs to be uploaded in multiple chunks by having keep alive?

In package.json "main": "./dist" should be "main": "./dist/lf-ng-md-file-input.js".

I used browserify and it couldn't find the module because of wrong main field

I have used in angular 2. How to used file input in angular2?

I need change the order of the images into preview area. It's possible?

It is not working with $mdDialog in IE10 but it is working fine in google chrome. how can i fix this problem.

Currently only files are allowed to select for upload but it allows folder to be dragged and dropped. How can I avoid folder drag and drop?

http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=FileUpload&p1=Error…udflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.7%2Fangular.min.js%3A19%3A463)

hey,
I have some image urls and i want to populate the files model in the same format as its when using browse. How can i do this? and also is there any event that gets generated on selecting files?