update

2024-06-13 16:49:34 +03:30
parent c8bfc3c177
commit 2886e999f1
7 changed files with 149 additions and 50 deletions
@@ -283,10 +283,17 @@

        <nuxt-link to="/account" v-if="authUser">
          <img
+          v-if="authUser.avatarMedia"
            :src="authUser?.avatarMedia"
            alt="profile"
            class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
          />
+          <img
+          v-else
+            src="/public/images/alt.png"
+            alt="profile"
+            class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
+          />
        </nuxt-link>
        <nuxt-link to="/login" v-else>
          <svg
@@ -313,7 +320,7 @@
      class="z-[10] w-[28vw] pt-[0.5vw] pb-[2vw] flex flex-col absolute mt-[8vw] rounded-[0.521vw] bg-[#F5F5F5] border shadow-md"
    >
      <span
-        class="text-[0.vw] w-full text-end pe-[0.8vw] cursor-pointer"
+        class="text-[0.6vw] w-full text-end pe-[0.8vw] cursor-pointer"
        @click="closeSearchBox"
        >بستن</span
      >
@@ -9,6 +9,8 @@
      "dependencies": {
        "@formkit/nuxt": "^1.6.5",
        "@nuxt/image": "^1.7.0",
+        "form-data": "^4.0.0",
+        "h3-formidable": "^0.2.2",
        "nuxt": "^3.11.2",
        "vue": "^3.4.27",
        "vue-router": "^4.3.2",
@@ -4500,6 +4502,11 @@
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
    },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+    },
    "node_modules/ast-kit": {
      "version": "0.12.1",
      "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-0.12.1.tgz",
@@ -4547,6 +4554,11 @@
      "resolved": "https://registry.npmjs.org/async-sema/-/async-sema-3.1.1.tgz",
      "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg=="
    },
+    "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",
@@ -5271,6 +5283,17 @@
      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
      "peer": 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": "7.2.0",
      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -5754,6 +5777,14 @@
      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="
    },
+    "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/delegates": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -5802,6 +5833,15 @@
      "resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.3.tgz",
      "integrity": "sha512-UH8EL6H2ifcY8TbD2QsxwCC/pr5xSwPvv85LrLXVihmHVC3T3YqTCIwnR5ak0yO1KYqlxrPVOA/JVZJYPy2ATg=="
    },
+    "node_modules/dezalgo": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz",
+      "integrity": "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==",
+      "dependencies": {
+        "asap": "^2.0.0",
+        "wrappy": "1"
+      }
+    },
    "node_modules/didyoumean": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -6251,6 +6291,32 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "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/formidable": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/formidable/-/formidable-3.5.1.tgz",
+      "integrity": "sha512-WJWKelbRHN41m5dumb0/k8TeAx7Id/y3a+Z7QfhxP/htI9Js5zYaEDtG8uMgG0vM0lOlqnmjE99/kfpOYi/0Og==",
+      "dependencies": {
+        "dezalgo": "^1.0.4",
+        "hexoid": "^1.0.0",
+        "once": "^1.4.0"
+      },
+      "funding": {
+        "url": "https://ko-fi.com/tunnckoCore/commissions"
+      }
+    },
    "node_modules/fraction.js": {
      "version": "4.3.7",
      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -6533,6 +6599,17 @@
        "unenv": "^1.9.0"
      }
    },
+    "node_modules/h3-formidable": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/h3-formidable/-/h3-formidable-0.2.2.tgz",
+      "integrity": "sha512-E80oEJMODFop8PGRVmvn4Aa7C076EfA069xh9i22dxNJswbXgtnQreUHBimoBU0/fH1oPhpAvRz/CQQzGBZ5/Q==",
+      "dependencies": {
+        "formidable": "v3"
+      },
+      "peerDependencies": {
+        "h3": ">=1.0.0"
+      }
+    },
    "node_modules/has-flag": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -6589,6 +6666,14 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/hexoid": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hexoid/-/hexoid-1.0.0.tgz",
+      "integrity": "sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/hookable": {
      "version": "5.5.3",
      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -7757,7 +7842,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"
      }
@@ -7766,7 +7850,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"
      },
@@ -10,15 +10,11 @@
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
-
-
-
-
-
-  
  "dependencies": {
    "@formkit/nuxt": "^1.6.5",
    "@nuxt/image": "^1.7.0",
+    "form-data": "^4.0.0",
+    "h3-formidable": "^0.2.2",
    "nuxt": "^3.11.2",
    "vue": "^3.4.27",
    "vue-router": "^4.3.2",
@@ -1,11 +1,17 @@
 <template>
  <div class="flex justify-between flex-col text-[#383E43]">
-   
    <div class="relative">
      <img
+      v-if="authUser.avatarMedia"
        :src="authUser?.avatarMedia"
        class="w-[40.256vw] md:w-[8.177vw] h-[40.256vw] md:h-[8.177vw] rounded-[50%]"
-        alt=""
+        alt="profile"
+      />
+      <img
+      v-else
+        src="/public/images/alt.png"
+        class="w-[40.256vw] md:w-[8.177vw] h-[40.256vw] md:h-[8.177vw] rounded-[50%]"
+        alt="profile"
      />
      <label for="file-upload" class="custom-file-upload">
        <svg
@@ -73,10 +79,8 @@
          />
        </svg>
      </label>
-      <input type="file" id="file-upload" @change="changePhoto" />
+      <input type="file" id="file-upload" @change="changePhoto"/>
    </div>
-
-
    <FormKit
      type="form"
      @submit="edit"
@@ -151,6 +155,7 @@ import { useToast } from "vue-toastification";
 const toast = useToast();
 const { authUser } = useAuth();
 const loading = ref(false);
+const name = ref("avater");
 const edit = async (formData) => {
  try {
    loading.value = true;
@@ -165,19 +170,28 @@ const edit = async (formData) => {
    loading.value = false;
  }
 };
-const changePhoto = async (val) => {
-  const fd = new FormData('hi')
-  fd.append('name', 'hi')
-  console.log('fd', fd);
+async function changePhoto(val) {
+  console.log("image", val.target.files[0]);
+  const formData = new FormData();
+  formData.append('file', val.target.files[0]);
+  formData.append('directoryName', name.value);
+  console.log('keys', formData.values());
+  try {
+    await $fetch("/api/uploader", {
+      method: "POST",
+      body: formData,
+    });
+  } catch (error) {
+    console.log('error client', error);
+  }
+  //        console.log('ss', formData);
+
  // const data = await useFetch("/api/uploader", {
  //   method: "POST",
-  //   body: {
-  //     file: val.target.value,
-  //     directoryName: "profileAvatar",
-  //   },
+  //   body: formData
  // });
-  // console.log("done", data);
-};
+  //  console.log("done", data.data);
+}
 </script>

 <style scoped>
@@ -12,7 +12,7 @@ export default defineEventHandler(async (event) => {
        setCookie(event, 'token', data.token, {
            httpOnly: true,
            secure: true,
-            maxAge: 60 * 60 * 24 * 7, // 1 week
+            maxAge: 60 * 60 * 24 * 7 , // 1 week
            path: '/'
        })
             return data;
@@ -1,33 +1,32 @@
+import { readFiles } from 'h3-formidable'
+import FormData from 'form-data';
+import fs from 'fs';
 export default defineEventHandler(async (event) => {
    const { public: { apiBase } } = useRuntimeConfig();
    const token = getCookie(event, 'token');
-    const body = await readBody(event);
-    console.log(body);
+    // const body = await readBody(event);
+    // console.log('body', body);
+    const { fields, files } = await readFiles(event, {
+        includeFields: true,
+    })
+
+ 
+    let formDat = new FormData();
+    formDat.append('file',  fs.createReadStream(files.file[0].filepath));
+    formDat.append('directoryName',  fields.directoryName[0]);
    try {
            const data = await $fetch(`${apiBase}/uploader`, {
                method: 'POST',
+                 body: formDat,
                headers: {
-              //  'Accept': 'multipart/form-data',
-                'Content-Type': 'multipart/form-data',
+                    'Accept': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
-             body: {
-                file: body.file,
-                directoryName: body.directoryName
-             }
            });
            console.log('uploader data', data);
            return data;
    } catch (error) {
-        console.log(error.data);
-        // if (error.statusCode == 401) {
-        //     setCookie(event, 'token', '', {
-        //         httpOnly: true,
-        //         secure: true,
-        //         maxAge: new Date(0),
-        //         path: '/'
-        //     })
-        // }
+        console.log('error', error);
        return error;
    }