LoopBack Storage Service

Make upload system with loopback and amazon s3

by Gabriel Correa

HTML

<!DOCTYPE html>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->

<head>
    <title>LoopBack Storage Service Demo</title>
    <link rel="stylesheet"
          href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>

    <!-- Fix for old browsers -->
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    <!--<script src="../bower_components/angular/angular.js"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-file-upload/2.5.0/angular-file-upload.js"></script>

    <style>
        .my-drop-zone {
            border: dotted 3px lightgray;
        }
        .nv-file-over {
            border: dotted 3px red;
        }
        /* Default class applied to drop zones on over */
        .another-file-over-class {
            border: dotted 3px green;
        }
        html, body {
            height: 100%;
        }
    </style>

</head>

<!-- 1. nv-file-drop | nv-file-drop="options" -->
<body ng-controller="TestController" nv-file-drop uploader="uploader">

<div class="container">

    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand"
               href="https://github.com/strongloop/loopback-component-storage">LoopBack
                Storage Service</a>
        </div>
    </div>


<div class="row">

        <div class="col-md-3">

        <img ng-src="{{image}}">

            <h3>Select files</h3>

            <div ng-show="uploader.isHTML5">
                <!-- 3. nv-file-over | nv-file-over="className" -->
                <div class="well my-drop-zone" nv-file-over uploader="uploader">
                    Base drop zone
                </div>

                <!-- Example: nv-file-drop | nv-file-drop="options" -->
                <div class="well my-drop-zone" nv-file-drop="{ url: '/foo' } "
                    ...

JavaScript

angular.module('app', ['angularFileUpload'])

  // The example of the full functionality
  .controller('TestController',function ($scope, FileUploader) {
    'use strict';

    // create a uploader with options

    var uploader = $scope.uploader = new FileUploader({
      scope: $scope,                          // to automatically update the html. Default: $rootScope
      url: '//famagas-api.herokuapp.com/api/CloudStoreImages/teste/upload',
      formData: [
        { key: 'value' }
      ]
    });

    // ADDING FILTERS
    uploader.filters.push({
        name: 'filterName',
        fn: function (item, options) { // second user filter
            console.info('filter2');
            return true;
        }
    });

    // REGISTER HANDLERS
    // --------------------
    uploader.onAfterAddingFile = function(item) {
      console.info('After adding a file', item);
    };
    // --------------------
    uploader.onAfterAddingAll = function(items) {
      console.info('After adding all files', items);
    };
    // --------------------
    uploader.onWhenAddingFileFailed = function(item, filter, options) {
      console.info('When adding a file failed', item);
    };
    // --------------------
    uploader.onBeforeUploadItem = function(item) {
      console.info('Before upload', item);
    };
    // --------------------
    uploader.onProgressItem = function(item, progress) {
      console.info('Progress: ' + progress, item);
    };
    // --------------------
    uploader.onProgressAll = function(progress) {
      console.info('Total progress: ' + progress);
    };
    // --------------------
    uploader.onSuccessItem = function(item, response, status, headers) {
      console.info('Success', response, status, headers);
      $scope.$broadcast('uploadCompleted', item);
    };
    // --------------------
    uploader.onErrorItem = function(item, response, status, headers) {
      console.info('Error', response, status, headers);
    };
    //...