<template>
  <div class="file-uploader">
    <label class="file-browser" :class="{ 'file-browser--uploaded': thumb.url }">
      <div class="loader" v-if="loading">
        <div class="la-ball-spin la-dark la-3x"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
      </div>
      <div v-if="thumb.url && !loading">
        <input type="hidden" :name="name" :value="thumb.url">
        <img v-if="thumb.url" width="300" height="auto" :src="`${thumb.thumb}`" alt=""/>
      </div>
      <div v-if="!thumb.url && !loading">
        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 420.8 420.8" style="enable-background:new 0 0 420.8 420.8;" xml:space="preserve">
          <path d="M406.8,96.4c-8.4-8.8-20-14-33.2-14h-66.4v-0.8c0-10-4-19.6-10.8-26c-6.8-6.8-16-10.8-26-10.8h-120
  c-10.4,0-19.6,4-26.4,10.8c-6.8,6.8-10.8,16-10.8,26v0.8h-66c-13.2,0-24.8,5.2-33.2,14c-8.4,8.4-14,20.4-14,33.2v199.2
  C0,342,5.2,353.6,14,362c8.4,8.4,20.4,14,33.2,14h326.4c13.2,0,24.8-5.2,33.2-14c8.4-8.4,14-20.4,14-33.2V129.6
  C420.8,116.4,415.6,104.8,406.8,96.4z M400,328.8h-0.4c0,7.2-2.8,13.6-7.6,18.4s-11.2,7.6-18.4,7.6H47.2
  c-7.2,0-13.6-2.8-18.4-7.6c-4.8-4.8-7.6-11.2-7.6-18.4V129.6c0-7.2,2.8-13.6,7.6-18.4s11.2-7.6,18.4-7.6h77.2
  c6,0,10.8-4.8,10.8-10.8V81.2c0-4.4,1.6-8.4,4.4-11.2s6.8-4.4,11.2-4.4h119.6c4.4,0,8.4,1.6,11.2,4.4c2.8,2.8,4.4,6.8,4.4,11.2
  v11.6c0,6,4.8,10.8,10.8,10.8H374c7.2,0,13.6,2.8,18.4,7.6s7.6,11.2,7.6,18.4V328.8z" />
          <path d="M210.4,130.8c-27.2,0-52,11.2-69.6,28.8c-18,18-28.8,42.4-28.8,69.6s11.2,52,28.8,69.6c18,18,42.4,28.8,69.6,28.8
  s52-11.2,69.6-28.8c18-18,28.8-42.4,28.8-69.6s-11.2-52-28.8-69.6C262.4,142,237.6,130.8,210.4,130.8z M264.8,284
  c-14,13.6-33.2,22.4-54.4,22.4S170,297.6,156,284c-14-14-22.4-33.2-22.4-54.4c0-21.2,8.8-40.4,22.4-54.4
  c14-14,33.2-22.4,54.4-22.4s40.4,8.8,54.4,22.4c14,14,22.4,33.2,22.4,54.4C287.6,250.8,278.8,270,264.8,284z" />
          <circle cx="352.8" cy="150" r="19.6" />
        </svg>
      </div>
      <p v-if="!thumb.url">
        <slot></slot>
      </p>
      <input v-show="false" type="file" class="form-control" v-on:change="upload($event.target.files)" accept="image/*"/>
    </label>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  data: function() {
    return {
      cloudinary: {
        uploadPreset: 'cycb3ukb',
        apiKey: '759479582589664',
        cloudName: 'dmaydtfov', 
      },
      thumb: {
        url: '',
        thumb: '',
      },
      loading: false,
    };
  },

  props: {
    name: {
      default: 'content[image]',
      type: String,
    },
  },

  computed: {
    clUrl: function() {
      return `https://api.cloudinary.com/v1_1/${this.cloudinary.cloudName}/upload`;
    },
  },

  methods: {
    upload: function(file) {
      this.loading = true;
      const formData = new FormData();
      formData.append('file', file[0]);
      formData.append('upload_preset', this.cloudinary.uploadPreset);
      formData.append('tags', 'gs-vue,gs-vue-uploaded');
      // For debug purpose only
      // Inspects the content of formData
      axios.post(this.clUrl, formData).then(res => {
        this.thumb = {
          url: res.data.secure_url,
          thumb: `http://res.cloudinary.com/${this.cloudinary.cloudName}/image/fetch/c_thumb,w_500/${res.data.secure_url}`,
        };
        this.loading = false;
      });
    },
  }
};
</script>
<style>
  .file-uploader {
    margin: 0 auto;
    width: 100%;
  }

  .loader {
    max-width: 100px;
    padding: 2rem 0;
  }

  .file-browser {
    border: .25rem dashed #dddddd;
    border-radius: .5rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 1rem 0;
    min-height: 100px;
    padding: 2rem;
    text-align: center;
    width: 100%;
  }

  .file-browser--uploaded {
    border: 1px solid #1da049;
  }

  .file-browser svg {
    width: 100px;
    height: 100px;
    fill: #dddddd;
    justify-self: center;
  }

  .img-load {
    padding: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    display: flex;
    align-items: center;
  }

  .file-browser > div {
    text-align: center;
  }

  .file-browser p {
    width: 100%;
    font-weight: bold;
    font-size: 2rem;
    color: #ddd;
  }

  /*!
  * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
  * Copyright 2015 Daniel Cardoso <@DanielCardoso>
  * Licensed under MIT
  */
  .la-ball-spin,
  .la-ball-spin > div {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .la-ball-spin {
    display: block;
    font-size: 0;
    color: #fff;
  }
  .la-ball-spin.la-dark {
    color: #333;
  }
  .la-ball-spin > div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
  }
  .la-ball-spin {
    width: 32px;
    height: 32px;
  }
  .la-ball-spin > div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    margin-left: -4px;
    border-radius: 100%;
    -webkit-animation: ball-spin 1s infinite ease-in-out;
    -moz-animation: ball-spin 1s infinite ease-in-out;
    -o-animation: ball-spin 1s infinite ease-in-out;
    animation: ball-spin 1s infinite ease-in-out;
  }
  .la-ball-spin > div:nth-child(1) {
    top: 5%;
    left: 50%;
    -webkit-animation-delay: -1.125s;
    -moz-animation-delay: -1.125s;
    -o-animation-delay: -1.125s;
    animation-delay: -1.125s;
  }
  .la-ball-spin > div:nth-child(2) {
    top: 18.1801948466%;
    left: 81.8198051534%;
    -webkit-animation-delay: -1.25s;
    -moz-animation-delay: -1.25s;
    -o-animation-delay: -1.25s;
    animation-delay: -1.25s;
  }
  .la-ball-spin > div:nth-child(3) {
    top: 50%;
    left: 95%;
    -webkit-animation-delay: -1.375s;
    -moz-animation-delay: -1.375s;
    -o-animation-delay: -1.375s;
    animation-delay: -1.375s;
  }
  .la-ball-spin > div:nth-child(4) {
    top: 81.8198051534%;
    left: 81.8198051534%;
    -webkit-animation-delay: -1.5s;
    -moz-animation-delay: -1.5s;
    -o-animation-delay: -1.5s;
    animation-delay: -1.5s;
  }
  .la-ball-spin > div:nth-child(5) {
    top: 94.9999999966%;
    left: 50.0000000005%;
    -webkit-animation-delay: -1.625s;
    -moz-animation-delay: -1.625s;
    -o-animation-delay: -1.625s;
    animation-delay: -1.625s;
  }
  .la-ball-spin > div:nth-child(6) {
    top: 81.8198046966%;
    left: 18.1801949248%;
    -webkit-animation-delay: -1.75s;
    -moz-animation-delay: -1.75s;
    -o-animation-delay: -1.75s;
    animation-delay: -1.75s;
  }
  .la-ball-spin > div:nth-child(7) {
    top: 49.9999750815%;
    left: 5.0000051215%;
    -webkit-animation-delay: -1.875s;
    -moz-animation-delay: -1.875s;
    -o-animation-delay: -1.875s;
    animation-delay: -1.875s;
  }
  .la-ball-spin > div:nth-child(8) {
    top: 18.179464974%;
    left: 18.1803700518%;
    -webkit-animation-delay: -2s;
    -moz-animation-delay: -2s;
    -o-animation-delay: -2s;
    animation-delay: -2s;
  }
  .la-ball-spin.la-sm {
    width: 16px;
    height: 16px;
  }
  .la-ball-spin.la-sm > div {
    width: 4px;
    height: 4px;
    margin-top: -2px;
    margin-left: -2px;
  }
  .la-ball-spin.la-2x {
    width: 64px;
    height: 64px;
  }
  .la-ball-spin.la-2x > div {
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
  }
  .la-ball-spin.la-3x {
    width: 96px;
    height: 96px;
  }
  .la-ball-spin.la-3x > div {
    width: 24px;
    height: 24px;
    margin-top: -12px;
    margin-left: -12px;
  }
  /*
  * Animation
  */
  @-webkit-keyframes ball-spin {
    0%,
    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
    }
  }
  @-moz-keyframes ball-spin {
    0%,
    100% {
      opacity: 1;
      -moz-transform: scale(1);
      transform: scale(1);
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 0;
      -moz-transform: scale(0);
      transform: scale(0);
    }
  }
  @-o-keyframes ball-spin {
    0%,
    100% {
      opacity: 1;
      -o-transform: scale(1);
      transform: scale(1);
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 0;
      -o-transform: scale(0);
      transform: scale(0);
    }
  }
  @keyframes ball-spin {
    0%,
    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 0;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      transform: scale(0);
    }
  }
</style>


