Basic Vue upload page that reads excel file. No document validation. ASP.Net API with endpoint to request the current data standard and an endpoint to allow for excel uploads.

associator_rewrite
Griffiths Lott 3 years ago
parent b0d5c04d9c
commit e74ebcea6a
  1. 4
      .gitignore
  2. 20
      backend/ColumnStandard.cs
  3. 43
      backend/Controllers/ExcelUpload.cs
  4. 33
      backend/Controllers/TemplateConfigController.cs
  5. 16
      backend/Program.cs
  6. 41
      backend/Properties/launchSettings.json
  7. 37
      backend/appsettings.Development.json
  8. 37
      backend/appsettings.json
  9. 19
      backend/backend.csproj
  10. 64
      package-lock.json
  11. 3
      package.json
  12. 8
      src/App.vue
  13. 53
      src/components/FileUpload.vue
  14. 58
      src/components/HelloWorld.vue

4
.gitignore vendored

@ -1,7 +1,8 @@
.DS_Store
node_modules
/dist
bin/
obj/
# local env files
.env.local
@ -21,3 +22,4 @@ pnpm-debug.log*
*.njsproj
*.sln
*.sw?
*.xlsx

@ -0,0 +1,20 @@
namespace backend.Models
{
public class ColumnStandard
{
public ColumnStandard(string header, string headerRegex, string valueRegex, bool nullable = false)
{
Header = header;
HeaderRegex = headerRegex;
ValueRegex = valueRegex;
Nullable = nullable;
}
public string Header { get; set; }
public string HeaderRegex { get; set; }
public string ValueRegex { get; set; }
public bool Nullable { get; set; }
}
}

@ -0,0 +1,43 @@
using Microsoft.AspNetCore.Mvc;
namespace backend.Controllers
{
[Route("api/excelupload")]
[ApiController]
public class ExcelUpload : ControllerBase
{
private readonly IConfiguration _config;
public ExcelUpload(IConfiguration config)
{
_config = config;
}
[HttpPost]
public void ProcessUpload(IFormFile file)
{
// TODO : Add some header validation to make sure it comes from a real user
if (file == null)
{
Console.WriteLine("fail: FILE IS NULL");
return;
}
string dataFileName = Path.GetFileName(file.FileName);
string curDate = DateTime.Now.ToString("u");
string saveToPath = Path.Combine(_config.GetValue<string>("UploadSavePath"), curDate + '_' + dataFileName);
using (FileStream stream = new FileStream(saveToPath, FileMode.Create))
{
file.CopyTo(stream);
Console.WriteLine($"Saved to {saveToPath}.");
}
}
}
}

@ -0,0 +1,33 @@
using Microsoft.AspNetCore.Mvc;
using backend.Models;
using Newtonsoft.Json;
namespace backend.Controllers
{
[Route("api/template")]
[ApiController]
public class TemplateConfigController : ControllerBase
{
private readonly IConfiguration _config;
public TemplateConfigController(IConfiguration configuration)
{
_config = configuration;
}
[HttpGet]
public ActionResult<string> Get()
{
Console.WriteLine("template get triggered");
List<ColumnStandard>? dataStandard = _config.GetSection("DataStandard").Get<List<ColumnStandard>>();
if (dataStandard == null)
{
return "Failed to retreieve data standard!";
}
return JsonConvert.SerializeObject(dataStandard);
}
}
}

@ -0,0 +1,16 @@
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers()
.AddNewtonsoftJson();
var app = builder.Build();
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();

@ -0,0 +1,41 @@
{
"$schema": "https://json.schemastore.org/launchsettings.json",
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:64384",
"sslPort": 44316
}
},
"profiles": {
"http": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"launchUrl": "swagger",
"applicationUrl": "http://localhost:5252",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"https": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"launchUrl": "swagger",
"applicationUrl": "https://localhost:7226;http://localhost:5252",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"launchUrl": "swagger",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}

@ -0,0 +1,37 @@
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*",
"Test" : "It Worked!",
"UploadSavePath": "../Uploaded/",
"DataStandard" : [
{"Header": "Contract Number", "HeaderRegex": "PG1 FICO", "ValueRegex": "^\\d+\\d$", "Nullable": false},
{"Header": "Customer Name", "HeaderRegex": "(?i)(cust(omer)?\\s?name)", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "Phone Number", "HeaderRegex": "(?i)phone\\s?(num(ber)?|#)?", "ValueRegex": "(\\+?\\d-?)?\\s?\\(?\\d{3}\\)?-?\\s?\\d{3}-?\\s?\\d{4}", "Nullable": false},
{"Header": "Tax-ID", "HeaderRegex": "(?i)(tax-?id)|(TIN)|(EIN)", "ValueRegex": "(\\d{2}-?\\d{7})|((\\d{3}){2}\\d{3})|(\\d{3}-?\\d{2}-?\\d{4})", "Nullable": false},
{"Header": "Debtor Address 1", "HeaderRegex": "(?i)debtor\\s?add(ress)?", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "Debtor City", "HeaderRegex": "(?i)debtor\\s?city", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "Debtor State", "HeaderRegex": "(?i)debtor\\s?state", "ValueRegex": "\\w+", "Nullable": false},
{"Header": "Debtor Zip Code", "HeaderRegex": "(?i)debtor\\s?zip\\s?(code)?", "ValueRegex": "\\d{5}-?(\\d{4})?", "Nullable": false},
{"Header": "Date Booked", "HeaderRegex": "(?i)date\\s?booked", "ValueRegex": "[1-2]?\\d\\/\\d{1,2}\\/(20)?\\d{2}", "Nullable": false},
{"Header": "Term", "HeaderRegex": "(?i)term\\s?(\\(?months\\)?)?", "ValueRegex": "\\d{1,3}", "Nullable": false},
{"Header": "Payment Amount", "HeaderRegex": "(?i)pa?yme?n?t\\s?am(oun)?t", "ValueRegex": "(\\d{1,2},?)*\\d+(.\\d{2})?", "Nullable": false},
{"Header": "Financed Amount", "HeaderRegex": "(?i)financed\\s?am(oun)?t", "ValueRegex": "(\\d{1,2},?)*\\d+(.\\d{2})?", "Nullable": false},
{"Header": "Receivable balance", "HeaderRegex": "(?i)rec(eivable)?\\s?bal(ance)?", "ValueRegex": "(\\d{1,2},?)*\\d+(.\\d{2})?", "Nullable": false},
{"Header": "Asset Description", "HeaderRegex": "(?i)asset\\sdesc(ription)?", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "Serial Number", "HeaderRegex": "(?i)serial\\s?num(ber)?|VIN", "ValueRegex": "\\d{8}", "Nullable": false},
{"Header": "Business Type", "HeaderRegex": "(?i)(business|biz)\\s?type", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "PG Name", "HeaderRegex": "(?i)pg\\s?name", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "PG Address Line 1", "HeaderRegex": "(?i)pg\\s?add(ress)?", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "PG City", "HeaderRegex": "(?i)pg\\s?city", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "PG State", "HeaderRegex": "(?i)pg\\s?state", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "PG Zip", "HeaderRegex": "(?i)pg\\s?zip", "ValueRegex": "\\d{5}-?(\\d{4})?", "Nullable": false},
{"Header": "PG SSN", "HeaderRegex": "(?i)pg\\s?ssn", "ValueRegex": "\\d{3}-?\\d{2}-?\\d{3}", "Nullable": false},
{"Header": "DOB", "HeaderRegex": "(?i)Dob", "ValueRegex": "[0-2]?\\d\\/\\d{1,2}\\/(19|20)?\\d{2}", "Nullable": false},
{"Header": "PG1 FICO", "HeaderRegex": "", "ValueRegex": "\\d{3}", "Nullable": false}
]
}

@ -0,0 +1,37 @@
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*",
"Test" : "It Worked!",
"UploadSavePath": "../Uploaded/",
"DataStandard" : [
{"Header": "Contract Number", "HeaderRegex": "PG1 FICO", "ValueRegex": "^\\d+\\d$", "Nullable": false},
{"Header": "Customer Name", "HeaderRegex": "(?i)(cust(omer)?\\s?name)", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "Phone Number", "HeaderRegex": "(?i)phone\\s?(num(ber)?|#)?", "ValueRegex": "(\\+?\\d-?)?\\s?\\(?\\d{3}\\)?-?\\s?\\d{3}-?\\s?\\d{4}", "Nullable": false},
{"Header": "Tax-ID", "HeaderRegex": "(?i)(tax-?id)|(TIN)|(EIN)", "ValueRegex": "(\\d{2}-?\\d{7})|((\\d{3}){2}\\d{3})|(\\d{3}-?\\d{2}-?\\d{4})", "Nullable": false},
{"Header": "Debtor Address 1", "HeaderRegex": "(?i)debtor\\s?add(ress)?", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "Debtor City", "HeaderRegex": "(?i)debtor\\s?city", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "Debtor State", "HeaderRegex": "(?i)debtor\\s?state", "ValueRegex": "\\w+", "Nullable": false},
{"Header": "Debtor Zip Code", "HeaderRegex": "(?i)debtor\\s?zip\\s?(code)?", "ValueRegex": "\\d{5}-?(\\d{4})?", "Nullable": false},
{"Header": "Date Booked", "HeaderRegex": "(?i)date\\s?booked", "ValueRegex": "[1-2]?\\d\\/\\d{1,2}\\/(20)?\\d{2}", "Nullable": false},
{"Header": "Term", "HeaderRegex": "(?i)term\\s?(\\(?months\\)?)?", "ValueRegex": "\\d{1,3}", "Nullable": false},
{"Header": "Payment Amount", "HeaderRegex": "(?i)pa?yme?n?t\\s?am(oun)?t", "ValueRegex": "(\\d{1,2},?)*\\d+(.\\d{2})?", "Nullable": false},
{"Header": "Financed Amount", "HeaderRegex": "(?i)financed\\s?am(oun)?t", "ValueRegex": "(\\d{1,2},?)*\\d+(.\\d{2})?", "Nullable": false},
{"Header": "Receivable balance", "HeaderRegex": "(?i)rec(eivable)?\\s?bal(ance)?", "ValueRegex": "(\\d{1,2},?)*\\d+(.\\d{2})?", "Nullable": false},
{"Header": "Asset Description", "HeaderRegex": "(?i)asset\\sdesc(ription)?", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "Serial Number", "HeaderRegex": "(?i)serial\\s?num(ber)?|VIN", "ValueRegex": "\\d{8}", "Nullable": false},
{"Header": "Business Type", "HeaderRegex": "(?i)(business|biz)\\s?type", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "PG Name", "HeaderRegex": "(?i)pg\\s?name", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "PG Address Line 1", "HeaderRegex": "(?i)pg\\s?add(ress)?", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "PG City", "HeaderRegex": "(?i)pg\\s?city", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "PG State", "HeaderRegex": "(?i)pg\\s?state", "ValueRegex": "(\\w+\\s?)+", "Nullable": false},
{"Header": "PG Zip", "HeaderRegex": "(?i)pg\\s?zip", "ValueRegex": "\\d{5}-?(\\d{4})?", "Nullable": false},
{"Header": "PG SSN", "HeaderRegex": "(?i)pg\\s?ssn", "ValueRegex": "\\d{3}-?\\d{2}-?\\d{3}", "Nullable": false},
{"Header": "DOB", "HeaderRegex": "(?i)Dob", "ValueRegex": "[0-2]?\\d\\/\\d{1,2}\\/(19|20)?\\d{2}", "Nullable": false},
{"Header": "PG1 FICO", "HeaderRegex": "", "ValueRegex": "\\d{3}", "Nullable": false}
]
}

@ -0,0 +1,19 @@
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net7.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="ExcelDataReader" Version="3.7.0-develop00310" />
<PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="7.0.2" />
<PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="7.0.1" />
<PackageReference Include="Microsoft.Extensions.Configuration" Version="7.0.0" />
<PackageReference Include="Microsoft.Extensions.Configuration.Binder" Version="7.0.2" />
<PackageReference Include="Newtonsoft.Json" Version="13.0.2" />
<PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
</ItemGroup>
</Project>

64
package-lock.json generated

@ -9,7 +9,8 @@
"version": "0.1.0",
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
"vue": "^3.2.13",
"xlsx": "https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz"
},
"devDependencies": {
"@babel/core": "^7.12.16",
@ -11387,6 +11388,18 @@
}
}
},
"node_modules/xlsx": {
"version": "0.19.1",
"resolved": "https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz",
"integrity": "sha512-pPh/ybd1bChlhCrtQ9QmRUx2yjQwMbS4tfvV9MSA2Qmm7vRUHQtPDMlLjAvQ2A4v8G92i2RlrNkSOKb1bwY7ww==",
"license": "Apache-2.0",
"bin": {
"xlsx": "bin/xlsx.njs"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/y18n": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@ -13420,7 +13433,8 @@
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
"integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
"dev": true
"dev": true,
"requires": {}
},
"@vue/cli-service": {
"version": "5.0.8",
@ -13941,13 +13955,15 @@
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
"integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
"dev": true
"dev": true,
"requires": {}
},
"acorn-jsx": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
"dev": true
"dev": true,
"requires": {}
},
"acorn-walk": {
"version": "8.2.0",
@ -14006,7 +14022,8 @@
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"dev": true
"dev": true,
"requires": {}
},
"ansi-colors": {
"version": "4.1.3",
@ -14803,7 +14820,8 @@
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
"integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
"dev": true
"dev": true,
"requires": {}
},
"css-loader": {
"version": "6.7.3",
@ -14989,7 +15007,8 @@
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
"integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
"dev": true
"dev": true,
"requires": {}
},
"csso": {
"version": "4.2.0",
@ -16475,7 +16494,8 @@
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
"integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
"dev": true
"dev": true,
"requires": {}
},
"ieee754": {
"version": "1.2.1",
@ -17850,25 +17870,29 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
"integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
"dev": true
"dev": true,
"requires": {}
},
"postcss-discard-duplicates": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
"integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
"dev": true
"dev": true,
"requires": {}
},
"postcss-discard-empty": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
"integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
"dev": true
"dev": true,
"requires": {}
},
"postcss-discard-overridden": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
"integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
"dev": true
"dev": true,
"requires": {}
},
"postcss-loader": {
"version": "6.2.1",
@ -17973,7 +17997,8 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
"integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
"dev": true
"dev": true,
"requires": {}
},
"postcss-modules-local-by-default": {
"version": "4.0.0",
@ -18008,7 +18033,8 @@
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
"integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
"dev": true
"dev": true,
"requires": {}
},
"postcss-normalize-display-values": {
"version": "5.1.0",
@ -19836,7 +19862,8 @@
"version": "8.11.0",
"resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
"integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
"dev": true
"dev": true,
"requires": {}
}
}
},
@ -19963,7 +19990,12 @@
"version": "7.5.9",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
"dev": true
"dev": true,
"requires": {}
},
"xlsx": {
"version": "https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz",
"integrity": "sha512-pPh/ybd1bChlhCrtQ9QmRUx2yjQwMbS4tfvV9MSA2Qmm7vRUHQtPDMlLjAvQ2A4v8G92i2RlrNkSOKb1bwY7ww=="
},
"y18n": {
"version": "5.0.8",

@ -9,7 +9,8 @@
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
"vue": "^3.2.13",
"xlsx": "https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz"
},
"devDependencies": {
"@babel/core": "^7.12.16",

@ -1,15 +1,15 @@
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<FileUpload></FileUpload>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
//import HelloWorld from './components/HelloWorld.vue'
import FileUpload from './components/FileUpload.vue';
export default {
name: 'App',
components: {
HelloWorld
FileUpload
}
}
</script>

@ -0,0 +1,53 @@
<template>
<form>
<input type="file" id="uploadInput" accept=".xlsx" @change="upload($event)">
</form>
</template>
<script>
import { read, utils } from "xlsx";
export default {
name: 'FileUpload',
data() {
return {
uploadedFiles: [],
uploadError: null,
currentStatus: null,
uploadFieldName: 'uploadfile'
}
},
methods: {
async upload(event) {
console.log("Upload method triggered!")
var file = await event.target.files[0].arrayBuffer();
var workbook = read(file);
var worksheet = workbook.Sheets[workbook.SheetNames[0]];
for(let col = 0; col<6; col++) {
var header;
var value;
for (let row = 5; row<7; row++) {
let adr = utils.encode_cell({c:col, r:row})
let cell = worksheet[adr];
if (row < 6 ){
header = cell.v;
} else { value = cell.v; }
}
let datapoint = {h: header, v: value};
console.log(datapoint)
}
}
}
}
</script>

@ -1,58 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Loading…
Cancel
Save