Module API

İ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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.