Uppload Multiples

by Anand Chowdhary

HTML

<script src="https://unpkg.com/uppload/dist/uppload.polyfills.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <section>
    <div class="row">
      <img class="value-1" style="height: 100px;width: auto;"><br>
      <input type="text" class="value-1"/><br>
      <button class="button-1">Upload image</button>
    </div>

    <div class="row">
      <img class="value-2" style="height: 100px;width: auto;"><br>
      <input type="text" class="value-2"/><br>
      <button class="button-2">Upload image</button>
    </div>
  </section>
</div>

JavaScript

var config = {
  apiKey: "AIzaSyAv67if95tsnEcfQ3AnzPRNjsrma5i0peE",
  projectId: "uppload-storage",
  storageBucket: "uppload-storage.appspot.com",
};
firebase.initializeApp(config);
var eventPicture1 = new Uppload({
  value: "https://placeimg.com/841/353/tech",
  bind: [".value-1"],
  call: [".button-1"],
  allowedTypes: ["image/jpg", "image/png"],
  maxFileSize: 25000000,
  uploadFormat: {
    type: "image/jpg",
    quality: 0.5
  },
  maxFileSize: 25000000,
  crop: {
    aspectRatio: 353 / 841,
    aspectButtons: [{
        text: "TimeOut Market",
        value: 353 / 841
      },
      {
        text: "Free",
        value: null
      }
    ]
  },
  /* Upload to Firebase */
  uploadFunction: function(file, metadata) {
    return new Promise(function(resolve, reject) {
      var storageRef = firebase.storage().ref().child("/uppload/" + metadata.name);
      storageRef.put(file).then(function(snapshot) {
        try {
          resolve(snapshot.metadata.downloadURLs[0]);
          //$(".urlUploaded").val("AQUI "+snapshot.metadata.downloadURLs[0]);
        } catch (e) {
          reject("Unable to upload to Firebase");
        }
      }).catch(function(error) {
        reject(error);
      });
    });
  }
});

var eventPicture2 = new Uppload({
  value: "https://placeimg.com/841/352/tech",
  bind: [".value-2"],
  call: [".button-2"],
  allowedTypes: ["image/jpg", "image/png"],
  maxFileSize: 25000000,
  uploadFormat: {
    type: "image/jpg",
    quality: 0.5
  },
  maxFileSize: 25000000,
  crop: {
    aspectRatio: 353 / 841,
    aspectButtons: [{
        text: "TimeOut Market",
        value: 353 / 841
      },
      {
        text: "Free",
        value: null
      }
    ]
  },
  /* Upload to Firebase */
  uploadFunction: function(file, metadata) {
    return new Promise(function(resolve, reject) {
      var storageRef = firebase.storage().ref().child("/uppload/" + metadata.name);
      storageRef.put(file).then(function(snapshot) {
        try {
         ...