Skip to content

Instantly share code, notes, and snippets.

@Lelectrolux

Lelectrolux/FileInput.vue

Created September 11, 2019 06:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Lelectrolux/45d10ade3f01bc352c71f4a2ad206dbd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Lelectrolux/45d10ade3f01bc352c71f4a2ad206dbd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Lelectrolux created this gist Sep 11, 2019.
    34 changes: 34 additions & 0 deletions FileInput.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    <usage>
    <div class="h-64"> <!-- Set dimensions here -->
    <FileInput v-model="file"/>
    </div>
    </usage>

    <template>
    <label
    class="flex justify-center items-center relative rounded-lg overflow-hidden bg-gray-300 w-full h-full"
    >
    Add a preview image
    <span
    v-show="src"
    class="z-20 bg-red absolute top-0 right-0 rounded-full mt-1 mr-1 bg-red-600 text-white w-8 h-8 flex justify-center items-center shadow-md"
    @click.prevent="$emit('input', null)"
    >X</span>
    <input type="file" class="z-10 hidden" @change="$emit('input', $event.target.files[0])">
    <img :src="src" class="object-cover absolute">
    </label>
    </template>

    <script>
    export default {
    name: "FileInput",
    props: ["value"],
    computed: {
    src() {
    return this.value ? URL.createObjectURL(this.value) : null;
    }
    }
    };
    </script>