Fix image size, show preview on upload

jameslkingsley · Sep 14, 2018 · fae5a23 · fae5a23
1 parent 207169c
commit fae5a23
Show file tree

Hide file tree

Showing 2 changed files with 151 additions and 144 deletions.
diff --git a/dist/js/app.js b/dist/js/app.js
diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
@@ -7,12 +7,15 @@
  </template>
 
  <template v-if="field.value && !field.thumbnailUrl">
- <div class="flex item-center relative overflow-hidden p-4">
+ <div class="flex item-center relative overflow-hidden">
  <img
  class="rounded"
  v-if="field.value"
- :src="field.value"
- :style="{ width: field.width, height: field.height }">
+ :src="imageUrl"
+ :style="{
+ width: field.width || 'auto',
+ height: field.height || '12rem',
+ }" />
 
  <DeleteButton
  :dusk="field.attribute + '-internal-delete-link'"
@@ -76,158 +79,162 @@
 </template>
 
 <script>
-import ImageLoader from '../../../../../nova/resources/js/components/ImageLoader'
-import DeleteButton from '../../../../../nova/resources/js/components/DeleteButton'
-import { FormField, HandlesValidationErrors, Errors } from 'laravel-nova'
-
-export default {
- components: { DeleteButton, ImageLoader },
- mixins: [HandlesValidationErrors, FormField],
- props: ['resourceId', 'relatedResourceName', 'relatedResourceId', 'viaRelationship', 'resourceName', 'field'],
-
- data: () => ({
- file: null,
- label: 'No file selected',
- fileName: '',
- removeModalOpen: false,
- missing: false,
- deleted: false,
- uploadErrors: new Errors(),
- }),
-
- mounted() {
- this.field.fill = formData => {
- formData.append(this.field.attribute, this.file, this.fileName)
-
- for (let attribute in this.field) {
- if (attribute.substr(0, 3) === 'ml_') {
- formData.append(attribute, this.field[attribute])
+ import ImageLoader from '../../../../../nova/resources/js/components/ImageLoader'
+ import DeleteButton from '../../../../../nova/resources/js/components/DeleteButton'
+ import { FormField, HandlesValidationErrors, Errors } from 'laravel-nova'
+
+ export default {
+  components: { DeleteButton, ImageLoader },
+  mixins: [HandlesValidationErrors, FormField],
+  props: ['resourceId', 'relatedResourceName', 'relatedResourceId', 'viaRelationship', 'resourceName', 'field'],
+
+  data: () => ({
+  file: null,
+  label: 'No file selected',
+  fileName: '',
+  removeModalOpen: false,
+  missing: false,
+  deleted: false,
+  uploadErrors: new Errors(),
+  previewUrl: null,
+ }),
+
+ watch: {
+ file(value) {
+ let reader = new FileReader()
+
+ reader.onload = event => {
+ this.previewUrl = event.target.result
  }
- }
- }
- },
-
- methods: {
- /**
- * Responsd to the file change
- */
- fileChange(event) {
- let path = event.target.value
- let fileName = path.match(/[^\\/]*$/)[0]
- this.fileName = fileName
- this.file = this.$refs.fileField.files[0]
- },
 
- /**
- * Confirm removal of the linked file
- */
- confirmRemoval() {
- this.removeModalOpen = true
+ reader.readAsDataURL(value)
+ },
  },
 
- /**
- * Close the upload removal modal
- */
- closeRemoveModal() {
- this.removeModalOpen = false
- },
+ mounted() {
+ this.field.fill = formData => {
+ formData.append(this.field.attribute, this.file, this.fileName)
 
- /**
- * Remove the linked file from storage
- */
- async removeFile() {
- this.uploadErrors = new Errors()
-
- const {
- resourceName,
- resourceId,
- relatedResourceName,
- relatedResourceId,
- viaRelationship,
- } = this
- const attribute = this.field.attribute
-
- const uri = this.viaRelationship
- ? `/nova-api/${resourceName}/${resourceId}/${relatedResourceName}/${relatedResourceId}/field/${attribute}?viaRelationship=${viaRelationship}`
- : `/nova-api/${resourceName}/${resourceId}/field/${attribute}`
-
- try {
- await Nova.request().delete(uri)
- this.closeRemoveModal()
- this.deleted = true
- this.$emit('file-deleted')
- } catch (error) {
- this.closeRemoveModal()
-
- if (error.response.status == 422) {
- this.uploadErrors = new Errors(error.response.data.errors)
+ for (let attribute in this.field) {
+ if (attribute.substr(0, 3) === 'ml_') {
+ formData.append(attribute, this.field[attribute])
+ }
  }
  }
  },
- },
-
- computed: {
- hasError() {
- return (
- this.errors.has(this.fieldAttribute) || this.uploadErrors.has(this.fieldAttribute)
- )
- },
-
- firstError() {
- if (this.hasError) {
- return (
- this.errors.first(this.fieldAttribute) ||
- this.uploadErrors.first(this.fieldAttribute)
- )
- }
- },
 
- /**
- * The current label of the file field
- */
- currentLabel() {
- return this.fileName || this.label
- },
-
- /**
- * The ID attribute to use for the file field
- */
- idAttr() {
- return this.labelFor
- },
-
- /**
- * The label attribute to use for the file field
- * @return {[type]} [description]
- */
- labelFor() {
- return `file-${this.field.attribute}`
+ methods: {
+ /**
+ * Responsd to the file change
+ */
+ fileChange(event) {
+ let path = event.target.value
+ let fileName = path.match(/[^\\/]*$/)[0]
+ this.fileName = fileName
+ this.file = this.$refs.fileField.files[0]
+ },
+
+ /**
+ * Confirm removal of the linked file
+ */
+ confirmRemoval() {
+ this.removeModalOpen = true
+ },
+
+ /**
+ * Close the upload removal modal
+ */
+ closeRemoveModal() {
+ this.removeModalOpen = false
+ },
+
+ /**
+ * Remove the linked file from storage
+ */
+ async removeFile() {
+ this.uploadErrors = new Errors()
+
+ const { resourceName, resourceId, relatedResourceName, relatedResourceId, viaRelationship } = this
+ const attribute = this.field.attribute
+
+ const uri = this.viaRelationship
+ ? `/nova-api/${resourceName}/${resourceId}/${relatedResourceName}/${relatedResourceId}/field/${attribute}?viaRelationship=${viaRelationship}`
+ : `/nova-api/${resourceName}/${resourceId}/field/${attribute}`
+
+ try {
+ await Nova.request().delete(uri)
+ this.closeRemoveModal()
+ this.deleted = true
+ this.$emit('file-deleted')
+ } catch (error) {
+ this.closeRemoveModal()
+
+ if (error.response.status == 422) {
+ this.uploadErrors = new Errors(error.response.data.errors)
+ }
+ }
+ },
  },
 
- /**
- * Determine whether the field has a value
- */
- hasValue() {
- return (
- Boolean(this.field.value || this.field.thumbnailUrl) &&
- !Boolean(this.deleted) &&
- !Boolean(this.missing)
- )
- },
+ computed: {
+ imageUrl() {
+ return this.previewUrl ? this.previewUrl : this.field.value
+ },
 
- /**
- * Determine whether the field should show the loader component
- */
- shouldShowLoader() {
- return !Boolean(this.deleted) && Boolean(this.field.thumbnailUrl)
- },
+ hasError() {
+ return this.errors.has(this.fieldAttribute) || this.uploadErrors.has(this.fieldAttribute)
+ },
 
- /**
- * Determine whether the field should show the remove button
- */
- shouldShowRemoveButton() {
- return Boolean(this.field.deletable)
+ firstError() {
+ if (this.hasError) {
+ return this.errors.first(this.fieldAttribute) || this.uploadErrors.first(this.fieldAttribute)
+ }
+ },
+
+ /**
+ * The current label of the file field
+ */
+ currentLabel() {
+ return this.fileName || this.label
+ },
+
+ /**
+ * The ID attribute to use for the file field
+ */
+ idAttr() {
+ return this.labelFor
+ },
+
+ /**
+ * The label attribute to use for the file field
+ * @return {[type]} [description]
+ */
+ labelFor() {
+ return `file-${this.field.attribute}`
+ },
+
+ /**
+ * Determine whether the field has a value
+ */
+ hasValue() {
+ return (
+ Boolean(this.field.value || this.field.thumbnailUrl) && !Boolean(this.deleted) && !Boolean(this.missing)
+ )
+ },
+
+ /**
+ * Determine whether the field should show the loader component
+ */
+ shouldShowLoader() {
+ return !Boolean(this.deleted) && Boolean(this.field.thumbnailUrl)
+ },
+
+ /**
+ * Determine whether the field should show the remove button
+ */
+ shouldShowRemoveButton() {
+ return Boolean(this.field.deletable)
+ },
  },
- },
-}
+ }
 </script>