Merge pull request #73 from near/feat/file-input

File Input (2 of 2)

apps/ticketing/package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@keypom/core": "^1.0.0",
-    "@near-pagoda/ui": "^0.2.1",
+    "@near-pagoda/ui": "^0.2.7",
     "@near-wallet-selector/core": "^8.9.7",
     "@near-wallet-selector/here-wallet": "8.9.7",
     "@near-wallet-selector/meteor-wallet": "^8.9.7",

apps/ticketing/src/pages/events/new.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   Card,
   Container,
+  FileInput,
   Flex,
   Form,
   handleClientError,
@@ -32,9 +33,8 @@ import { FinalExecutionOutcome } from 'near-api-js/lib/providers';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import { SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
+import { Controller, SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
 
-import { FilePreviews } from '@/components/FilePreviews';
 import { useProducerLayout } from '@/hooks/useLayout';
 import { useStripe } from '@/hooks/useStripe';
 import { useNearStore } from '@/stores/near';
@@ -45,6 +45,8 @@ import { estimateCosts, FormSchema, TicketInfoFormMetadata, yoctoToNear } from '
 import { createStripeEvent } from '@/utils/stripe';
 import { NextPageWithLayout } from '@/utils/types';
 
+const MAX_ARTWORK_FILE_SIZE_BYTES = 2_000_000; // 2 MB is an arbitrary maximum to encourage event creators keep their images from being too large
+
 const CreateEvent: NextPageWithLayout = () => {
   const wallet = useWalletStore((store) => store.wallet);
   const account = useWalletStore((store) => store.account);
@@ -329,15 +331,19 @@ const CreateEvent: NextPageWithLayout = () => {
                     />
                   </Flex>
 
-                  <Card>
-                    <Flex stack as="label">
-                      <Text size="text-xs" weight={600} color="sand12">
-                        Event Artwork
-                      </Text>
-                      <FilePreviews fileList={form.watch('eventArtwork')} />
-                      <input type="file" {...form.register('eventArtwork')} />
-                    </Flex>
-                  </Card>
+                  <Controller
+                    control={form.control}
+                    name="eventArtwork"
+                    render={({ field, fieldState }) => (
+                      <FileInput
+                        label="Event Artwork"
+                        accept="image/*"
+                        maxFileSizeBytes={MAX_ARTWORK_FILE_SIZE_BYTES}
+                        error={fieldState.error?.message}
+                        {...field}
+                      />
+                    )}
+                  />
                 </Card>
 
                 {fields.map((field, index) => (
@@ -420,15 +426,19 @@ const CreateEvent: NextPageWithLayout = () => {
                       />
                     </Flex>
 
-                    <Card>
-                      <Flex stack as="label">
-                        <Text size="text-xs" weight={600} color="sand12">
-                          Ticket Artwork
-                        </Text>
-                        <FilePreviews fileList={form.watch(`tickets.${index}.artwork` as const)} />
-                        <input type="file" {...form.register(`tickets.${index}.artwork`)} />
-                      </Flex>
-                    </Card>
+                    <Controller
+                      control={form.control}
+                      name={`tickets.${index}.artwork` as const}
+                      render={({ field, fieldState }) => (
+                        <FileInput
+                          label="Ticket Artwork"
+                          accept="image/*"
+                          maxFileSizeBytes={MAX_ARTWORK_FILE_SIZE_BYTES}
+                          error={fieldState.error?.message}
+                          {...field}
+                        />
+                      )}
+                    />
 
                     <Tooltip asChild content="Remove Ticket Option">
                       <Button

apps/ticketing/src/utils/file.ts

@@ -5,19 +5,3 @@ export function convertToSafeFilename(string: string) {
     .replace(/[/.:]/g, '-')
     .replace(/[^a-zA-Z0-9\s_-]/g, '');
 }
-
-export function convertFileListToPreviewUrls(fileList?: FileList | File[]) {
-  if (!fileList) return [];
-  if (!(fileList instanceof FileList)) {
-    new TypeError('The provided value is not a FileList.');
-    return [];
-  }
-
-  const urls: string[] = [];
-
-  for (const file of fileList) {
-    urls.push(URL.createObjectURL(file));
-  }
-
-  return urls;
-}

apps/ticketing/src/utils/helpers.ts

@@ -20,7 +20,7 @@ export interface TicketInfoFormMetadata {
   priceNear?: string;
   priceFiat?: string;
   description?: string | undefined;
-  artwork?: FileList;
+  artwork?: File[];
   salesValidThrough: DateAndTimeInfo;
   passValidThrough?: DateAndTimeInfo;
 }
@@ -93,7 +93,7 @@ export type FormSchema = {
   description?: string;
   location: string;
   date: string;
-  eventArtwork?: FileList;
+  eventArtwork?: File[];
   sellable: boolean;
 
   tickets: TicketInfoFormMetadata[];