[nextjs]SNS Server-41(myapp51) 

👉🏻 myapp51에서는 글 작성시 이미지 업로드 부분을 구현합니다.
In myapp51, we are implementing the image upload feature for creating posts.

👉🏻 업로드된 이미지 경로는 프로젝트 루트/public/uploads/ 디렉토리 입니다.
The path for uploaded images is the project root/public/uploads/ directory.

👉🏻 업로드된 이미지는 리모트 서버로 전송하지 않고 원본 주소 절대경로 (note)부분만 전송합니다.
Uploaded images are not transmitted to the remote server; only the absolute path to the original source is sent.

👉🏻 전체 코드는 깃허브에서 확인 할 수 있습니다.
You can find the full code on GitHub.

https://github.com/gideonslife01/flm-nextjs

📁 전체 프로젝트 구조 / Overall Project Structure

myapp project/  
├── app/  (Next.js App Router)
│   ├── .well-known/webfinger/route.ts  -> webfinger
│   ├── api/follow/route.ts    -> Follow API(temporary)
│   ├── api/announce/route.ts  -> Boost(Announcement)
│   ├── api/like/route.ts.     -> Like API
│   ├── api/posts/route.ts     -> Writing API
│   ├── api/timeline/route.ts  -> Timeline API
│   ├── api/followinglist/route.ts  -> followinglist API
│   ├── api/followerslist/route.ts  -> followerslist API
│   ├── api/v1/instance/route.ts -> auth
│   ├── api/v1/apps/route.ts.    -> auth
│   ├── api/v1/accounts/verify_credentials/route.ts -> auth
│   ├── api/v1/statuses/route.ts -> Write Post
│   ├── api/v1/timelines/home/route.ts -> timeline
│   ├── api/v1/media/route.ts -> Image upload
│   ├── oauth/authorize/route.ts -> auth
│   ├── oauth/token/route.ts -> auth
│   ├── api/v1/search/home/route.ts -> search
│   ├── api/v2/search/home/route.ts -> search
│   ├── api/v1/accounts/[id]/followers/route.ts -> followers
│   ├── api/v1/accounts/[id]/following/route.ts -> following
│   ├── api/v1/statuses/[id]/route.ts -> -> Post delete(pinafore)
│   ├── api/auth/signup/route.ts        -> Signup
│   ├── api/auth/login/route.ts         -> Login
│   ├── api/auth/logout/route.ts        -> Logout
│   ├── api/auth/refresh/route.ts       -> Refresh Token
│   ├── api/cleanup-orphan/route.ts     -> post,outbox clean up
│   ├── api/auth/me/route.tsx           -> Login Check
│   ├── auth/signup/page.tsx            -> Signup UI
│   ├── auth/signup/page.tsx            -> Login UI
│   ├── users/[username]/
│   │   ├── statuses/[id]/route.ts -> Indivisual Post
│   │   ├── route.ts               -> Acotr Information
│   │   ├── followers/route.ts     -> Followers List
│   │   ├── following/route.ts     -> Following List
│   │   ├── inbox/route.ts         -> Inbox
│   │   └── outbox/route.ts        -> outbox
│   ├── usersui/[username]/
│   │   ├── page.tsx               -> Timeline UI(Server, 404)
│   │   ├── ClientPage.tsx.        -> Timeline UI(Client,Call Active Themes)
│   │   └── _components/themes/
│   │       ├── themeex/ThemeexTheme.tsx   -> Example Theme
│   │       ├── pinafore/PinaforeTheme.tsx -> Theme 1
│   │       ├── pinafore/FollowersList.tsx -> Theme 1, FollowersList
│   │       ├── pinafore/FollowingList.tsx -> Theme 1, FollowingList
│   │       ├── pinafore/NotificationsList.tsx -> Theme 1, NotificationsList
│   │       ├── mastodon/MastodonTheme.tsx -> Theme 2
│   │       └── minimal/MinimaltTheme.tsx  -> Theme 3
│   ├── layout.tsx, page.tsx, globals.css
│   └── favicon.ico
├── lib/
│   ├── theme.tsx              -> Theme Provider
│   ├── watchThemes.ts         -> Check real-time theme changes
│   ├── auth.ts                -> Authentication, User Management
│   ├── ap.ts                  -> Follow,Undo,Create,Likes,Announce
│   ├── visibility.ts          -> Visibility(Public,Unlisted,Private,Direct)
│   └── db.ts                  -> DB connection
├── data/
│   ├── keys/userIDs/          -> private.pem, public.pem(New)
│   └── keys/                  -> private.pem, public.pem(legacy)
├── data.sqlite                -> Database(1/3)
├── data.sqlite-wal            -> Database(2/3)
├── data.sqlite-shm            -> Database(3/3)
├── Caddyfile                  -> https 
├── instrumentation.ts         -> Background Server
└── package.json

📁 프로젝트 시작 / Project Start

[nextjs]프로젝트요약/project summary(myapp30+)

---

📁 테이블 추가 / Add table

✔️ media_attachments : 파일 업로드 / file upload

✔️ post_media : 업로드한 파일을 글에 붙이기 / Insert the uploaded file into the post.

-- 이미지 파일 경로 / Image file path
CREATE TABLE IF NOT EXISTS media_attachments (
  id TEXT PRIMARY KEY,
  username TEXT NOT NULL,
  url TEXT NOT NULL,
  type TEXT NOT NULL,
  created_at INTEGER
);

-- posts에서 글 하나 지우면 post_media에 있는 연결줄도 자동으로 지워짐
-- media_attachments에서 파일 하나 지우면 post_media 연결줄도 자동 지워짐
-- Deleting a post from `posts` automatically removes the corresponding link in `post_media`.
-- Deleting a file from `media_attachments` automatically removes the corresponding link in `post_media`.

CREATE TABLE IF NOT EXISTS post_media (
  post_id TEXT NOT NULL,
  media_id TEXT NOT NULL,
  PRIMARY KEY(post_id, media_id),
  FOREIGN KEY(post_id) REFERENCES posts(id) ON DELETE CASCADE,
  FOREIGN KEY(media_id) REFERENCES media_attachments(id) ON DELETE CASCADE
);

-- 인덱스 추가 / Add index
CREATE INDEX IF NOT EXISTS idx_media_username ON media_attachments(username);
CREATE INDEX IF NOT EXISTS idx_media_created ON media_attachments(created_at);
CREATE INDEX IF NOT EXISTS idx_post_media_media_id ON post_media(media_id);

📁 코드 수정 및 라우트 추가 / Code modifications and route additions

✔️ lib/db.ts

// myapp51 - media
db.exec(`
... ...
  CREATE TABLE IF NOT EXISTS media_attachments (
    id TEXT PRIMARY KEY,
    username TEXT NOT NULL,
    url TEXT NOT NULL,
    type TEXT NOT NULL, -- image/jpeg, image/png
    created_at INTEGER
  );
  CREATE TABLE IF NOT EXISTS post_media (
    post_id TEXT NOT NULL,
    media_id TEXT NOT NULL,
    PRIMARY KEY(post_id, media_id)
  );
`);
db.exec(`
... ...
  -- image upload
  CREATE INDEX IF NOT EXISTS idx_media_username ON media_attachments(username);
  CREATE INDEX IF NOT EXISTS idx_media_created ON media_attachments(created_at);
  CREATE INDEX IF NOT EXISTS idx_post_media_media_id ON post_media(media_id);
`);

✔️ app/api/v1/media/route.ts – 이미지 업로드 API 신규 추가 / Added new image upload API.

// app/api/v1/media/route.ts
//  - ✅ myapp51
import db from '@/lib/db';
import { randomUUID } from 'crypto';
import { NextResponse } from 'next/server';
import fs from 'fs';
import path from 'path';

// public/uploads
const UPLOAD_DIR = path.join(process.cwd(), 'public', 'uploads');

function getUser(req: Request) {
  const auth = req.headers.get('Authorization')?.replace('Bearer ','').trim();
  if (auth) {
    const o = db.prepare('SELECT username FROM oauth_tokens WHERE access_token=?').get(auth) as any;
    if (o?.username) return o.username;
  }
  // 쿠키 / Cookie
  const cookie = req.headers.get('cookie') || '';
  const m = cookie.match(/refresh_token=([^;]+)/);
  if (m) {
    const s = db.prepare('SELECT username FROM sessions WHERE refresh_token=?').get(m[1]) as any;
    if (s?.username) return s.username;
  }
  return null;
}

export async function POST(req: Request) {
  const username = getUser(req);
  if (!username) return NextResponse.json({error:'unauthorized'}, {status:401});

  const form = await req.formData();
  const file = form.get('file') as File;
  if (!file) return NextResponse.json({error:'file required'}, {status:400});
  if (file.size > 8 * 1024 * 1024) return NextResponse.json({error:'8MB 이하만'}, {status:400});

  if (!fs.existsSync(UPLOAD_DIR)) fs.mkdirSync(UPLOAD_DIR, {recursive:true});

  const id = randomUUID();
  const ext = file.name.split('.').pop() || 'jpg';
  const filename = `${id}.${ext}`;
  const buffer = Buffer.from(await file.arrayBuffer());
  fs.writeFileSync(path.join(UPLOAD_DIR, filename), buffer);

  const url = `/uploads/${filename}`;
  const fullUrl = `https://${process.env.DOMAIN || 'aloy-horizon.duckdns.org'}${url}`;

  db.prepare('INSERT INTO media_attachments (id, username, url, type, created_at) VALUES (?,?,?,?,?)')
   .run(id, username, fullUrl, file.type, Date.now());

  // Mastodon 호환 응답 / Mastodon-compatible response
  return NextResponse.json({ id, url: fullUrl, preview_url: fullUrl, type: 'image' });
}

✔️ app/api/v1/statuses/route.ts – 글쓰기 API 수정 / Modify Writing API

... ...
export async function POST(req: Request) {
... ...
    // ✅ myapp51 
    // -  image upload 
    // - 3가지 케이스 모두 지원(마스토돈,로컬,안드로이드앱) + 크래시 방지
    // - Supports all three scenarios (Mastodon, local, Android app) + crash prevention.
    const raw_ids = body.media_ids || body.media?.ids || body.mediaIds || [];
    const media_ids: string[] = Array.isArray(raw_ids) ? raw_ids : [];
... ...
    // ✅ myapp51 - image upload , 소유권 체크 후 연결 / Connect after verifying ownership
    // ['a','b'] → ... → 'a', 'b'
    let attachments: any[] = [];
    if (media_ids.length > 0) {
      const placeholders = media_ids.map(() => '?').join(',');
      attachments = db.prepare(
        `SELECT * FROM media_attachments WHERE id IN (${placeholders}) AND username=?`
      ).all(...media_ids, username) as any[];

      for (const m of attachments) {
        try {
          db.prepare('INSERT INTO post_media (post_id, media_id) VALUES (?,?)').run(id, m.id);
        } catch (e) {
          console.error('post_media insert fail', e);
        }
      }
    }
    // -  url 절대경로 보정 / Adjusting absolute URL paths
    const toAbsoluteUrl = (u: string) => u.startsWith('http') ? u : `https://${DOMAIN}${u}`;
... ...
    // ✅ myapp48 + myapp51
    const note = {
      id: `https://${DOMAIN}/users/${username}/statuses/${id}`,
      type: 'Note',
      content: `<p>${content}</p>`,
      attributedTo: `https://${DOMAIN}/users/${username}`,
      published: new Date(now).toISOString(),
      to,
      cc,
      attachment: attachments.map(m => ({ // ✅ myapp51 - image uload
        type: 'Document',
        mediaType: m.type,
        url: toAbsoluteUrl(m.url)
      }))
    };
... ...
    return NextResponse.json({
      id: id,
... ...
      favourites_count: 0,
      replies_count: 0,
      // ✅ myapp51 - Pinafore/Tusky 미리보기 / 
      media_attachments: attachments.map(m => ({
        id: m.id,
        type: 'image',
        url: toAbsoluteUrl(m.url),
        preview_url: toAbsoluteUrl(m.url)
      }))
    }, {
      headers: { 'Access-Control-Allow-Origin': '*' }
    });


}

✔️ app/usersui/[username]/_components/themes/pinafore/PinaforeTheme.tsx

— UI Theme수정 / Modify UI Theme

// ✅ myapp51 - 토큰가져오가 , url 경로보정 / Retrieve token, adjust URL path
const getToken = () => localStorage.getItem('access_token') || localStorage.getItem('token') || '';
const toAbsolute = (u: string) => {
  if (!u) return '';
  return u.startsWith('http')? u : `https://${DOMAIN}${u}`;
};

export function PinaforeTheme({ timeline : initialTimeline, username, initialView, onBoost, onLike, onShare }: any) {
... ...
  // ✅ myapp51 - image upload
  const [mediaIds, setMediaIds] = useState<string[]>([]);
  const [previews, setPreviews] = useState<string[]>([]);
  const [uploading, setUploading] = useState(false);

... ...

// ✅ myapp48 + myapp51 : write post + image
const handlePost = async () => {
... ...
      body: JSON.stringify({ 
        status: composeText, 
        visibility: composeVis, 
        media_ids: mediaIds // ✅ myapp51 - add media_ids
      })
... ...
    if (res.ok) {
      const newPost = await res.json();
... ...
        media_attachments: newPost.media_attachments || [] // ✅ myap51 - preview

    }
... ...
};
}

// ✅ myapp51 : image upload
 async function onFiles(e: React.ChangeEvent<HTMLInputElement>) {
    const files = Array.from(e.target.files || []);
    if (files.length === 0) return;
    if (mediaIds.length + files.length > 4) return alert('이미지는 최대 4개까지 / Up to 4 images.');

    setUploading(true);
    const token = getToken();
    try {
      for(const file of files) {
        const fd = new FormData();
        fd.append('file', file);
        const res = await fetch('/api/v1/media', {
          method: 'POST',
          body: fd,
          headers: {...(token? { Authorization: `Bearer ${token}` } : {}) },
          credentials: 'include'
        });
        if (!res.ok) {
          const err = await res.json().catch(()=>({}));
          throw new Error(err.error || 'upload fail');
        }
        const data = await res.json();
        // data = { id, url, preview_url... }
        setMediaIds(prev => [...prev, data.id]);
        setPreviews(prev => [...prev, toAbsolute(data.preview_url || data.url)]);
      }
    } catch (err: any) {
      console.error(err);
      alert(`업로드 실패/upload failed: ${err.message}`);
    } finally {
      setUploading(false);
      // 같은 파일 다시 선택 가능하도록 reset
      e.target.value = '';
    }
  }

  return (
    <>
      <style>{`
... ...

       /* ✅ myapp51 - composer-choice + preview */
       .composer-choice { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
       .composer-choice label { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid #e6ecf0; border-radius: 50%; background: white; cursor: pointer; transition: background 0.15s; }
       .composer-choice label:hover { background: #f3f4ff; border-color: #6364ff; }
       .composer-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
       .preview-item { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid #e6ecf0; background: #f9fafb; }
       .preview-item img { width: 100%; height: 90px; object-fit: cover; display: block; }
       .preview-remove { position: absolute; top: 4px;
... ... 
 `}</style>

          {isMe && (
            <div className="pinafore-composer">
              <textarea
                value={composeText}
                onChange={(e) => setComposeText(e.target.value)}
                placeholder="무슨 일이 일어나고 있나요?"
                maxLength={500}
              />

              {/* ✅ myapp51 - 이미지 선택 버튼 / Image selection button*/}
              <div className="composer-choice">
                  <label style={{cursor:'pointer', fontSize:18, padding:'2px 6px', border:'1px solid #e6ecf0', borderRadius:6, background:'white'}}>
                    🖼️
                    <input type="file" multiple accept="image/*" onChange={onFiles} style={{display:'none'}} />
                  </label>
              </div>

              {/* ✅ myapp51 - image preview  */}
              {previews.length > 0 && (
                <div className="composer-previews">
                  {previews.map((src, idx) => (
                    <div key={idx} className="preview-item">
                      <img src={src} alt="preview" />
                      <button className="preview-remove" onClick={() => removePreview(idx)}>×</button>
                    </div>
                  ))}
                </div>
              )}
              {uploading && <div style={{fontSize:12, color:'#6364ff', marginTop:6}}>📤 업로드 중 / uploading...</div>}


              <div className="composer-foot">
... ...
              </div>{/* /div className=compose-foot */}
            </div>
          )}
... ...

{timeline.map((p: any) => (
... ...
      <div className="status-text" dangerouslySetInnerHTML={{ __html: p.content }} />

       {/* ✅ myapp51 - 타임라인 이미지 렌더 / Timeline image render*/}
       {p.media_attachments && p.media_attachments.length > 0 && (
        <div className={`status-media ${p.media_attachments.length === 1? 'single' : ''}`}>
           {p.media_attachments.map((m: any) => (
            <img key={m.id} src={toAbsolute(m.preview_url || m.url)} alt="media" loading="lazy" />
             ))}
         </div>
        )}
... ...
))}
);

✔️ app/api/v1/statuses/[id]/route.ts DELETE

— 글 삭제 및 이미지 삭제( 다음 프로젝트)
Delete Post and Delete Image (Next Project)

📁 테스트 / Test

✔️ 이미지 선택 / Select image

✔️ 이미지 업로드 – 로컬서버 / image upload – local server

✔️ 이미지 업로드 – 리모트서버(고투소셜) / image upload – remote server(gotosocial)

요한복음 8장 32절 / John 8:32

“그리고 너희는 진리를 알게 될 것이며, 진리가 너희를 자유롭게 할 것이다.”

“Then you will know the truth ,and the truth will set you free”