-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2e184fb
commit 5c401cf
Showing
2 changed files
with
141 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,49 +1,66 @@ | ||
<template> | ||
<div> | ||
<label | ||
for="dxfFiles" | ||
class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-gray-400 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-black" | ||
> | ||
<svg | ||
xmlns="http://www.w3.org/2000/svg" | ||
class="w-12 h-12 text-black" | ||
fill="none" | ||
viewBox="0 0 24 24" | ||
stroke="currentColor" | ||
stroke-width="2" | ||
<div> | ||
<label | ||
for="dxfFiles" | ||
class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-gray-400 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-black" | ||
> | ||
<path | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
d="M12 4v16m8-8H4" | ||
/> | ||
</svg> | ||
<span class="mt-2 text-l text-black"> | ||
Drag & drop or click to upload DXF files | ||
</span> | ||
</label> | ||
<input | ||
type="file" | ||
id="dxfFiles" | ||
name="dxf" | ||
accept=".dxf" | ||
multiple | ||
@change="onDXFChange" | ||
class="hidden" | ||
/> | ||
<svg | ||
xmlns="http://www.w3.org/2000/svg" | ||
class="w-12 h-12 text-black" | ||
fill="none" | ||
viewBox="0 0 24 24" | ||
stroke="currentColor" | ||
stroke-width="2" | ||
> | ||
<path | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
d="M12 4v16m8-8H4" | ||
/> | ||
</svg> | ||
<span class="mt-2 text-l text-black"> | ||
Drag & drop or click to upload DXF files | ||
</span> | ||
</label> | ||
<input | ||
type="file" | ||
id="dxfFiles" | ||
name="dxf" | ||
accept=".dxf" | ||
multiple | ||
@change="onDXFChange" | ||
class="hidden" | ||
/> | ||
</div> | ||
<div class="mt-4" v-if="dxfFiles"> | ||
<ul class="space-y-2"> | ||
<li | ||
v-for="file in dxfFiles" | ||
:key="file.name" | ||
class="p-4 bg-white border rounded-lg shadow-sm" | ||
> | ||
{{ file.name }} | ||
</li> | ||
</ul> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
name: "DxfUpload", | ||
data() { | ||
return { | ||
dxfFiles: [], | ||
}; | ||
}, | ||
methods: { | ||
onDXFChange(event) { | ||
const files = Array.from(event.target.files); | ||
this.$emit("files", files); | ||
const addedFiles = Array.from(event.target.files); | ||
this.dxfFiles = [...this.dxfFiles, ...addedFiles]; | ||
this.$emit("files", this.dxfFiles); | ||
}, | ||
}, | ||
}; | ||
</script> | ||
|
||
<style scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,93 @@ | ||
<template> | ||
<h2>index page</h2> | ||
<div class="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-md"> | ||
<h2 class="text-2xl font-bold text-gray-800 mb-6 text-center"> | ||
Lets make your laser cutting economical | ||
</h2> | ||
|
||
<form @submit.prevent="handleSubmit" enctype="multipart/form-data"> | ||
<div class="mb-6"> | ||
<label | ||
for="dxfFilesLabel" | ||
class="block text-xl font-medium text-gray-800 mb-2" | ||
> | ||
DXF Files | ||
</label> | ||
<DxfUpload @files="handleDxfChange" /> | ||
</div> | ||
|
||
<button | ||
type="submit" | ||
class="w-full bg-black text-white py-2 px-4 rounded-lg shadow-md border border-black hover:bg-white hover:text-black transition duration-300 ease-in-out transform focus:ring focus:ring-gray-400" | ||
> | ||
Save money | ||
</button> | ||
</form> | ||
|
||
<div | ||
v-if="message" | ||
class="mt-6 p-4 bg-green-50 border border-green-400 text-green-800 rounded-lg" | ||
> | ||
{{ message }} | ||
</div> | ||
|
||
<div | ||
v-if="error" | ||
class="mt-6 p-4 bg-red-50 border border-red-400 text-red-800 rounded-lg" | ||
> | ||
{{ error }} | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script></script> | ||
<script> | ||
import DxfUpload from "~/components/DxfUpload.vue"; | ||
export default { | ||
components: { | ||
DxfUpload, | ||
}, | ||
data() { | ||
return { | ||
dxfFiles: [], | ||
message: "", | ||
error: "", | ||
}; | ||
}, | ||
methods: { | ||
handleDxfChange(files) { | ||
this.dxfFiles = files; | ||
console.log("from child DXF files event: ", files); | ||
}, | ||
async handleSubmit() { | ||
try { | ||
this.message = ""; | ||
this.error = ""; | ||
if (this.dxfFiles.length === 0) { | ||
throw new Error("At least one DXF file is required."); | ||
} | ||
const formData = new FormData(); | ||
this.dxfFiles.forEach((file) => formData.append("dxf", file)); | ||
const response = await fetch("/api/upload", { | ||
method: "POST", | ||
body: formData, | ||
}); | ||
if (!response.ok) { | ||
const errorData = await response.json(); | ||
throw new Error(errorData.message || "Upload failed."); | ||
} | ||
const data = await response.json(); | ||
this.message = data.message; | ||
} catch (err) { | ||
this.error = err.message; | ||
} | ||
}, | ||
}, | ||
}; | ||
</script> | ||
|
||
<style scoped></style> |