vaytt

by Manuel Souto Pico

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ title }}</p>
  <form id="upload" action="ddd" method="post" enctype="multipart/form-data">
    
    <option value="dadf"></option>
    
    <input type="hidden" name="app" value="vaytt">
    
    <div id="form-drop-box">
      <input type="file" name="file" id="file" multiple>
      <p>{{ instruction }}</p>
      <input type="submit" name="submit" value="Upload">
      <!-- make the submit button launch itself when the file is dropped -->
    </div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src="js/drag-n-drop.js"></script>

  </form>
</div>

CSS

#form-drop-box{
position: relative;
  width: 500px;
  height: 200px;
  border: 4px dashed;
}
#form-drop-box p{
  width: 100%;
  height: 90%;
  text-align: center;
  line-height: 170px;
  font-family: Arial;
}

#form-drop-box input[type=file]{
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 90%;
  outline: none;
  opacity: 0;
}
#form-drop-box input[type=submit]{
	position: absolute;
/*
  margin: 1;
  padding: 10;
  width: 100%;
  height: 20%;
  outline: none;
*/
}

#form-options {
  position:relative;
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	title: "Hello World",
    instruction: "Drag your OMT package here or click in this area to find it."
  }
});