implement upload form functions

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

components/form/file-input/actions.ts

@@ -0,0 +1,38 @@
+'use server';
+
+import { createFile, stageUploadFile, uploadFile } from 'lib/shopify';
+import { UploadInput } from 'lib/shopify/types';
+
+export const createStagedUploadFiles = async (params: UploadInput) => {
+  try {
+    const stagedTargets = await stageUploadFile(params);
+    if (!stagedTargets || stageUploadFile.length === 0) return null;
+
+    return JSON.parse(JSON.stringify(stagedTargets[0]));
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export const onUploadFile = async ({
+  url,
+  formData,
+  fileName,
+  resourceUrl
+}: {
+  url: string;
+  formData: FormData;
+  fileName: string;
+  resourceUrl: string;
+}) => {
+  try {
+    await uploadFile({ url, formData });
+    await createFile({
+      alt: fileName,
+      contentType: 'FILE',
+      originalSource: resourceUrl
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};

components/form/file-input/utils.ts

@@ -0,0 +1,42 @@
+import { StagedUploadsCreatePayload } from 'lib/shopify/types';
+import { createStagedUploadFiles, onUploadFile } from './actions';
+
+export const prepareFilePayload = ({
+  stagedFileUpload,
+  file
+}: {
+  stagedFileUpload: StagedUploadsCreatePayload;
+  file: File;
+}) => {
+  const formData = new FormData();
+
+  const url = stagedFileUpload.url;
+
+  stagedFileUpload.parameters.forEach(({ name, value }) => {
+    formData.append(name, value);
+  });
+
+  formData.append('file', file);
+  return { url, formData };
+};
+
+export const handleUploadFile = async ({ file }: { file: File }) => {
+  if (!file) return;
+  const stagedTarget = await createStagedUploadFiles({
+    filename: file.name,
+    fileSize: String(file.size),
+    httpMethod: 'POST',
+    resource: 'FILE',
+    mimeType: file.type
+  });
+
+  if (stagedTarget) {
+    const data = prepareFilePayload({ file, stagedFileUpload: stagedTarget });
+
+    await onUploadFile({
+      ...data,
+      fileName: file.name,
+      resourceUrl: stagedTarget.resourceUrl
+    });
+  }
+};