rpragana/Leiame.md

## index.html
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <link href="bootstrap.min.css" rel="stylesheet">
    <script src="vue.js"></script>
    <style>
        [hidden] {
             display: none !important;
        }
    </style>
</head>
<body>
<h1>Seletor de imagens para upload</h1>
<div id="app" class="container">
    <div class = "row">
       <div v-for="item in items" class = "col-sm-4 col-md-2">
          <a href = "#" class = "thumbnail">
              <img :src="item.src">
              {{ item.fname }}
          </a>
       </div>
    </div>
    <label class="btn btn-primary">
        <img src="camera.png"><br>
        Adiciona imagem
        <input type='file' class='file'
            accept='image/*' onchange='openFile(event)' hidden>
    </label>

</div>
</body>
<script>
var app = new Vue({
  el: '#app',
  data: {
    items: []
  }
})

var openFile = function(event) {
  var input = event.target;
  var reader = new FileReader();
  reader.fname = input.files[0].name;
  reader.onload = function(){
    var dataURL = reader.result;
    var newitem={}
    newitem.src = dataURL
    newitem.fname = reader.fname
    app._data.items.push(newitem)
  };
  reader.readAsDataURL(input.files[0]);
};

</script>
</html>

## Leiame.md

      
    Raw
  

              Leiame.md
            
          
    **  ThumbImgs
Um seletor de imagens para fazer upload (mostra só as imagens selecionadas, miniaturas).
O upload propriamente não é realizado por esse programa. Eum um vídeo futuro podemos mostrar como fazer essa parte.
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<link href="bootstrap.min.css" rel="stylesheet">
	<script src="vue.js"></script>
	<style>
	[hidden] {
	display: none !important;
	}
	</style>
	</head>
	<body>
	<h1>Seletor de imagens para upload</h1>
	<div id="app" class="container">
	<div class = "row">
	<div v-for="item in items" class = "col-sm-4 col-md-2">
	<a href = "#" class = "thumbnail">
	<img :src="item.src">
	{{ item.fname }}
	</a>
	</div>
	</div>
	<label class="btn btn-primary">
	<img src="camera.png"><br>
	Adiciona imagem
	<input type='file' class='file'
	accept='image/*' onchange='openFile(event)' hidden>
	</label>

	</div>
	</body>
	<script>
	var app = new Vue({
	el: '#app',
	data: {
	items: []
	}
	})

	var openFile = function(event) {
	var input = event.target;
	var reader = new FileReader();
	reader.fname = input.files[0].name;
	reader.onload = function(){
	var dataURL = reader.result;
	var newitem={}
	newitem.src = dataURL
	newitem.fname = reader.fname
	app._data.items.push(newitem)
	};
	reader.readAsDataURL(input.files[0]);
	};

	</script>
	</html>