File upload JS

design sketch

html Code ：

<template>
//intl Is an introduced function , The main function is to convert the title from Chinese to English ,formData It's a json The 
	<div title>{
   { intl(formData['resume']) }}</div>
	<div>
	// Pay attention to this input type , To open the local folder after clicking ;accept Yes, the selected file type can only be pdf;
		<input type="file" accept="application/pdf" ref="fileInput" style="display:none">
		// there v-if Is to determine whether there is a selected file , If selected, the file name... Is displayed 
		<div class="file_message" v-if="resumeName !== ''">
			// Show front here pdf Icon 
		  <div class="img"><i class="fas fa-file-pdf"></i></div>
		  <div class="content">
			<span class="file_name">{
   {resumeName}}</span>
			<div class="file_size">{
   {fileSize}}</div>
			<span class="operation" style=" display:flex; position: absolute; right: 0.5em; bottom: 0.5em; font-size: 0.6em;">
			//Button It refers to another component 
			  <Button :type="['', 'blue'].join(' ')" :name=" intl({ 'en-US': 'Reselect', 'zh-CN': ' To choose ', }) " @click="uploadFile" />
			  <Button :type="['', 'red'].join(' ')" :name=" intl({ 'en-US': 'Delete', 'zh-CN': ' Delete ', }) " @click="deleteFile" />
			</span>
		  </div>
		</div>
		// And the above v-if Corresponding 
		<div class="upload" v-else @click="uploadFile">
		  <i></i>
		  <span>
			{
   {
					intl({
							"en-US": "Select file (maximum 10M)",
							"zh-CN": " Select File ( Maximum limit 10M)",
						})
					}}
		  </span>
		</div>
	  </div>
</template>

css Code ：

<style scoped> .upload {
    
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 7em;
  padding: 0;
  border-radius: 5px;
  background-color: var(--gray-background);
  color: var(--gray-bright);
}
.upload i {
    
  width: 2.5em;
  height: 2.5em;
  margin: 0.5em auto 0.3em;
  background: url(https://s1.wenjuan.com/static/img/q_upload_file/upload-pc.svg) no-repeat;
}
.upload span {
    
  font-size: 0.8em;
  color: var(--gray);
  opacity: 0.5;
}
.file_message {
    
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--gray-background);
  padding: 1em;
  border: 1px solid var(--gray-border);
  border-radius: 5px;
}
.file_message .img {
    
  font-size: 2.8em;
  color: var(--gray);
  padding-right: 0.5em;
}
.file_name {
    
  font-size: 1.2em;
  color: var(--gray);
}
.file_size {
    
  margin-top: 0.5em;
  font-size: 0.8em;
  color: var(--gray);
  opacity: 0.6;
}
</style>

js Code ：

<script>
import {
     intl } from '/util/env.js'
import {
     formData } from '/apply/formData.json'
export default {
    
// Pass up update function 
  emits: ['update'],
  data() {
    
	return {
    
	  formData,
	  resumeName: '',
	  fileSize: '',
	  fileType: '',
	}
  },
  methods: {
    
	uploadFile() {
    
	  let fileInput = this.$refs.fileInput
	  fileInput.click()
	  fileInput.onchange = () => {
    
		let file = fileInput.files[0]
		let resumeSize = file.size
		if (resumeSize / (1024 * 1024) > 10) {
    
		  alert(' Limit 10MB within ')
		  return false
		} else {
    
		  if (resumeSize >= 1024 && resumeSize < 1048576) {
    
			this.fileSize = parseFloat((resumeSize / 1024).toFixed(2)) + 'KB'
		  } else if (resumeSize >= 1048576) {
    
			this.fileSize = parseFloat((resumeSize / 1048576).toFixed(2)) + 'M'
		  } else {
    
			this.fileSize = parseFloat(resumeSize.toFixed(2)) + 'B'
		  }
		}
		this.resumeName = file.name
		console.log(file)
	  }
	},
	update(fileInput = false) {
    
	  if (!fileInput) {
    
		this.$refs.fileInput.blur()
	  } else {
    
		this.$emit('update', this.$refs.fileInput.files[0])
	  }
	},
	deleteFile() {
    
	  this.resumeName = ''
	},
	intl,
  },
}
</script>