Commit e63f1938 authored by MainServer's avatar MainServer
Browse files

Add single file upload components

parent 3cfc99cf

package-lock.json

+56 −6
Original line number Diff line number Diff line
@@ -8,6 +8,7 @@ 
      "name": "vue33",

      "version": "0.1.0",

      "dependencies": {

        "axios": "^1.5.1",

        "core-js": "^3.8.3",

        "vue": "^3.2.13"

      },
@@ -3068,9 +3069,9 @@ 
    },

    "node_modules/@vue/vue-loader-v15": {

      "name": "vue-loader",

      "version": "15.11.0",

      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.0.tgz",

      "integrity": "sha512-5D03kQECBIUmCqha46l5GEBhtg54FIwl3YvV32jmy0u/XI+u2zNWG+fjZpSZQJlXNltuIkR09mJnaGNrLnQ4Mg==",

      "version": "15.11.1",

      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",

      "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",

      "dev": true,

      "dependencies": {

        "@vue/component-compiler-utils": "^3.1.0",
@@ -3522,6 +3523,11 @@ 
        "lodash": "^4.17.14"

      }

    },

    "node_modules/asynckit": {

      "version": "0.4.0",

      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",

      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="

    },

    "node_modules/at-least-node": {

      "version": "1.0.0",

      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3568,6 +3574,16 @@ 
        "postcss": "^8.1.0"

      }

    },

    "node_modules/axios": {

      "version": "1.5.1",

      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz",

      "integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==",

      "dependencies": {

        "follow-redirects": "^1.15.0",

        "form-data": "^4.0.0",

        "proxy-from-env": "^1.1.0"

      }

    },

    "node_modules/babel-loader": {

      "version": "8.3.0",

      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -4242,6 +4258,17 @@ 
      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",

      "dev": true

    },

    "node_modules/combined-stream": {

      "version": "1.0.8",

      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",

      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",

      "dependencies": {

        "delayed-stream": "~1.0.0"

      },

      "engines": {

        "node": ">= 0.8"

      }

    },

    "node_modules/commander": {

      "version": "8.3.0",

      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -5012,6 +5039,14 @@ 
        "url": "https://github.com/sponsors/ljharb"

      }

    },

    "node_modules/delayed-stream": {

      "version": "1.0.0",

      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",

      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",

      "engines": {

        "node": ">=0.4.0"

      }

    },

    "node_modules/depd": {

      "version": "2.0.0",

      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -6257,7 +6292,6 @@ 
      "version": "1.15.3",

      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",

      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",

      "dev": true,

      "funding": [

        {

          "type": "individual",
@@ -6273,6 +6307,19 @@ 
        }

      }

    },

    "node_modules/form-data": {

      "version": "4.0.0",

      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",

      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",

      "dependencies": {

        "asynckit": "^0.4.0",

        "combined-stream": "^1.0.8",

        "mime-types": "^2.1.12"

      },

      "engines": {

        "node": ">= 6"

      }

    },

    "node_modules/forwarded": {

      "version": "0.2.0",

      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -7792,7 +7839,6 @@ 
      "version": "1.52.0",

      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",

      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",

      "dev": true,

      "engines": {

        "node": ">= 0.6"

      }
@@ -7801,7 +7847,6 @@ 
      "version": "2.1.35",

      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",

      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",

      "dev": true,

      "dependencies": {

        "mime-db": "1.52.0"

      },
@@ -9280,6 +9325,11 @@ 
        "node": ">= 0.10"

      }

    },

    "node_modules/proxy-from-env": {

      "version": "1.1.0",

      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",

      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="

    },

    "node_modules/pseudomap": {

      "version": "1.0.2",

      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",

package.json

+1 −0
Original line number Diff line number Diff line
@@ -8,6 +8,7 @@ 
    "lint": "vue-cli-service lint"

  },

  "dependencies": {

    "axios": "^1.5.1",

    "core-js": "^3.8.3",

    "vue": "^3.2.13"

  },

src/App.vue

+7 −3
Original line number Diff line number Diff line 
<template>

  <img alt="Vue logo" src="./assets/logo.png">

  <HelloWorld msg="Welcome to Your Vue.js App"/>

  <single-file/>

  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->

</template>



<script>

import HelloWorld from './components/HelloWorld.vue'

// import HelloWorld from './components/HelloWorld.vue'

// https://github.com/serversideup/uploading-files-vuejs-axios

import SingleFile from './components/SingleFile.vue'



export default {

  name: 'App',

  components: {

    HelloWorld

    // HelloWorld

    SingleFile

  }

}

</script>

src/components/SingleFile.vue

0 → 100644
+58 −0
Original line number Diff line number Diff line 
<template>

	<div class="container">

		<div>

			<h2>Single File</h2>

			<hr/>

			<label>File

				<input type="file" @change="handleFileUpload( $event )"/>

			</label>

			<br>

			<button v-on:click="submitFile()">Submit</button>

		</div>

	</div>

</template>



<script>

	import axios from 'axios';



	export default {

		data(){

			return {

				file: ''

			}

		},

		

		methods: {

			handleFileUpload( event ){

				this.file = event.target.files[0];

			},

			

			submitFile(){

				let formData = new FormData();

								

				formData.append('file', this.file);

				

				axios.post(

					'/single-file',

					formData,

					{

						headers: {

								'Content-Type': 'multipart/form-data',

								'Accept': 'application/json',

								// Fixed CORS error

								// 'Access-Control-Allow-Origin': '*',

								'Access-Control-Allow-Methods': 'GET, POST',

								'Access-Control-Allow-Headers': ''

						}

					}

				).then(function(){

					console.log('SUCCESS!!');

				})

				.catch(function(){

					console.log('FAILURE!!');

				});

			}

		}

	}

</script>

	
 No newline at end of file