Skip to content

Commit

Permalink
works
Browse files Browse the repository at this point in the history
  • Loading branch information
VovaStelmashchuk committed Dec 30, 2024
1 parent 2e184fb commit 5c401cf
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 36 deletions.
85 changes: 51 additions & 34 deletions components/DxfUpload.vue
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>
92 changes: 90 additions & 2 deletions pages/index.vue
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>

0 comments on commit 5c401cf

Please sign in to comment.