Usage
lf-ng-md-file-input directive will return an array via lf-files attribute binding,
the object in array contain two object are lfFile and lfDataUrl,
that you can grab file and preview dataurl easily.
The lf-submit attribute specifies a callback function that will be triggered when clicking on submit button.
Basic
<![CDATA[
<lf-ng-md-file-input lf-files="files01" lf-api="api01" ng-disabled="disabled01" ></lf-ng-md-file-input>
<md-button class="md-raised md-warn" ng-click="api01.removeAll()">remove all file outside</md-button>
<md-checkbox ng-model="disabled01" aria-label="disabled01">
Disable
</md-checkbox>
]]>
remove all file outside
Disable
Submit button
<![CDATA[
<lf-ng-md-file-input lf-files="submitButtonFiles" lf-on-submit-click="onSubmitClick" submit ng-change="onSubmitFilesChange()"></lf-ng-md-file-input>
]]>
Multiple
<![CDATA[
<lf-ng-md-file-input lf-files="files02" lf-api="api02" multiple></lf-ng-md-file-input>
<md-button class="md-raised md-warn" ng-click="api02.removeAll()">remove all file outside</md-button>
]]>
remove all file outside
Progress
<![CDATA[
<lf-ng-md-file-input lf-files="filesProgress" multiple progress></lf-ng-md-file-input>
]]>
Custom placeholder and caption
<![CDATA[
<lf-ng-md-file-input lf-files="files03" lf-placeholder="{{myPlacehoder}}" lf-caption="{{myCaption}}" ></lf-ng-md-file-input>
<div layout="row">
<md-input-container flex>
<label>My placeholder</label>
<input ng-model="myPlacehoder">
</md-input-container>
<md-input-container flex>
<label>My caption</label>
<input ng-model="myCaption">
</md-input-container>
</div>
]]>
My placeholder
My caption
Custom labels
<![CDATA[
<lf-ng-md-file-input lf-files="files04" lf-browse-label="Search" lf-remove-label="Delete" ></lf-ng-md-file-input>
]]>
<![CDATA[
<lf-ng-md-file-input lf-files="files05" lf-browse-label="Search" lf-remove-label="Delete" lf-drag-and-drop-label="Drag and Drop here!" drag preview></lf-ng-md-file-input>
]]>
Preview
<![CDATA[
<lf-ng-md-file-input lf-files="files06" preview ></lf-ng-md-file-input>
]]>
Drag
<![CDATA[
<lf-ng-md-file-input lf-files="files07" drag></lf-ng-md-file-input>
]]>
Combination
<![CDATA[
<lf-ng-md-file-input lf-files="files08" lf-option="optoin08" lf-placeholder="Pick Image" lf-browse-label="Search" lf-remove-label="Delete" multiple drag preview submit ng-disabled="disabled06"></lf-ng-md-file-input>
]]>
Disable
Validation
<![CDATA[
<form name="testForm" layout="column">
<lf-ng-md-file-input name="files00" lf-files="files09" lf-api="api09" lf-required lf-maxcount="5" lf-filesize="10MB" lf-totalsize="20MB" lf-mimetype="image/*" multiple drag preview></lf-ng-md-file-input>
<div ng-messages="testForm.files00.$error" style="color:red;">
<div ng-message="required">This is required.</div>
<div ng-message="maxcount">Too much files.</div>
<div ng-message="filesize">File size too large.</div>
<div ng-message="totalsize">Total size too large.</div>
<div ng-message="mimetype">Mimetype error.</div>
</div>
<md-button type="button" ng-disabled="testForm.$invalid" class="md-raised md-primary" ng-click="api09.removeAll()">Submit</md-button>
</form>
]]>
Callback function
<![CDATA[
<script>
...
$scope.onFileClick = function(obj,idx){
console.log(obj);
};
$scope.onFileRemove = function(obj,idx){
console.log(obj);
};
...
</script>
<lf-ng-md-file-input lf-files="filesOnFileClick" lf-on-file-click="onFileClick" lf-on-file-remove="onFileRemove" preview drag multiple></lf-ng-md-file-input>
]]>
Add remote file
<![CDATA[
<script>
...
$timeout(
function(){
$scope.addRemoteFilesApi.addRemoteFile('http://shuyu.github.io/angular-material-fileinput/example/resources/sample.jpg','sample.jpg','image');
$scope.addRemoteFilesApi.addRemoteFile('http://shuyu.github.io/angular-material-fileinput/example/resources/sample.mp4','sample.mp4','video');
$scope.addRemoteFilesApi.addRemoteFile('http://shuyu.github.io/angular-material-fileinput/example/resources/sample.mp3','sample.mp3','audio');
$scope.addRemoteFilesApi.addRemoteFile('http://shuyu.github.io/angular-material-fileinput/example/resources/sample.pdf','sample.pdf','other');
}
)
...
</script>
<lf-ng-md-file-input lf-files="addRemoteFiles" lf-api="addRemoteFilesApi" preview drag multiple></lf-ng-md-file-input>
]]>