--- id: bd7158d8c443edefaeb5bd0f title: File Metadata Microservice challengeType: 4 forumTopicId: 301506 dashedName: file-metadata-microservice --- # --description-- Build a full stack JavaScript app that is functionally similar to this: . Working on this project will involve you writing your code using one of the following methods: - Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-filemetadata/) and complete your project locally. - Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-filemetadata) 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. When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your projects source code in the `GitHub Link` field. # --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'); }; ``` # --solutions-- ```js /** 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. */ ```