mirror of https://github.com/docusealco/docuseal
				
				
				
			
			You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							87 lines
						
					
					
						
							1.7 KiB
						
					
					
				
			
		
		
	
	
							87 lines
						
					
					
						
							1.7 KiB
						
					
					
				| <template>
 | |
|   <div>
 | |
|     <template v-if="modelValue.length">
 | |
|       <div
 | |
|         v-for="(val, index) in modelValue"
 | |
|         :key="index"
 | |
|       >
 | |
|         <a
 | |
|           v-if="val"
 | |
|           :href="attachmentsIndex[val].url"
 | |
|         >
 | |
|           {{ attachmentsIndex[val].filename }}
 | |
|         </a>
 | |
|         <input
 | |
|           :value="val"
 | |
|           type="hidden"
 | |
|           :name="`values[${field.uuid}][]`"
 | |
|         >
 | |
|         <button
 | |
|           v-if="modelValue"
 | |
|           @click.prevent="removeAttachment(val)"
 | |
|         >
 | |
|           Remove
 | |
|         </button>
 | |
|       </div>
 | |
|     </template>
 | |
|     <template v-else>
 | |
|       <input
 | |
|         value=""
 | |
|         type="hidden"
 | |
|         :name="`values[${field.uuid}][]`"
 | |
|       >
 | |
|     </template>
 | |
|     <FileDropzone
 | |
|       :message="'Attachments'"
 | |
|       :submission-slug="submissionSlug"
 | |
|       @upload="onUpload"
 | |
|     />
 | |
|   </div>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import FileDropzone from './dropzone'
 | |
| 
 | |
| export default {
 | |
|   name: 'AttachmentStep',
 | |
|   components: {
 | |
|     FileDropzone
 | |
|   },
 | |
|   props: {
 | |
|     field: {
 | |
|       type: Object,
 | |
|       required: true
 | |
|     },
 | |
|     submissionSlug: {
 | |
|       type: String,
 | |
|       required: true
 | |
|     },
 | |
|     attachmentsIndex: {
 | |
|       type: Object,
 | |
|       required: false,
 | |
|       default: () => ({})
 | |
|     },
 | |
|     modelValue: {
 | |
|       type: Array,
 | |
|       required: false,
 | |
|       default: () => []
 | |
|     }
 | |
|   },
 | |
|   emits: ['attached', 'update:model-value'],
 | |
|   methods: {
 | |
|     removeAttachment (uuid) {
 | |
|       this.modelValue.splice(this.modelValue.indexOf(uuid), 1)
 | |
| 
 | |
|       this.$emit('update:model-value', this.modelValue)
 | |
|     },
 | |
|     onUpload (attachments) {
 | |
|       attachments.forEach((attachment) => {
 | |
|         this.$emit('attached', attachment)
 | |
|       })
 | |
| 
 | |
|       this.$emit('update:model-value', [...this.modelValue, ...attachments.map(a => a.uuid)])
 | |
|     }
 | |
|   }
 | |
| }
 | |
| </script>
 |