mateosantosdev · September 22, 2023 19:39 · Sep 22, 2023 · Sep 22, 2023 · Sep 22, 2023
diff --git a/api.upload-photo.ts b/api.upload-photo.ts
@@ -9,10 +9,10 @@ export async function action({ request }: ActionFunctionArgs) {
         const id = formData.get('id')?.toString();
         if (!id) throw new Error('Id is required');
 
-        const upload = formData.get('photo') as File;
-        if (upload.size === 0) throw new Error('File is required');
+        const avatar = formData.get('photo') as File;
+        if (avatar.size === 0) throw new Error('File is required');
 
-        const uploadedImageName = await uploadAvatar(upload);
+        const uploadedImageName = await uploadAvatar(avatar);
 
         return json({ error: false, ok: true, image: uploadedImageName });
     } catch (error: any) {

diff --git a/api.upload-photo.ts b/api.upload-photo.ts
@@ -1,5 +1,4 @@
 import { json, type ActionFunctionArgs } from '@remix-run/node';
-import { AnimalService } from '~/services/animal';
 import { requireUserId } from '~/utils/session.server';
 import { uploadAvatar } from '~/utils/upload.server';
 import { badRequest } from '~/utils/utils';

diff --git a/UploadAvatar.tsx b/UploadAvatar.tsx
@@ -0,0 +1,14 @@
+<fetcher.Form
+  method="post"
+  encType="multipart/form-data"
+  action="/api/upload-photo"
+>
+    <input type="hidden" name="id" value="the user id" />
+    <input type="file" name="photo" id="photo" accept="image/*" />
+    <button
+        type="submit"
+        disabled={fetcher.state !== 'idle'}
+    >
+        {fetcher.state === 'idle' ? 'Submit' : 'Loading...'}
+    </button>
+</fetcher.Form>
diff --git a/api.upload-photo.ts b/api.upload-photo.ts
@@ -0,0 +1,24 @@
+import { json, type ActionFunctionArgs } from '@remix-run/node';
+import { AnimalService } from '~/services/animal';
+import { requireUserId } from '~/utils/session.server';
+import { uploadAvatar } from '~/utils/upload.server';
+import { badRequest } from '~/utils/utils';
+export async function action({ request }: ActionFunctionArgs) {
+    const userId = await requireUserId(request);
+    const formData = await request.formData();
+    try {
+        const id = formData.get('id')?.toString();
+        if (!id) throw new Error('Id is required');
+
+        const upload = formData.get('photo') as File;
+        if (upload.size === 0) throw new Error('File is required');
+
+        const uploadedImageName = await uploadAvatar(upload);
+
+        return json({ error: false, ok: true, image: uploadedImageName });
+    } catch (error: any) {
+        return badRequest({
+            uploadError: error.message || 'Unknown error'
+        });
+    }
+}
diff --git a/upload.server.ts b/upload.server.ts
@@ -0,0 +1,30 @@
+import { fileTypeFromBuffer } from 'file-type';
+import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
+import { createId } from '@paralleldrive/cuid2';
+
+const s3 = new S3Client({
+    region: 'eu-west-1',
+    credentials: {
+        accessKeyId: process.env.S3_AWS_KEY || '',
+        secretAccessKey: process.env.S3_AWS_SECRET || ''
+    }
+});
+
+export async function uploadAvatar(file: File) {
+    const imageName = `${createId()}.${file.name.split('.').slice(-1)}`;
+
+    const arrayBuffer = await file.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    const mime = await fileTypeFromBuffer(buffer);
+
+    const uploadToS3Command = new PutObjectCommand({
+        Bucket: process.env.S3_BUCKET_NAME || '',
+        Key: imageName,
+        Body: buffer,
+        ACL: 'public-read',
+        ContentType: mime?.mime
+    });
+    await s3.send(uploadToS3Command);
+
+    return imageName;
+}