chore(curriculum): add file metadata microservice lab (freeCodeCamp#5…

…6361)

Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>

client/i18n/locales/english/intro.json

@@ -2735,7 +2735,10 @@
         "title": "Build an Exercise Tracker",
         "intro": ["In this lab, you will build an exercise tracker"]
       },
-      "tbei": { "title": "376", "intro": [] },
+      "lab-file-metadata-microservice": {
+        "title": "Build a File Metadata Microservice",
+        "intro": ["For this lab you will build a file metadata microservice"]
+      },
       "kegi": { "title": "377", "intro": [] },
       "quiz-backend-javascript": {
         "title": "Backend JavaScript Quiz",

client/src/pages/learn/front-end-development/lab-file-metadata-microservice/index.md

@@ -0,0 +1,9 @@
+---
+title: Introduction to the Build a File Metadata Microservice
+block: lab-file-metadata-microservice
+superBlock: front-end-development
+---
+
+## Introduction to the Build a File Metadata Microservice
+
+For this lab you will build a file metadata microservice

curriculum/challenges/_meta/lab-file-metadata-microservice/meta.json

@@ -0,0 +1,12 @@
+{
+  "name": "Build a File Metadata Microservice",
+  "isUpcomingChange": true,
+  "usesMultifileEditor": true,
+  "hasEditableBoundaries": true,
+  "dashedName": "lab-file-metadata-microservice",
+  "order": 376,
+  "superBlock": "front-end-development",
+  "challengeOrder": [{ "id": "bd7158d8c443edefaeb5bd0f", "title": "Build a File Metadata Microservice" }],
+  "helpCategory": "Backend Development",
+  "blockType": "lab"
+}

curriculum/challenges/english/25-front-end-development/lab-file-metadata-microservice/bd7158d8c443edefaeb5bd0f.md

@@ -0,0 +1,76 @@
+---
+id: bd7158d8c443edefaeb5bd0f
+title: File Metadata Microservice
+challengeType: 4
+dashedName: file-metadata-microservice
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://file-metadata-microservice.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://file-metadata-microservice.freecodecamp.rocks</a>. Working on this lab will involve you writing your code using one of the following methods:
+
+-   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-filemetadata/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
+-   Use <a href="https://gitpod.io/?autostart=true#https://github.com/freeCodeCamp/boilerplate-project-filemetadata/" target="_blank" rel="noopener noreferrer nofollow">our Gitpod starter project</a> to complete your project.
+-   Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+# --instructions--
+
+**HINT:** You can use the `multer` npm package to handle file uploading.
+
+# --hints--
+
+You should provide your own project, not the example URL.
+
+```js
+(getUserInput) => {
+  assert(
+    !/.*\/file-metadata-microservice\.freecodecamp\.rocks/.test(
+      getUserInput('url')
+    )
+  );
+};
+```
+
+You can submit a form that includes a file upload.
+
+```js
+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"]'));
+};
+```
+
+The form file input field has the `name` attribute set to `upfile`.
+
+```js
+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"]'));
+};
+```
+
+When you submit a file, you receive the file `name`, `type`, and `size` in bytes within the JSON response.
+
+```js
+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');
+};
+```
+