KISHAN PATI KISHAN PATI - 2 months ago 5
AngularJS Question

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 ?

Answer

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.

Comments