2

For File Upload i am using following module: https://github.com/nervgh/angular-file-upload

The html snippet looks like:

    <div nv-file-drop="" uploader="uploader" options="{ url: '/whatever/uploadfile'}" 
    removeAfterUpload="true" >
    <div nv-file-over="" uploader="uploader" over-class="another-file-over-class" 
class="well my-drop-zone" >
    You may drag drop files here
    </div>
    </div>

How can i ensure that:
- only images (png/jpg) can be dropped on the file drop area?
- File Sizes are Limited.

Apparently filters could be used - but cannot find any example of that.

1 Answer 1

4

Checkout the source code for some examples on how the filters are used (https://github.com/nervgh/angular-file-upload/blob/master/src/module.js#L51)

this.filters.unshift({name: 'queueLimit', fn: this._queueLimitFilter});
this.filters.unshift({name: 'folder', fn: this._folderFilter});

Queue limit filter (https://github.com/nervgh/angular-file-upload/blob/master/src/module.js#L357)

FileUploader.prototype._queueLimitFilter = function() {
    return this.queue.length < this.queueLimit;
};

Folder Filter (https://github.com/nervgh/angular-file-upload/blob/master/src/module.js#L349)

FileUploader.prototype._folderFilter = function(item) {
    return !!(item.size || item.type);
};

Based on those examples i guess the filters can be used as such:

javascript

var uploadOptions = {
    url: '/whatever/uploadfile',
    filters: []
};

// File must be jpeg or png
uploadOptions.filters.push({ name: 'imagefilter', fn: function(item) {
   return item.type == 'image/jpeg' || item.type == 'image/png';
}});

// File must not be larger then some size
uploadOptions.filters.push({ name: 'sizeFilter', fn: function(item) {
   return item.size < 10000;
}});

$scope.uploadOptions = uploadOptions;

html

<div nv-file-drop="" uploader="uploader" options="uploadOptions" removeAfterUpload="true" >
    <div nv-file-over="" uploader="uploader" over-class="another-file-over-class" class="well my-drop-zone" >
    You may drag drop files here
    </div>
</div>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.