Get file upload working

Even though the UI doesn't do anything with it yet.
This commit is contained in:
Eli Ribble 2026-03-27 08:39:38 -07:00
parent 0d1bd752a4
commit 747544bb58
No known key found for this signature in database
8 changed files with 354 additions and 77 deletions

View file

@ -81,47 +81,11 @@
<h5 class="mb-0">Upload Data</h5>
</div>
<div class="card-body">
<form
action="/configuration/upload/pool/flyover"
method="POST"
enctype="multipart/form-data"
>
<div class="upload-area">
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
fill="currentColor"
class="bi bi-cloud-arrow-up text-primary mb-3"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2z"
/>
<path
d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"
/>
</svg>
<h5>Select your CSV file</h5>
<p class="text-muted">
Drag and drop a file here or click to browse
</p>
<input
type="file"
class="form-control"
id="csvFile"
name="csvfile"
accept=".csv"
/>
</div>
<div class="d-grid gap-2 text-center">
<button class="btn btn-primary" type="submit">
Upload and Continue
</button>
</div>
</form>
<CSVUpload
upload-url="/api/upload/pool/flyover"
@doError="onError"
@doFileSelected="onFileSelected"
@doSuccess="onUploadSuccess" />
</div>
</div>
@ -133,3 +97,16 @@
</div>
</div>
</template>
<script setup lang="ts">
import CSVUpload from "@/components/CSVUpload.vue";
function onError(err) {
console.error("CSV upload error", err);
}
function onFileSelected(file) {
console.log("file selected", file);
}
function onUploadSuccess(resp) {
console.log("upload success", resp);
}
</script>