1
<template>
2
  <div v-bind:class="amplifyUI.formSection" style="width: 380px">
3
    <div v-bind:class="amplifyUI.sectionHeader">{{options.header}}</div>
4
    <div v-bind:class="amplifyUI.sectionBody">
5
      <img 
6
        v-if="file" 
7
        :src="photoUrl" 
8
        style="max-width: 100%"
9
      />
10
      <div v-bind:class="amplifyUI.photoPlaceholder"  v-if="!file">
11
        <div v-bind:class="amplifyUI.photoPlaceholderIcon" v-if="!file">
12
          <svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24'>
13
            <circle cx='12' cy='12' r='3.2' />
14
            <path d='M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z'/>
15
            <path d='M0 0h24v24H0z' fill='none' />
16
            </svg>
17
        </div>
18
      </div>
19
      <input
20
        ref="file_input"  
21
        type="file"
22
        :accept="options.accept"
23
        @change="pick"
24
      />
25
    </div>
26
    <button v-if="file" v-bind:class="[amplifyUI.photoPickerButton, amplifyUI.button]" v-on:click="upload" :disabled="!file">{{options.title}}</button>
27
    <div class="error" v-if="error">
28
      {{ error }}
29
    </div>
30
  </div>
31
</template>
32

33
<script>
34 1
import * as AmplifyUI from '@aws-amplify/ui';
35 1
import AmplifyEventBus from '../../events/AmplifyEventBus';
36

37
export default {
38
  name: 'PhotoPicker',
39
  props: ['photoPickerConfig'],
40
  data () {
41 1
    return {
42
      logger: {},
43
      file: null,
44
      s3ImagePath: '',
45
      photoUrl: '',
46
      error: '',
47
      amplifyUI: AmplifyUI,
48
    }
49
  },
50
  computed: {
51
    options() {
52 1
      const defaults = {
53
        header: this.$Amplify.I18n.get('File Upload'),
54
        title: this.$Amplify.I18n.get('Upload'),
55
        accept: '*/*',
56
        storageOptions: {}
57
      }
58 1
      return Object.assign(defaults, this.photoPickerConfig || {})
59
    },
60
  },
61
  mounted() {
62 1
    this.logger = new this.$Amplify.Logger(this.$options.name);
63 1
    if (!this.options.path) {
64 1
      return this.setError('File path not provided.');
65
    }
66 1
    if (this.options.path.substr(this.options.path.length -1) !== '/') {
67 1
      this.options.path = this.options.path + '/'; 
68
    }
69
  },
70
  methods: {
71
    upload: function() {
72 1
      this.$Amplify.Storage.put(
73
        this.s3ImagePath,
74
        this.file, 
75
        this.options.storageOptions,
76
      )
77
      .then((result) => {
78 1
        this.completeFileUpload(result.key)
79 0
      })
80
      .catch(e => this.setError(e));
81
    },
82
    pick: function(evt) {
83 0
      this.file = evt.target.files[0];
84 1
      if (!this.file) { return ;};
85 1
      if (!this.options.storageOptions.contentType) {
86 0
        this.options.storageOptions.contentType = this.file.type;
87
      };
88 1
      const name = this.options.defaultName ? this.options.defaultName : this.file.name;
89 0
      this.s3ImagePath = `${this.options.path}${name}`;
90 0
      const that = this;
91 0
      const reader = new FileReader();
92 0
      reader.onload = (e) => {
93 0
        const target = e.target;
94 0
        const url  = target.result;
95 0
        that.photoUrl = url;
96
      }
97 0
      reader.readAsDataURL(this.file);
98
    },
99
    completeFileUpload: function(img) {
100 1
      this.file = null;
101 1
      this.s3ImageFile = null;
102 1
      this.$refs.file_input.value = null;
103 1
      AmplifyEventBus.$emit('fileUpload', img);
104
    },
105
    setError: function(e) {
106 1
      this.error = this.$Amplify.I18n.get(e.message || e);
107 1
      this.logger.error(this.error);
108
    }
109
  }
110
}
111
</script>

Read our documentation on viewing source code .

Loading