Skip to content
İsmail Arılık edited this page Nov 14, 2017 · 5 revisions

Directives

  • nv-file-drop
<!-- minimal -->
<element nv-file-drop uploader="{FileUploader}"></element>
<!-- maximal -->
<element nv-file-drop uploader="{FileUploader}" options="{Object}" filters="{String}"></element>

The attribute uploader must be a instance of FileUploader.
The attribute options may be a {FileItem} options or custom properties.
The attribute filters may be {String} that contains filter names separated by ,. For example: 'filterName1, filterName2'. These filters must be predefined:

uploader.filters.push({name:'filterName1', fn:function() {/* your code here */}});
uploader.filters.push({name:'filterName2', fn:function() {/* your code here */}});
  • nv-file-select
<!-- minimal -->
<input type="file" nv-file-select uploader="{FileUploader}"/>
<!-- maximal -->
<input type="file" nv-file-select uploader="{FileUploader}" options="{Object}" filters="{String}"/>
  • nv-file-over
<!-- minimal -->
<element nv-file-over uploader="{FileUploader}"></element>
<!-- maximal -->
<element nv-file-over uploader="{FileUploader}" over-class="{String}"></element>

Service

  • FileUploader

Classes

FileUploader

Properties

  • url {String}: Path on the server to upload files
  • alias {String}: Name of the field which will contain the file, default is file
  • queue {Array}: Items to be uploaded
  • progress {Number}: Upload queue progress percentage. Read only.
  • headers {Object}: Headers to be sent along with the files. HTML5 browsers only.
  • formData {Array}: Data to be sent along with the files
  • filters {Array}: Filters to be applied to the files before adding them to the queue. If the filter returns true the file will be added to the queue
  • autoUpload {Boolean}: Automatically upload files after adding them to the queue
  • method {String}: It's a request method. By default POST. HTML5 browsers only.
  • removeAfterUpload {Boolean}: Remove files from the queue after uploading
  • isHTML5 {Boolean}: true if uploader is html5-uploader. Read only.
  • isUploading {Boolean}: true if an upload is in progress. Read only.
  • queueLimit {Number} : maximum count of files
  • withCredentials {Boolean} : enable CORS. HTML5 browsers only.

Methods

  • addToQueue function(files[, options[, filters]]) {: Add items to the queue, where files is a {FileList|File|HTMLInputElement}, options is an {Object} and filters is a {String}.
  • removeFromQueue function(value) {: Remove an item from the queue, where value is {FileItem} or index of item.
  • clearQueue function() {: Removes all elements from the queue.
  • uploadItem function(value) {: Uploads an item, where value is {FileItem} or index of item.
  • cancelItem function(value) {: Cancels uploading of item, where value is {FileItem} or index of item.
  • uploadAll function() {: Upload all pending items on the queue.
  • cancelAll function() {: Cancels all current uploads.
  • destroy function() {: Destroys a uploader.
  • isFile function(value) {return {Boolean};}: Returns true if value is {File}.
  • isFileLikeObject function(value) {return {Boolean};}: Returns true if value is {FileLikeObject}.
  • getIndexOfItem function({FileItem}) {return {Number};}: Returns the index of the {FileItem} queue element.
  • getReadyItems function() {return {Array.<FileItems>};}: Return items are ready to upload.
  • getNotUploadedItems function() {return {Array.<FileItems>};}: Return an array of all pending items on the queue

Callbacks

  • onAfterAddingFile function(item) {: Fires after adding a single file to the queue.
  • onWhenAddingFileFailed function(item, filter, options) {: When adding a file failed.
  • onAfterAddingAll function(addedItems) {: Fires after adding all the dragged or selected files to the queue.
  • onBeforeUploadItem function(item) {: Fires before uploading an item.
  • onProgressItem function(item, progress) {: On file upload progress.
  • onSuccessItem function(item, response, status, headers) {: On file successfully uploaded
  • onErrorItem function(item, response, status, headers) {: On upload error
  • onCancelItem function(item, response, status, headers) { - On cancel uploading
  • onCompleteItem function(item, response, status, headers) {: On file upload complete (independently of the sucess of the operation)
  • onProgressAll function(progress) {: On upload queue progress
  • onCompleteAll function() {: On all loaded when uploading an entire queue, or on file loaded when uploading a single independent file

FileItem

Properties

  • url {String}: Path on the server in which this file will be uploaded
  • alias {String}: Name of the field which will contain the file, default is file
  • headers {Object}: Headers to be sent along with this file. HTML5 browsers only.
  • formData {Array}: Data to be sent along with this file
  • method {String}: It's a request method. By default POST. HTML5 browsers only.
  • withCredentials {Boolean} : enable CORS. HTML5 browsers only.
  • removeAfterUpload {Boolean}: Remove this file from the queue after uploading
  • index {Number} - A sequence number upload. Read only.
  • progress {Number}: File upload progress percentage. Read only.
  • isReady {Boolean} - File is ready to upload. Read only.
  • isUploading {Boolean}: true if the file is being uploaded. Read only.
  • isUploaded {Boolean}: true if the file was uploaded. Read only.
  • isSuccess {Boolean}: true if the file was uploaded successfully. Read only.
  • isCancel {Boolean} : true if uploading was canceled. Read only.
  • isError {Boolean} - true if occurred error while file uploading. Read only.
  • uploader {Object}: Reference to the parent Uploader object for this file. Read only.

Methods

  • remove function() {: Remove this file from the queue
  • upload function() {: Upload this file
  • cancel function() {: Cancels uploading of this file

Callbacks

  • onBeforeUpload function() {: Fires before uploading an item.
  • onProgress function(progress) {: On file upload progress.
  • onSuccess function(response, status, headers) {: On file successfully uploaded
  • onError function(response, status, headers) {: On upload error
  • onCancel function(response, status, headers) { - On cancel uploading
  • onComplete function(response, status, headers) {: On file upload complete (independently of the success of the operation)

Filters

Registering of filters:

var uploader = new FileUploader({
    filters: [{
        name: 'yourName1',
        // A user-defined filter
        fn: function(item) {
            return true;
        }
    }]
});

// Another user-defined filter
uploader.filters.push({
    name: 'yourName2',
    fn: function(item) {
        return true;
    }
});

Predefined filters

  • folder
  • queueLimit