Dropzone http://www.dropzonejs.com

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

Drop files in here
or click to pick manually 
<form action="/upload" id="dropzonejs" class="dropzone-box">
  <div class="dz-default dz-message">
    <div class="dz-upload-icon"></div>
    Drop files in here<br>
    <span class="dz-text-small">or click to pick manually</span>
  </div>
  <div class="fallback">
    <input name="file" type="file" multiple>
  </div>
</form>

<script>
  $(function() {
    $('#dropzonejs').dropzone({
      parallelUploads: 2,
      maxFilesize:     50000,
      filesizeBase:    1000,

      resize: function(file) {
        return {
          srcX:      0,
          srcY:      0,
          srcWidth:  file.width,
          srcHeight: file.height,
          trgWidth:  file.width,
          trgHeight: file.height,
        };
      },
    });


    // Mock the file upload progress (only for the demo)
    //
    Dropzone.prototype.uploadFiles = function(files) {
      var minSteps         = 6;
      var maxSteps         = 60;
      var timeBetweenSteps = 100;
      var bytesPerStep     = 100000;
      var isUploadSuccess  = Math.round(Math.random());

      var self = this;

      for (var i = 0; i < files.length; i++) {

        var file = files[i];
        var totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));

        for (var step = 0; step < totalSteps; step++) {
          var duration = timeBetweenSteps * (step + 1);

          setTimeout(function(file, totalSteps, step) {
            return function() {
              file.upload = {
                progress: 100 * (step + 1) / totalSteps,
                total: file.size,
                bytesSent: (step + 1) * file.size / totalSteps
              };

              self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent);
              if (file.upload.progress == 100) {

                if (isUploadSuccess) {
                  file.status =  Dropzone.SUCCESS;
                  self.emit('success', file, 'success', null);
                } else {
                  file.status =  Dropzone.ERROR;
                  self.emit('error', file, 'Some upload error', null);
                }

                self.emit('complete', file);
                self.processQueue();
              }
            };
          }(file, totalSteps, step), duration);
        }
      }
    };
  });
</script>
    Copy
See the usage documentation at http://www.dropzonejs.com

Usage

require(['jquery', 'px/extensions/dropzone'], function($) {
  ...
});

Usage

To use DropzoneJS plugin, you need to include the next scripts:

<script src="path/to/js/libs/dropzone.js"></script>
<script src="path/to/js/pixeladmin/extensions/dropzone.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-dropzone.js"></script>

Then inject the plugin into your angular application:

angular.module('yourApp', ['angular-dropzone']);

Alternatively, you can include DropzoneJS plugin using ocLazyLoad plugin:

$ocLazyLoad.load([
  {
    serie: true,
    name: 'angular-dropzone',
    files: [
      'path/to/js/libs/dropzone.js',
      'path/to/js/pixeladmin/extensions/dropzone.js',
      'path/to/js/pixeladmin/directives/angular-dropzone.js',
    ],
  },
]);

dropzone directive

You can use dropzone directive where you want. And when the scope is destroyed the directive will be destroyed.

Drop files in here
or click to pick manually 
<div ng-app="ngDropzoneApp">
  <form dropzone action="/upload">
    <dropzone-message>
      <div class="dz-upload-icon"></div>
      Drop files in here<br>
      <span class="dz-text-small">or click to pick manually</span>
    </dropzone-message>
    <dropzone-fallback class="font-weight-bold">Your browser isn't support Dropzone</dropzone-fallback>
  </form>
</div>

<!-- Load scripts -->
<!-- <script src="assets/js/angular/libs/dropzone.js"></script> -->
<!-- <script src="assets/js/angular/pixeladmin/extensions/dropzone.js"></script> -->
<script src="assets/js/angular/pixeladmin/directives/angular-dropzone.js"></script>

<script>
  angular.module('ngDropzoneApp', [ 'angular-dropzone' ]);
</script>
    Copy

Instance

You can define instance attribute to get a pointer to DropzoneJS element: 

<form dropzone instance="ctrl.$dropzone" action="/upload"></form>
function SomeController() {
  // Pointer
  this.$dropzone = null;

  // ...

  // Then, after the initialization, you can call plugin methods:
  this.$dropzone('getAcceptedFiles');
  this.$dropzone('disable');
  this.$dropzone('removeFile', file);
});

Options

DropzoneJS' options can be specified using options attribute (see the plugin's documentation). 

<form dropzone options="ctrl.options" action="/upload"></form>
function SomeController() {
  this.options = {
    parallelUploads: 2,
    maxFilesize:     50,
    filesizeBase:    1000,

    resize: function(file) {
      return {
        srcX:      0,
        srcY:      0,
        srcWidth:  file.width,
        srcHeight: file.height,
        trgWidth:  file.width,
        trgHeight: file.height
      };
    }
  };
});

Events

Event handlers can be bound using callbacks attribute (see the plugin's documentation): 

<form dropzone callbacks="ctrl.callbacks" action="/upload"></form>
function SomeController() {
  this.callbacks = {
    queuecomplete: function() {
      console.log('Upload queue is complete.');
    },
  };
});
SETTINGS
THEMES