From 03fa03c66ec7301fbc5d10e0009d2daa0e59ca4e Mon Sep 17 00:00:00 2001
From: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
Date: Mon, 30 Sep 2024 21:42:36 +0200
Subject: [PATCH] chore(curriculum): add file metadata microservice lab
(#56361)
Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
---
client/i18n/locales/english/intro.json | 5 +-
.../lab-file-metadata-microservice/index.md | 9 +++
.../lab-file-metadata-microservice/meta.json | 12 +++
.../bd7158d8c443edefaeb5bd0f.md | 76 +++++++++++++++++++
4 files changed, 101 insertions(+), 1 deletion(-)
create mode 100644 client/src/pages/learn/front-end-development/lab-file-metadata-microservice/index.md
create mode 100644 curriculum/challenges/_meta/lab-file-metadata-microservice/meta.json
create mode 100644 curriculum/challenges/english/25-front-end-development/lab-file-metadata-microservice/bd7158d8c443edefaeb5bd0f.md
diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 061c50da03d..55028a8cfcc 100644
--- a/client/i18n/locales/english/intro.json
+++ b/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",
diff --git a/client/src/pages/learn/front-end-development/lab-file-metadata-microservice/index.md b/client/src/pages/learn/front-end-development/lab-file-metadata-microservice/index.md
new file mode 100644
index 00000000000..fa561d4c0da
--- /dev/null
+++ b/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
diff --git a/curriculum/challenges/_meta/lab-file-metadata-microservice/meta.json b/curriculum/challenges/_meta/lab-file-metadata-microservice/meta.json
new file mode 100644
index 00000000000..52bdeb60c8c
--- /dev/null
+++ b/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"
+}
diff --git a/curriculum/challenges/english/25-front-end-development/lab-file-metadata-microservice/bd7158d8c443edefaeb5bd0f.md b/curriculum/challenges/english/25-front-end-development/lab-file-metadata-microservice/bd7158d8c443edefaeb5bd0f.md
new file mode 100644
index 00000000000..d7061de278e
--- /dev/null
+++ b/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: https://file-metadata-microservice.freecodecamp.rocks. Working on this lab will involve you writing your code using one of the following methods:
+
+- Clone this GitHub repo and complete your project locally.
+- Use our Gitpod starter project 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');
+};
+```
+