Skip to content

Instantly share code, notes, and snippets.

@saibotsivad
Created May 9, 2017 14:11
Show Gist options
  • Save saibotsivad/5904e7c32085049c1a9a745cfbdc8bec to your computer and use it in GitHub Desktop.
Save saibotsivad/5904e7c32085049c1a9a745cfbdc8bec to your computer and use it in GitHub Desktop.
svelte image upload with file reader
<!--
THIS IS A JUNK DRAFT, KEPT FOR A REFERENCE, DON'T USE THIS IDEA
-->
<div class="component-form-field component-form-field-image">
<label for="{{id}}">{{label}}</label>
<input
ref:file
bind:value="file"
on:change="upload(event)"
type="file"
>
<div class="image-container">
<div
class="image-window-square"
on:drop="upload(event)"
>
{{#if localImageLink}}
<img src="{{localImageLink}}">
<div class="image-upload-bar">
<button
class="btn btn-link btn-lg image-upload-bar-action pull-right"
on:click="clickUpload()"
>
<span class="glyphicon glyphicon-upload"></span>
</button>
</div>
{{/if}}
{{#if !localImageLink && value}}
<img src="{{imageLink}}">
<div class="image-upload-bar">
<button
class="btn btn-link btn-lg image-upload-bar-action pull-left"
on:click="remove()"
>
<span class="glyphicon glyphicon-trash"></span>
</button>
<button
class="btn btn-link btn-lg image-upload-bar-action pull-right"
on:click="clickUpload()"
>
<span class="glyphicon glyphicon-upload"></span>
</button>
</div>
{{/if}}
{{#if !localImageLink && !value}}
<div class="image-false">
<p><span class="glyphicon glyphicon-camera"></span></p>
<p>Click to upload, or simply drag an image into this square.</p>
<p>
<button
class="btn btn-default btn-lg"
on:click="clickUpload()"
>
<span class="glyphicon glyphicon-upload"></span>
</button>
</p>
</div>
{{/if}}
</div>
</div>
{{#if helptext}}
<span class="help-block">{{helptext}}</span>
{{/if}}
</div>
<script>
import randomId from 'uuid-pure'
export default {
data() {
return {
file: '',
id: randomId.newId()
}
},
oncreate() {
this.observe('value', value => {
// when the form image is reset, we clear the local image
this.set({ localImageLink: null })
})
},
methods: {
upload(event = {}) {
const file = event.target && event.target.files && event.target.files[0]
if (file) {
const reader = new FileReader()
reader.onload = readerEvent => {
this.set({ localImageLink: readerEvent.target.result })
}
reader.readAsDataURL(file)
this.fire('change', file)
}
},
remove() {
this.fire('change')
},
clickUpload() {
this.refs.file.click()
}
},
computed: {
imageLink(value) {
if (value) {
return value.storageFile
? `/media/${value.media}`
: `/media?media=${encodeURIComponent(value.media)}`
}
}
}
}
</script>
<style>
.btn {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.btn.pull-right {
border-top-right-radius: 0;
}
.btn.pull-left {
border-top-left-radius: 0;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment