Svelte component

README.md

Svelte component

This gist was generated by the Svelte REPL. Visit https://svelte.technology/repl?gist=this_gist_id to see it.

App.html

<h1>File reader API example</h1>
<p>taken from an example from <a href="https://alligator.io/vuejs/file-reader-component/"> alligator</a></p>
<textarea rows=5 bind:value="text"></textarea>
<FileReader on:load="set({'text':event.content})"/>

<script>
	import FileReader from './FileReader.html'
	
	export default {
		components: {FileReader}
	}
</script>

data.json

{
  "text": ""
}

FileReader.html

<label class="text-reader">
	Read file
	<input type="file" on:change="loadTextFromFile(event)">
</label>

<script>
export default {
	methods: {
		loadTextFromFile(ev) {
			const file = ev.target.files[0]
			const reader = new FileReader()
			
			reader.onload = e => (this.fire('load',{content:e.target.result}))
			reader.readAsText(file)
		}
	}
}
</script>
<style>
.text-reader {
  position: relative;
  overflow: hidden;
  display: inline-block;

  border: 2px solid black;
  border-radius: 5px;
  padding: 8px 12px;
  cursor: pointer;
}
.text-reader input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
}
</style>