Last active
January 20, 2019 08:13
-
-
Save ShaggyTech/2eeff05a2f6ec54599f41007ad6690a4 to your computer and use it in GitHub Desktop.
Testing File Upload component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <v-container fluid id="fileUpload"> | |
| <v-layout> | |
| <v-flex sm12 class="text-xs-center"> | |
| <v-btn | |
| small | |
| color="blue" | |
| label="Select Files" | |
| @click="pickFiles" | |
| prepend-icon="attach_file" | |
| > | |
| <v-icon style="padding-right: 0.2em" dark>folder_open</v-icon> | |
| {{ selectBtnText }} | |
| </v-btn> | |
| <input | |
| type="file" | |
| style="display: none" | |
| ref="fileInput" | |
| accept="*" | |
| multiple | |
| @change="detectFiles($event)" | |
| > | |
| <v-btn v-if="hasFiles" small color="error" @click="reset">Clear Selection</v-btn> | |
| <v-divider v-if="hasFiles"></v-divider> | |
| <v-container id="previewGrid"> | |
| <v-layout justify-space-around row wrap> | |
| <v-flex class="preview-card" v-for="preview in previews" :key="preview.name"> | |
| <v-container class="preview-container" xs1 xl1> | |
| <v-layout row wrap class="preview-wrapper elevation-10"> | |
| <v-flex class="image-flex" xs12 align-content-center align-self-start> | |
| <v-img | |
| class="preview-image" | |
| xs12 | |
| contain | |
| min-height="180px" | |
| max-width="180px" | |
| :src="preview.src" | |
| :aspect-ratio="16/9" | |
| ></v-img> | |
| </v-flex> | |
| <v-flex xs12 align-self-end> | |
| <v-btn block small class="preview-btn caption text-truncate"> | |
| <span class="preview-text text-truncate">{{ preview.name }}</span> | |
| </v-btn> | |
| </v-flex> | |
| </v-layout> | |
| </v-container> | |
| </v-flex> | |
| </v-layout> | |
| </v-container> | |
| </v-flex> | |
| </v-layout> | |
| </v-container> | |
| </template> | |
| <script> | |
| export default { | |
| name: "FileUpload", | |
| props: {}, | |
| data() { | |
| return { | |
| selectedFiles: [], | |
| totalSelected: 0, | |
| previews: [], | |
| names: [] | |
| }; | |
| }, | |
| methods: { | |
| pickFiles() { | |
| this.$refs.fileInput.click(); | |
| }, | |
| detectFiles(e) { | |
| let files = e.target.files || e.dataTransfer.files; | |
| if (files[0] !== undefined) { | |
| Array.from(Array(files.length).keys()).map(x => { | |
| let file = files[x]; | |
| if (this.isDuplicateFile(file.name)) return; | |
| let reader = new FileReader(); | |
| let id = this.totalSelected + 1; | |
| file.id = id; | |
| let preview = { | |
| id, | |
| name: file.name, | |
| src: "" | |
| }; | |
| reader.onload = function(event) { | |
| preview.src = event.target.result; | |
| }; | |
| reader.readAsDataURL(file); | |
| this.totalSelected++; | |
| this.previews.push(preview); | |
| this.selectedFiles.push(file); | |
| this.names.push(file.name); | |
| }); | |
| } else return; | |
| }, | |
| isDuplicateFile(filename) { | |
| return this.names.includes(filename); | |
| }, | |
| reset() { | |
| this.selectedFiles = []; | |
| this.totalSelected = 0; | |
| this.previews = []; | |
| } | |
| }, | |
| mounted() { | |
| this.reset(); | |
| }, | |
| computed: { | |
| hasFiles() { | |
| return this.previews.length > 0; | |
| }, | |
| selectBtnText() { | |
| return this.hasFiles ? "Add Files" : "Select Files"; | |
| } | |
| } | |
| }; | |
| </script> | |
| <style scoped> | |
| #fileUpload { | |
| background-color: gray; | |
| } | |
| .preview-card { | |
| margin: 0.3em 0.3em 0 0; | |
| } | |
| .preview-container { | |
| padding: 0em; | |
| background-color: #1d1d1d; | |
| border-radius: 0.3em; | |
| } | |
| .preview-wrapper { | |
| min-height: inherit; | |
| border-radius: 0.3em; | |
| } | |
| .preview-image { | |
| margin: 0 auto; | |
| } | |
| .image-flex { | |
| padding: 0.3em; | |
| } | |
| .preview-btn { | |
| margin: 0; | |
| border-radius: 0 0 0.3em 0.3em; | |
| } | |
| .preview-text { | |
| font-size: 0.7em; | |
| } | |
| p { | |
| text-align: center; | |
| } | |
| kbd { | |
| width: 100%; | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment