CODEWITHSUNDEEP
angularjs
Kishan
Kishan

Reputation: 388

How to drag external files into the browser using AngularJS

In my project i want to drag external files with extension ".opgs" into the browser drop zone.

How can i achieve this using angular js ?

Upvotes: 1

Views: 1731

Answers (2)

Martin Gottweis
Martin Gottweis

Reputation: 2739

I used an module: ng-file-upload - https://github.com/danialfarid/ng-file-upload.

Install with bower bower i ng-file-upload -S.

Load it in your head tag:

<script src="/admin/assets/vendor/ng-file-upload/ng-file-upload.min.js"></script>

You hook the drop action to your dom element like this:

<div ngf-drop="upload($files)"></div>

Inject it into your app:

your_app = angular.module('your_app', ['ngFileUpload'], function () {

Then you get the file in the controller like this:

$scope.upload = function (file) {
    console.log(file)

    var extension = file[0].name.match(/\.(.*)$/)[0]

    if (extension == 'opgs') {
        upload_service.upload(file[0])
    }
}

Works quite well.

Upvotes: 2

nmanikiran
nmanikiran

Reputation: 3158

Use ng-file-uplaod plugin

it give different directive to upload / drag-drop file

<div ngf-drop="upload($files)" ngf-accept="[YOUR FILE TYPES]" ngf-multiple="true"></div>

See the DEMO page

Upvotes: 0

Related Questions