[Package] formidable 모듈에 대해 알아보자

1️⃣ Node Package 정리를 시작하게 된 이유

현재 대학에서 '웹 개발 실무' 라는 이름의 강의를 듣고 있는데, Node.js를 활용하는 수업이다.

교수님이 과제를 내주셨는데, http 모듈과 formidable 모듈을 활용하여 영화 정보를 post로 전송하고 띄울 수 있도록 하는 내용이었다.

그닥 어려운 과제는 아니었지만 form-data를 다루기 위한 formidable이라는 Node Package를 처음 보는 관계로 공식 문서를 읽으며 어떤 패키지인지, 또 어떻게 활용하면 되는지를 공부하고 정리해보기로 했다.

 

앞으로 Node.js를 공부 / 사용하거나 React.js로 개발을 진행하며 인상깊거나 처음 본 Node Package들이 있다면 이런식으로 나름대로 정리를 진행해볼까 한다. 업데이트가 진행되면 이렇게 작성해둔 포스팅이 의미가 없어지겠지만, 메이저 업데이트가 아닌 이상 큰 틀에서의 변화는 많이 없겠지, 그리고 나한테 남는게 없지는 않겠지 싶어서.

 

2️⃣ formidable

💡 A Node.js module for parsing form data, especially file uploads

 

formidable은 npm formidable 공식 문서에서도 밝히듯 form data을 파싱하는 모듈이며, 특히 파일 업로드 구문 분석을 위한 Node.js 모듈이다.

 

설치

formidable 패키지는 Node.js 10.13 버전 이상의 버전을 요구한다.

yarn 혹은 npm을 통해서 설치할 수 있다.

v2의 경우
npm install formidable@v2
yarn add formidable@v2

v3의 경우
npm install formidable
npm install formidable@v3
yarn add formidable

 

기본 예제

아래 예제는 Node.js의 내장 모듈인 http와 함께 사용할 경우의 예제이다. 공식 문서에는 express와 함께 사용하는 예제도 존재하지만 과제에 필요했던 것은 http 모듈과 함께 사용하는 경우이기 때문에 express와 함께 사용하는 예제가 궁금하신 분은 formidable의 공식 문서를 참고하자.

import http from 'node:http';
import formidable, {errors as formidableErrors} from 'formidable';

const server = http.createServer(async (req, res) => {
  if (req.url === '/api/upload' && req.method.toLowerCase() === 'post') {
    // parse a file upload
    const form = formidable({});
    let fields;
    let files;
    try {
        [fields, files] = await form.parse(req);
    } catch (err) {
        // example to check for a very specific error
        if (err.code === formidableErrors.maxFieldsExceeded) {

        }
        console.error(err);
        res.writeHead(err.httpCode || 400, { 'Content-Type': 'text/plain' });
        res.end(String(err));
        return;
    }
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify({ fields, files }, null, 2));
    return;
  }

  // show a file upload form
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end(`
    <h2>With Node.js <code>"http"</code> module</h2>
    <form action="/api/upload" enctype="multipart/form-data" method="post">
      <div>Text field title: <input type="text" name="title" /></div>
      <div>File: <input type="file" name="multipleFiles" multiple="multiple" /></div>
      <input type="submit" value="Upload" />
    </form>
  `);
});

server.listen(8080, () => {
  console.log('Server listening on http://localhost:8080/ ...');
});

 

API 명세

formidable / IncomingForm

💡 options는 form 인스턴스에 할당하지 않고 함수 / 생성자에 전달한다.

 

options.encoding

• type: string
• default : ‘utf-8’
• form 필드에 대한 인코딩 설정

options.uploadDir

• type: string
• default: os.tmpdir()
• 파일 업로드를 위한 디렉토리 주소, 나중에 fs.rename()을 사용하여 변경할 수 있음.

options.keepExtensions

• type: boolean
• default: false
• 원본 파일의 확장자를 포함할지에 대한 여부

options.allowEmptyFiles

• type: boolean
• default: false
• 빈 파일 업로드를 허용할지에 대한 여부

options.minFileSize

• type: number
• default: 1 (1byte)
• 업로드 할 파일의 최소 사이즈 설정

options.maxFiles

• type: number
• default: Infinity
• 업로드 가능한 파일의 양을 제한, 제한하지 않기 위해 무한대를 설정 가능

options.maxFileSize

• type: number
• default: 200 * 1024 * 1024 (200mb)
• 업로드 할 파일의 각 사이즈를 제한

options.maxTotalFileSize

• type: number
• default: options.maxFileSize
• 업로드 할 파일의 배치 크기 제한

options.maxFields

• type: number
• default: 1000
• 필드의 개수를 제한, 제한하지 않기 위해 무한대 설정

options.maxFieldsSize

• type: number
• default: 20 * 1024 * 1024 (20mb)
• 파일 제외한 모든 필드가 함께 할당할 수 있는 메모리 양을 바이트 단위로 제한

options.hashAlgorithm

• type: string | false
• default: false
• 수신 파일에 대해 계산된 체크섬을 포함하고 이를 일부 해시 알고리즘으로 설정

options.fileWriteStreamHandler

• type: function
• default: null
• 이 옵션을 사용하면 업로드된 파일 데이터가 스트리밍되는 위치와 관련된 사용자 정의 동작을 가질 수 있음
• AWS S3, Azure Blob, Google Cloud나 개인 파일 저장소에 업로드 된 파일을 작성하려는 경우 이 옵션이 적합함

options.filename

• type: function
• default: undefined
• newFilename을 제어, 문자열을 반환하는 함수 사용, options.uploadDir과 결합됨.

options.filter

• type: function
• default: 항상 true를 반환하는 함수
• 파일을 업로드하기 전 파일을 필터링하는 데에 사용, boolean을 반환하는 함수를 사용, form.parse 에러 발생하지 않음.

options.createDirsFromUploads

• type: boolean
• default: false
• true인 경우 다이렉트 폴더 업로드 가능
• 폴더를 업로드할 양식을 만드려면 <input type=”file” name=”folders” webkitdirectory Directory multiple> 사용
• options.uploadDir 및 options.filename 옵션과 함께 사용해야함 → 이때 options.filename은 생성할 폴더에 대해 / 문자가 포함되어있는 문자열을 반환해야하며 기본은 options.uploadDir임

const form = formidable({});

 

위와 같은 형태로 생성할 때 {} 안에 해당 옵션을 지정함으로써 사용할 수 있다.

 

3️⃣ formidable 패키지 정리를 마치며

최근 블로그에 통 포스팅을 안했는데, 다시 힘내서 블로그를 꾸준히 작성하기 위한 새로운 컨텐츠를 준비해보았다.

앞으로도 내가 사용하지 않을 패키지가 아닌 사용하고 사용할 패키지에 대한 정리를 꾸준히 진행해보겠다.

꾸준함은 항상 날 밥먹여줬으니까!!!

 

4️⃣ Reference

https://www.npmjs.com/package/formidable

formidable

https://jungeunpyun.tistory.com/27

formidable로 파일 업로드하기

https://velog.io/@alsry922/formidable-알아보기