Merge pull request #7 from unimal-jp/add-input-type

Add input type

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spearly/vue",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "This package allows you to easily implement Spearly in your Vue project!",
   "main": "dist/cjs/spearly-vue.js",
   "module": "dist/esm/spearly-vue.js",
@@ -67,7 +67,7 @@
     "vue-template-compiler": "^2.6.14"
   },
   "dependencies": {
-    "@spearly/sdk-js": "^1.0.0-next.3",
+    "@spearly/sdk-js": "^1.0.0-next.8",
     "@vue/compiler-sfc": "^3.2.33",
     "typescript": "^4.6.4"
   },

src/components/spearly-form/index.vue

@@ -79,6 +79,19 @@
                 </label>
               </template>
 
+              <template v-else-if="field.inputType === 'file'">
+                <label class="spearly-form-file">
+                  <input
+                    :id="field.identifier"
+                    :required="field.required"
+                    :accept="field.data?.fileExtensions?.map((extension) => `.${extension}`).join(',')"
+                    type="file"
+                    class="spearly-form-file-input"
+                    @change="onChangeFile($event, field.identifier)"
+                  />
+                </label>
+              </template>
+
               <p
                 v-if="state.errors.get(field.identifier)"
                 :id="`spearly-form-field-${field.identifier}-error`"
@@ -153,6 +166,7 @@ export type Props = {
 export type State = {
   form: { createdAt: Date | null } & Omit<SpearlyForm, 'createdAt'>
   answers: { [key: string]: string | string[]; _spearly_gotcha: string }
+  files: { [key: string]: string }
   errors: Map<string, string>
   error: boolean
   confirm: boolean
@@ -177,6 +191,7 @@ const state = reactive<State>({
     createdAt: null,
   },
   answers: { _spearly_gotcha: '' },
+  files: {},
   error: false,
   errors: new Map(),
   confirm: false,
@@ -194,7 +209,11 @@ const setFormData = async () => {
 
 const setAnswersObj = () => {
   state.form.fields.forEach((field) => {
-    state.answers[field.identifier] = field.inputType === 'checkbox' && field.data?.options.length ? [] : ''
+    state.answers[field.identifier] = field.inputType === 'checkbox' && field.data?.options?.length ? [] : ''
+
+    if (field.inputType === 'file') {
+      state.files[field.identifier] = ''
+    }
   })
 }
 
@@ -295,6 +314,25 @@ const onClick = () => {
   submit(state.answers)
 }
 
+const onChangeFile = (event: Event, identifier: string) => {
+  const files = (event.target as HTMLInputElement).files
+
+  if (!files) return
+  if (!files.length) {
+    state.answers[identifier] = ''
+    state.files[identifier] = ''
+  }
+
+  const fileReader = new FileReader()
+
+  fileReader.onload = () => {
+    state.answers[identifier] = fileReader.result as string
+    state.files[identifier] = files[0].name
+  }
+
+  fileReader.readAsDataURL(files[0])
+}
+
 const submit = async (fields: { [key: string]: unknown } & { _spearly_gotcha: string }) => {
   if (!$spearly) throw new Error('$spearly is not inject.')
   try {