Files
2022-01-20 20:30:18 +01:00

3.2 KiB

id, title, challengeType, forumTopicId, dashedName
id title challengeType forumTopicId dashedName
bd7158d8c443edefaeb5bd0f ファイルメタデータ マイクロサービス 4 301506 file-metadata-microservice

--description--

https://file-metadata-microservice.freecodecamp.rocks/ と同様の機能を持つフルスタック JavaScript アプリを構築してください。 プロジェクトに取り組むにあたり、以下の方法のうち 1 つを用いてコードを記述します。

  • GitHub リポジトリをクローンし、ローカル環境でプロジェクトを完了させる。
  • Replit 始動プロジェクトを使用して、プロジェクトを完了させる。
  • 使い慣れたサイトビルダーを使用してプロジェクトを完了させる。 必ず GitHub リポジトリのすべてのファイルを取り込む。

完了したら、プロジェクトの動作デモをどこか公開の場にホストしてください。 そして、Solution Link フィールドでデモへの URL を送信してください。 必要に応じて、プロジェクトのソースコードへのリンクも、GitHub Link フィールドへ提出してください。

--instructions--

** ヒント: ** multer npm パッケージを使用してファイルのアップロードを処理することができます。

--hints--

サンプルの URL ではなく、自分で作成したプロジェクトを提供する必要があります。

(getUserInput) => {
  assert(
    !/.*\/file-metadata-microservice\.freecodecamp\.rocks/.test(
      getUserInput('url')
    )
  );
};

ファイルのアップロードを含むフォームを送信できます。

async (getUserInput) => {
  const site = await fetch(getUserInput('url'));
  const data = await site.text();
  const doc = new DOMParser().parseFromString(data, 'text/html');
  assert(doc.querySelector('input[type="file"]'));
};

フォームのファイル入力フィールドの name 属性を upfile に設定します。

async (getUserInput) => {
  const site = await fetch(getUserInput('url'));
  const data = await site.text();
  const doc = new DOMParser().parseFromString(data, 'text/html');
  assert(doc.querySelector('input[name="upfile"]'));
};

ファイルを送信すると、JSON レスポンスの中で nametype および size (バイト単位) を受け取ります。

async (getUserInput) => {
  const formData = new FormData();
  const fileData = await fetch(
    'https://cdn.freecodecamp.org/weather-icons/01d.png'
  );
  const file = await fileData.blob();
  formData.append('upfile', file, 'icon');
  const data = await fetch(getUserInput('url') + '/api/fileanalyse', {
    method: 'POST',
    body: formData
  });
  const parsed = await data.json();
  assert.property(parsed, 'size');
  assert.equal(parsed.name, 'icon');
  assert.equal(parsed.type, 'image/png');
};

--solutions--

/**
  Backend challenges don't need solutions, 
  because they would need to be tested against a full working project. 
  Please check our contributing guidelines to learn more.
*/