{"id":31335,"date":"2023-10-02T07:00:00","date_gmt":"2023-10-02T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=31335"},"modified":"2025-11-26T22:00:17","modified_gmt":"2025-11-27T06:00:17","slug":"building-filestorage-application-xata-cloudinary-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js","title":{"rendered":"Building a FileStorage Application Using Xata, Cloudinary, and Next.js"},"content":{"rendered":"\n<p>Storing files is necessary due to the ease with which pictures, videos, and other files can be generated. The smartphone era played a significant role in this; people want to save their memories so that they can always refer back to them in the future.<\/p>\n\n\n\n<p>This blog post explains how to build a file storage application in Next.js, using Xata to provide the database service and Cloudinary to store the files.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/hackmamba\/building-a-filestorage-application-using-xata-cloudinary-and-nextjs-4214#prerequisite\"><\/a>Prerequisites<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You should have a basic understanding of Javascript.<\/li>\n\n\n\n<li>You should have a basic knowledge of React.js and Next.js.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/hackmamba\/building-a-filestorage-application-using-xata-cloudinary-and-nextjs-4214#tech-stack\"><\/a>Tech Stack<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/nextjs.org\/\">Next.js<\/a>&nbsp;is a React framework that builds on the functionality of React.js. It simplifies the creation of pages and API endpoints.<\/li>\n\n\n\n<li><a href=\"https:\/\/cloudinary.com\/home-102622?utm_source=hackmamba&amp;utm_campaign=hackmamba-hackathon&amp;utm_medium=hackmamba-blog\">Cloudinary<\/a>&nbsp;is a cloud media platform that allows users to upload files easily.<\/li>\n\n\n\n<li><a href=\"https:\/\/xata.io\/?utm_source=hackmamba&amp;utm_campaign=hackmamba-hackathon&amp;utm_medium=hackmamba-blog\">Xata<\/a>&nbsp;is a serverless data platform that allows users to store, search for, and get insights into data.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/hackmamba\/building-a-filestorage-application-using-xata-cloudinary-and-nextjs-4214#project-setup-and-installation\"><\/a>Project Setup and Installation<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Next.js <\/strong>Page Setup<\/h3>\n\n\n\n<p>To begin, we&#8217;ll create a new Next.js app, launch our terminal, create a new empty directory, and execute the following command:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\">    <span class=\"hljs-selector-tag\">npx<\/span> <span class=\"hljs-selector-tag\">create-next-app<\/span><span class=\"hljs-keyword\">@latest<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Make sure you&#8217;re in the correct directory and install the dependencies using a package manager like&nbsp;<code>npm<\/code>,&nbsp;<code>yarn<\/code>, or&nbsp;<code>pnpm<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-wrap-lines\">    npm i bcryptjs react-notifications <\/code><\/span><\/pre>\n\n\n<h3 class=\"wp-block-heading\"><strong>Create Skeleton Pages for the Application<\/strong><\/h3>\n\n\n\n<p>We&#8217;ll create the necessary pages needed for the application with the code below.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Index.js<\/li>\n\n\n\n<li>all.js<\/li>\n\n\n\n<li>files.js<\/li>\n\n\n\n<li>photos.js<\/li>\n\n\n\n<li>videos.js<\/li>\n\n\n\n<li>login.js<\/li>\n\n\n\n<li>signup.js<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">styles\/global.css<\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">html<\/span> {\n  <span class=\"hljs-attribute\">background-color<\/span>: black;\n}\n\n<span class=\"hljs-selector-tag\">body<\/span> {\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0px<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0px<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">a<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: white;\n}\n\n<span class=\"hljs-selector-class\">.input<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">90%<\/span>;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">64px<\/span>;\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid white;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>;\n  <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"Nunito Sans\"<\/span>;\n  <span class=\"hljs-attribute\">font-style<\/span>: normal;\n  <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">400<\/span>;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">16px<\/span>;\n  <span class=\"hljs-attribute\">padding-left<\/span>: <span class=\"hljs-number\">25px<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#828282<\/span>;\n  <span class=\"hljs-attribute\">background-color<\/span>: transparent;\n  <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">30px<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: white;\n}\n\n<span class=\"hljs-selector-class\">.form<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">50%<\/span>;\n  <span class=\"hljs-attribute\">margin-left<\/span>: auto;\n  <span class=\"hljs-attribute\">margin-right<\/span>: auto;\n  <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">200px<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.but<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">254px<\/span>;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">64px<\/span>;\n  <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">50px<\/span>;\n  <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"Nunito Sans\"<\/span>;\n  <span class=\"hljs-attribute\">font-style<\/span>: normal;\n  <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">400<\/span>;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">24px<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#001b1c<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: white;\n  <span class=\"hljs-attribute\">border<\/span>: none;\n}\n\n<span class=\"hljs-selector-class\">.white<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: white;\n  <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">50px<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Global css for all the pages.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">styles\/Home.module.css<\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.homeflex<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n}\n\n<span class=\"hljs-selector-class\">.home<\/span> {\n  <span class=\"hljs-attribute\">margin-left<\/span>: <span class=\"hljs-number\">50px<\/span>;\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">80%<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.homehead<\/span> {\n  <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"Nunito Sans\"<\/span>;\n  <span class=\"hljs-attribute\">font-style<\/span>: normal;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">30px<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: white;\n}\n\n<span class=\"hljs-selector-class\">.homehead2<\/span> {\n  <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"Nunito Sans\"<\/span>;\n  <span class=\"hljs-attribute\">font-style<\/span>: normal;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">20px<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: white;\n}\n\n<span class=\"hljs-selector-class\">.upload<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">360px<\/span>;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">96px<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: block;\n  <span class=\"hljs-attribute\">margin-left<\/span>: auto;\n  <span class=\"hljs-attribute\">margin-right<\/span>: auto;\n  <span class=\"hljs-attribute\">border<\/span>: none;\n  <span class=\"hljs-comment\">\/* Hotel\/Hotel Button *\/<\/span>\n  <span class=\"hljs-attribute\">background<\/span>: white;\n  <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">100px<\/span>;\n  <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"Nunito Sans\"<\/span>;\n  <span class=\"hljs-attribute\">font-style<\/span>: normal;\n  <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">400<\/span>;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">32px<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#001b1c<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.box1<\/span> {\n  <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">100px<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.file<\/span> {\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#fff<\/span>;\n  <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">30px<\/span>;\n  <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"Nunito Sans\"<\/span>;\n  <span class=\"hljs-attribute\">font-style<\/span>: normal;\n  <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">400<\/span>;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">18px<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: black;\n}\n\n<span class=\"hljs-selector-class\">.cloud<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n}\n\n<span class=\"hljs-selector-class\">.home_text<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: black;\n}\n\n<span class=\"hljs-selector-class\">.head<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: white;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">30px<\/span>;\n  <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"Nunito Sans\"<\/span>;\n  <span class=\"hljs-attribute\">font-style<\/span>: normal;\n}\n\n<span class=\"hljs-selector-class\">.head2<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: white;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">30px<\/span>;\n  <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"Nunito Sans\"<\/span>;\n  <span class=\"hljs-attribute\">font-style<\/span>: normal;\n  <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">30px<\/span>;\n  <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">30px<\/span>;\n  <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">100px<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">components\/Sidebar.module.css<\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.sidebar<\/span> {\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">48px<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#00008c<\/span>;\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">200px<\/span>;\n  <span class=\"hljs-attribute\">height<\/span>: auto;\n  <span class=\"hljs-attribute\">min-height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n  <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"Nunito Sans\"<\/span>;\n  <span class=\"hljs-attribute\">font-style<\/span>: normal;\n  <span class=\"hljs-attribute\">padding-top<\/span>: <span class=\"hljs-number\">100px<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.item<\/span> {\n  <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"Nunito Sans\"<\/span>;\n  <span class=\"hljs-attribute\">font-style<\/span>: normal;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">24px<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">30px<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: white;\n  <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n}\n\n<span class=\"hljs-selector-class\">.rm<\/span> {\n  <span class=\"hljs-attribute\">text-decoration<\/span>: none;\n}\n\n<span class=\"hljs-selector-class\">.log<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: red;\n  <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"Nunito Sans\"<\/span>;\n  <span class=\"hljs-attribute\">font-style<\/span>: normal;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">24px<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">30px<\/span>;\n  <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>CSS for the sidebar components<\/strong><\/p>\n\n\n\n<p><code>pages\/_document.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { Html, Head, Main, NextScript } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/document\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Document<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Html<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"preconnect\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/fonts.googleapis.com\"<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"preconnect\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/fonts.gstatic.com\"<\/span> <span class=\"hljs-attr\">crossorigin<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span>\n          <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/fonts.googleapis.com\/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;family=Raleway:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap\"<\/span>\n          <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span>\n        \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Main<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">NextScript<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Html<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>We used the&nbsp;<strong>_document.js<\/strong>&nbsp;file to add font to our application.<\/p>\n\n\n\n<p>c<code>omponents\/Sidebar.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/Sidebar.module.css\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Link <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/link\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Sidebar<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.sidebar}<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.rm}<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.item}<\/span>&gt;<\/span>Home<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/all\"<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.rm}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.item}<\/span>&gt;<\/span>All<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/files\"<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.rm}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.item}<\/span>&gt;<\/span>Documents<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/videos\"<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.rm}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.item}<\/span>&gt;<\/span>Videos<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/photos\"<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.rm}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.item}<\/span>&gt;<\/span>Photos<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.log}<\/span>&gt;<\/span>\n        Logout\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The Sidebar component is used for switching between pages, and it is used on all the pages.<\/p>\n\n\n\n<p><code>pages\/index.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/head\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Sidebar <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Sidebar\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>CloudDrop - Home<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"description\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"Clouddrop\"<\/span> \/&gt;<\/span>\n        {\/*  eslint-disable-next-line @next\/next\/no-sync-scripts *\/}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>\n          <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/upload-widget.cloudinary.com\/global\/all.js\"<\/span>\n          <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>\n        &gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homeflex}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sidebar<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.cloud}<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homehead}<\/span>&gt;<\/span>CloudDrop <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homehead2}<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.upload}<\/span>&gt;<\/span>\n            Upload File\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The index page allows users to upload their files and view recently uploaded files.<\/p>\n\n\n\n<p><code>pages\/all.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { useEffect, useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/head\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Sidebar <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Sidebar\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">All<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>CloudDrop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"description\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"Clouddrop\"<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homeflex}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sidebar<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homehead}<\/span>&gt;<\/span>CloudDrop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.head2}<\/span>&gt;<\/span>All<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The&nbsp;<strong>all.js<\/strong>&nbsp;page is where users can view all their files.<\/p>\n\n\n\n<p><code>pages\/files.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { useEffect, useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/head\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Sidebar <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Sidebar\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Files<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>CloudDrop - Files<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"description\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"Clouddrop\"<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homeflex}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sidebar<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homehead}<\/span>&gt;<\/span>CloudDrop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.head2}<\/span>&gt;<\/span>Documents<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The&nbsp;<strong>files.js<\/strong>&nbsp;page is where users can view their documents such as pdf, word document, excel documents and others.<\/p>\n\n\n\n<p><code>pages\/photos.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { useEffect, useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/head\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Image <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/image\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Sidebar <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Sidebar\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Photos<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>CloudDrop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"description\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"Clouddrop\"<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homeflex}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sidebar<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homehead}<\/span>&gt;<\/span>CloudDrop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.head2}<\/span>&gt;<\/span>Images<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The photos page is where users can view all their pictures.<\/p>\n\n\n\n<p><code>pages\/videos.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { useEffect, useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/head\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Image <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/image\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Sidebar <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Sidebar\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Video<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>CloudDrop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"description\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"Clouddrop\"<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homeflex}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sidebar<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homehead}<\/span>&gt;<\/span>CloudDrop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.head2}<\/span>&gt;<\/span>Videos<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The videos page is where users can view all their videos.<\/p>\n\n\n\n<p><code>pages\/login.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { useState, useRef } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Link <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/link\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Login<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"form\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"white\"<\/span>&gt;<\/span>Login<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"input\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter Email\"<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n            <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"input\"<\/span>\n            <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter Password\"<\/span>\n            <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"password\"<\/span>\n          \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          {\/*  eslint-disable-next-line @next\/next\/no-html-link-for-pages *\/}\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/signup\"<\/span>&gt;<\/span>Signup<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"but\"<\/span>&gt;<\/span>Login<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The login page is the access page to the application, and only authenticated users can access the application.<\/p>\n\n\n\n<p><code>pages\/signup.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { useState, useRef } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Link <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/link\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Signup<\/span>(<span class=\"hljs-params\">{ data }<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"form\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"white\"<\/span>&gt;<\/span>Signup<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"input\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter Email\"<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n            <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"input\"<\/span>\n            <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"password\"<\/span>\n            <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter Password\"<\/span>\n          \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          {\/*   eslint-disable-next-line @next\/next\/no-html-link-for-pages *\/}\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/login\"<\/span>&gt;<\/span>Login<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"but\"<\/span>&gt;<\/span>Signup<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The signup page is where the users register to access the application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Creating Database and Tables on Xata<\/strong><\/h2>\n\n\n\n<p>We need to log in to xata.io to be able to create a database and add tables to the database. Sign in with GitHub or Google Mail or personal email.<\/p>\n\n\n\n<p>Add a workspace. We can do this by entering the workspace name.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--q3pjaonQ--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/paper-attachments.dropboxusercontent.com\/s_53D394CA9EC8054C4D57206D6F81F4051344F365ABEA51B6BCB0963F87164624_1667240007483_xata3.png-mh.png\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764223025\/blog-Building_a_FileStorage_Application_Using_Xata_Cloudinary_and_Next.js-1.png\" alt=\"Paper10\"\/><\/a><\/figure>\n\n\n\n<p>Add a <strong>Database<\/strong>. We can do this by entering the database name and selecting the preferred zone.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--3wC7ErMy--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/paper-attachments.dropboxusercontent.com\/s_53D394CA9EC8054C4D57206D6F81F4051344F365ABEA51B6BCB0963F87164624_1667240182909_xata3.png-mh%2B1.png\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764223028\/blog-Building_a_FileStorage_Application_Using_Xata_Cloudinary_and_Next.js-2.png\" alt=\"Paper1\"\/><\/a><\/figure>\n\n\n\n<p>Next, let&#8217;s add a table. We can do this by selecting the database and clicking&nbsp;<strong>Add a table<\/strong>. Select an empty table and enter a table name. We can add a users table first.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--GJ-jR7VC--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/paper-attachments.dropboxusercontent.com\/s_53D394CA9EC8054C4D57206D6F81F4051344F365ABEA51B6BCB0963F87164624_1667240958369_xata4.png-mh.png\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764223031\/blog-Building_a_FileStorage_Application_Using_Xata_Cloudinary_and_Next.js-3.png\" alt=\"Paper2\"\/><\/a><\/figure>\n\n\n\n<p>Let&#8217;s also add fields to the table. The users table needs an&nbsp;<strong>id, email,<\/strong>&nbsp;<strong>and<\/strong>&nbsp;<strong>password field<\/strong>, while the files table needs an&nbsp;<strong>id, name, type, date, url, and userid field<\/strong>. The&nbsp;<strong>id<\/strong>&nbsp;field is created by default and autogenerated. Click the highlighted&nbsp;<strong>icon<\/strong>&nbsp;and select the appropriate data type.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--m90StFty--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/paper-attachments.dropboxusercontent.com\/s_53D394CA9EC8054C4D57206D6F81F4051344F365ABEA51B6BCB0963F87164624_1667242643519_xata5.png-mh.png\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764223033\/blog-Building_a_FileStorage_Application_Using_Xata_Cloudinary_and_Next.js-4.png\" alt=\"Paper3\"\/><\/a><\/figure>\n\n\n\n<p>The datatypes for the Users fields are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Email &#8211; String<\/li>\n\n\n\n<li>Password &#8211; String<\/li>\n<\/ul>\n\n\n\n<p>The datatypes for the Files fields are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Name &#8211; String<\/li>\n\n\n\n<li>Type &#8211; String<\/li>\n\n\n\n<li>Date &#8211; date<\/li>\n\n\n\n<li>Url &#8211; String<\/li>\n\n\n\n<li>Userid &#8211; String<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--hzoDBhIB--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/paper-attachments.dropboxusercontent.com\/s_53D394CA9EC8054C4D57206D6F81F4051344F365ABEA51B6BCB0963F87164624_1667244491462_xata6.png\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764223036\/blog-Building_a_FileStorage_Application_Using_Xata_Cloudinary_and_Next.js-5.png\" alt=\"Paper4\"\/><\/a><figcaption class=\"wp-element-caption\">Users table<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--hWH0d_UE--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/paper-attachments.dropboxusercontent.com\/s_53D394CA9EC8054C4D57206D6F81F4051344F365ABEA51B6BCB0963F87164624_1667244785228_xata7.png\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764223040\/blog-Building_a_FileStorage_Application_Using_Xata_Cloudinary_and_Next.js-6.png\" alt=\"Paper5\"\/><\/a><figcaption class=\"wp-element-caption\">Files table<\/figcaption><\/figure>\n\n\n\n<p>Copy the workspace base API URL.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--Sfuq0983--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/paper-attachments.dropboxusercontent.com\/s_53D394CA9EC8054C4D57206D6F81F4051344F365ABEA51B6BCB0963F87164624_1667245232381_xata8.png\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764223042\/blog-Building_a_FileStorage_Application_Using_Xata_Cloudinary_and_Next.js-7.png\" alt=\"Paper6\"\/><\/a><\/figure>\n\n\n\n<p>To generate the API key, go to your account settings, enter the name of the API key, and click o save.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--IJn_GWbs--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/paper-attachments.dropboxusercontent.com\/s_53D394CA9EC8054C4D57206D6F81F4051344F365ABEA51B6BCB0963F87164624_1667245675884_xata9.png-mh.png\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764223045\/blog-Building_a_FileStorage_Application_Using_Xata_Cloudinary_and_Next.js-8.png\" alt=\"Paper7\"\/><\/a><\/figure>\n\n\n\n<p>Sign up for <a href=\"https:\/\/cloudinary.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary<\/a> and log in to your account.<\/p>\n\n\n\n<p>Get the&nbsp;<strong>cloudname<\/strong>&nbsp;on the dashboard and the&nbsp;<strong>presetname<\/strong>&nbsp;on the settings page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/hackmamba\/building-a-filestorage-application-using-xata-cloudinary-and-nextjs-4214#connecting-cloudinary-to-the-application\"><\/a>Connecting Cloudinary to the Application<\/h2>\n\n\n\n<p>We added the Cloudinary script to our index.js page during the page setup. Now, let&#8217;s add the necessary code to upload files to Cloudinary and get the URL link to our file.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/head\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Sidebar <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Sidebar\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/The showWidget pops up a cloudinary widget that we can use to upload any file and it returns an object that contains<\/span>\n  <span class=\"hljs-comment\">\/\/ the name, link to the url of the uploaded file and other information<\/span>\n  <span class=\"hljs-keyword\">const<\/span> showWidget = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> myWidget = <span class=\"hljs-built_in\">window<\/span>.cloudinary.createUploadWidget(\n      {\n        <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"Insert your cloudName\"<\/span>,\n        <span class=\"hljs-attr\">uploadPreset<\/span>: <span class=\"hljs-string\">\"Insert your uploadPreset\"<\/span>,\n      },\n      (error, result) =&gt; {\n        <span class=\"hljs-keyword\">if<\/span> (!error &amp;&amp; result &amp;&amp; result.event === <span class=\"hljs-string\">\"success\"<\/span>) {\n          <span class=\"hljs-built_in\">console<\/span>.log(result);\n        }\n      }\n    );\n    myWidget.open();\n  };\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>CloudDrop - Home<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"description\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"Clouddrop\"<\/span> \/&gt;<\/span>\n        {\/*  eslint-disable-next-line @next\/next\/no-sync-scripts *\/}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>\n          <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/upload-widget.cloudinary.com\/global\/all.js\"<\/span>\n          <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>\n        &gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homeflex}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sidebar<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.cloud}<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homehead}<\/span>&gt;<\/span>CloudDrop <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homehead2}<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          {\/* We added the showWidget function to the onClick handler *\/}\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{showWidget}<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.upload}<\/span>&gt;<\/span>\n            Upload File\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/hackmamba\/building-a-filestorage-application-using-xata-cloudinary-and-nextjs-4214#connecting-xata-to-the-application\"><\/a>Connecting Xata to the Application<\/h2>\n\n\n\n<p>This application will do four significant actions on Xata: signup, log in, save, and retrieve files.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Set up API Routes on Next.js<\/strong><\/h3>\n\n\n\n<p>Before we set up our API routes, we need to add our ENV file.<\/p>\n\n\n\n<p>ENV<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">XATA=Bearer <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Insert<\/span> <span class=\"hljs-attr\">your<\/span> <span class=\"hljs-attr\">API<\/span> <span class=\"hljs-attr\">KEY<\/span>&gt;<\/span>\nsalt=<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Insert<\/span> <span class=\"hljs-attr\">anything<\/span>&gt;<\/span>\ndatabase=<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">workspace<\/span> <span class=\"hljs-attr\">base<\/span> <span class=\"hljs-attr\">API<\/span> <span class=\"hljs-attr\">URL<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>api\/signup.js<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Next.js API route support: https:\/\/nextjs.org\/docs\/api-routes\/introduction<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">handler<\/span>(<span class=\"hljs-params\">req, res<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">if<\/span> (req.method === <span class=\"hljs-string\">\"POST\"<\/span>) {\n    <span class=\"hljs-comment\">\/\/ parse incoming request<\/span>\n    <span class=\"hljs-keyword\">const<\/span> cred = <span class=\"hljs-built_in\">JSON<\/span>.parse(req.body);\n\n    <span class=\"hljs-comment\">\/\/ option object for first request, filter checks if email already exists in the database<\/span>\n    <span class=\"hljs-keyword\">const<\/span> options1 = {\n      <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">\"POST\"<\/span>,\n      <span class=\"hljs-attr\">headers<\/span>: {\n        <span class=\"hljs-attr\">Authorization<\/span>: process.env.XATA,\n        <span class=\"hljs-string\">\"Content-Type\"<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span>,\n      },\n      <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-string\">`{\"filter\":{\"email\":{\"$contains\":\"<span class=\"hljs-subst\">${cred.email}<\/span>\"}},\"page\":{\"size\":15}}`<\/span>,\n    };\n\n    <span class=\"hljs-comment\">\/\/option object for second request, body contains email and password to create a new user<\/span>\n    <span class=\"hljs-keyword\">const<\/span> options2 = {\n      <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">\"POST\"<\/span>,\n      <span class=\"hljs-attr\">headers<\/span>: {\n        <span class=\"hljs-attr\">Authorization<\/span>: process.env.XATA,\n        <span class=\"hljs-string\">\"Content-Type\"<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span>,\n      },\n      <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-built_in\">JSON<\/span>.stringify(cred),\n    };\n\n    <span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-keyword\">async<\/span> (<\/span>) =&gt;<\/span> {\n      <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-comment\">\/\/ check if user already exists<\/span>\n        <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(\n          <span class=\"hljs-string\">`<span class=\"hljs-subst\">${process.env.database}<\/span>:main\/tables\/users\/query`<\/span>,\n          options1\n        );\n        <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> response.json();\n        <span class=\"hljs-comment\">\/\/ returns error message if user exists<\/span>\n        <span class=\"hljs-keyword\">if<\/span> (data.records.length &gt; <span class=\"hljs-number\">0<\/span>) {\n          <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">400<\/span>).json({ <span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">\"User already exists\"<\/span> });\n        } <span class=\"hljs-keyword\">else<\/span> {\n          <span class=\"hljs-comment\">\/\/ create a new user if user does not exist<\/span>\n          <span class=\"hljs-keyword\">const<\/span> response2 = <span class=\"hljs-keyword\">await<\/span> fetch(\n            <span class=\"hljs-string\">`<span class=\"hljs-subst\">${process.env.database}<\/span>:main\/tables\/users\/data?columns=id`<\/span>,\n            options2\n          );\n          <span class=\"hljs-keyword\">const<\/span> data2 = <span class=\"hljs-keyword\">await<\/span> response2.json();\n          <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">200<\/span>).json(data2);\n        }\n      } <span class=\"hljs-keyword\">catch<\/span> (err) {\n        <span class=\"hljs-built_in\">console<\/span>.log(err);\n        <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">500<\/span>).json({ <span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">\"An error occured\"<\/span> });\n      }\n    })();\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The signup API route expects a request body from the client, it is a POST request, and the first thing it does is check if the email already exists; if it does, it returns an error message, but if it does not, it creates a new user in the database.<\/p>\n\n\n\n<p><code>api\/login.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-17\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Next.js API route support: https:\/\/nextjs.org\/docs\/api-routes\/introduction<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">handler<\/span>(<span class=\"hljs-params\">req, res<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">if<\/span> (req.method === <span class=\"hljs-string\">\"POST\"<\/span>) {\n    <span class=\"hljs-comment\">\/\/ Parse incoming request body and get the email<\/span>\n    <span class=\"hljs-keyword\">const<\/span> email = <span class=\"hljs-built_in\">JSON<\/span>.parse(req.body).email;\n    <span class=\"hljs-comment\">\/\/ option object, filter checks for email in the database<\/span>\n    <span class=\"hljs-keyword\">const<\/span> options = {\n      <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">\"POST\"<\/span>,\n      <span class=\"hljs-attr\">headers<\/span>: {\n        <span class=\"hljs-attr\">Authorization<\/span>: process.env.XATA,\n        <span class=\"hljs-string\">\"Content-Type\"<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span>,\n      },\n      <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-string\">`{\"filter\":{\"email\":{\"$contains\":\"<span class=\"hljs-subst\">${email}<\/span>\"}},\"page\":{\"size\":15}}`<\/span>,\n    };\n\n    <span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-keyword\">async<\/span> (<\/span>) =&gt;<\/span> {\n      <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-comment\">\/\/ get user data, if email exist in the database.<\/span>\n        <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(\n          <span class=\"hljs-string\">`<span class=\"hljs-subst\">${process.env.database}<\/span>:main\/tables\/users\/query`<\/span>,\n          options\n        );\n\n        <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> response.json();\n        <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">200<\/span>).json(data.records);\n      } <span class=\"hljs-keyword\">catch<\/span> (err) {\n        <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">500<\/span>).json({ <span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">\"An error occured\"<\/span> });\n      }\n    })();\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-17\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The login API route expects a request body, a POST request, and it gets the email needed to check if the user exists; if the user exists, the user object is sent to the client.<\/p>\n\n\n\n<p><code>api\/upload.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-18\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Next.js API route support: https:\/\/nextjs.org\/docs\/api-routes\/introduction<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">handler<\/span>(<span class=\"hljs-params\">req, res<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">if<\/span> (req.method === <span class=\"hljs-string\">\"POST\"<\/span>) {\n    <span class=\"hljs-comment\">\/\/ parse incoming request<\/span>\n    <span class=\"hljs-keyword\">const<\/span> cred = <span class=\"hljs-built_in\">JSON<\/span>.parse(req.body);\n    <span class=\"hljs-comment\">\/\/option object, body contains media file to be uploaded on xata database<\/span>\n    <span class=\"hljs-keyword\">const<\/span> options = {\n      <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">\"POST\"<\/span>,\n      <span class=\"hljs-attr\">headers<\/span>: {\n        <span class=\"hljs-attr\">Authorization<\/span>: process.env.XATA,\n        <span class=\"hljs-string\">\"Content-Type\"<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span>,\n      },\n      <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-built_in\">JSON<\/span>.stringify(cred),\n    };\n\n    <span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-keyword\">async<\/span> (<\/span>) =&gt;<\/span> {\n      <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-comment\">\/\/ upload file to files table on xata<\/span>\n        <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(\n          <span class=\"hljs-string\">`<span class=\"hljs-subst\">${process.env.database}<\/span>:main\/tables\/files\/data?columns=id`<\/span>,\n          options\n        );\n\n        <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> response.json();\n        <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">200<\/span>).json(data);\n      } <span class=\"hljs-keyword\">catch<\/span> (err) {\n        <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">500<\/span>).json({ <span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">\"An error occured\"<\/span> });\n      }\n    })();\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-18\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The upload route API expects the request object, which contains the file name, file url, type, and other data; the upload API stores the file in the database. It is a POST request.<\/p>\n\n\n\n<p><code>api\/files<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-19\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Next.js API route support: https:\/\/nextjs.org\/docs\/api-routes\/introduction<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">handler<\/span>(<span class=\"hljs-params\">req, res<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">if<\/span> (req.method === <span class=\"hljs-string\">\"GET\"<\/span>) {\n    <span class=\"hljs-comment\">\/\/ retrieving the search query<\/span>\n    <span class=\"hljs-keyword\">const<\/span> search = req.query.search;\n    <span class=\"hljs-comment\">\/\/filter checks for search query<\/span>\n    <span class=\"hljs-keyword\">const<\/span> options = {\n      <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">\"POST\"<\/span>,\n      <span class=\"hljs-attr\">headers<\/span>: {\n        <span class=\"hljs-attr\">Authorization<\/span>: process.env.XATA,\n        <span class=\"hljs-string\">\"Content-Type\"<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span>,\n      },\n      <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-string\">`{\"filter\":{\"userid\":\"<span class=\"hljs-subst\">${search}<\/span>\"},\"page\":{\"size\":15}}`<\/span>,\n    };\n\n    <span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-keyword\">async<\/span> (<\/span>) =&gt;<\/span> {\n      <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-comment\">\/\/ queries the files table for the userId,and return all files attached to the userid if it exists<\/span>\n        <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(\n          <span class=\"hljs-string\">`<span class=\"hljs-subst\">${process.env.database}<\/span>:main\/tables\/files\/query`<\/span>,\n          options\n        );\n\n        <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> response.json();\n        <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">200<\/span>).json(data.records);\n      } <span class=\"hljs-keyword\">catch<\/span> (err) {\n        <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">500<\/span>).json({ <span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">\"An error occured\"<\/span> });\n      }\n    })();\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-19\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The files route API is a GET request. We need to retrieve the files we have stored in the database, which is what the files API route does. It uses the search query, which is the&nbsp;<strong>userid<\/strong>, to fetch all files associated with the user.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Integrate API routes with the pages<\/strong><\/h3>\n\n\n\n<p><code>pages\/signup.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-20\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { useState, useRef } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> bcrypt <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"bcryptjs\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { NotificationManager } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react-notifications\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Link <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/link\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Signup<\/span>(<span class=\"hljs-params\">{ data }<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> emailRef = useRef();\n  <span class=\"hljs-keyword\">const<\/span> passwordRef = useRef();\n\n  <span class=\"hljs-keyword\">const<\/span> sign = <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n    <span class=\"hljs-keyword\">if<\/span> (emailRef.current.value === <span class=\"hljs-string\">\"\"<\/span> || passwordRef.current.value === <span class=\"hljs-string\">\"\"<\/span>) {\n      <span class=\"hljs-keyword\">return<\/span> NotificationManager.error(<span class=\"hljs-string\">\"Please enter your email or password\"<\/span>);\n    }\n\n    <span class=\"hljs-keyword\">const<\/span> hashedPassword = bcrypt.hashSync(\n      passwordRef.current.value,\n      process.env.salt\n    );\n    <span class=\"hljs-keyword\">const<\/span> cred = {\n      <span class=\"hljs-attr\">email<\/span>: emailRef.current.value,\n      <span class=\"hljs-attr\">password<\/span>: hashedPassword,\n    };\n\n    <span class=\"hljs-keyword\">const<\/span> options = {\n      <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">\"POST\"<\/span>,\n      <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-built_in\">JSON<\/span>.stringify(cred),\n    };\n\n    NotificationManager.info(<span class=\"hljs-string\">\"Loading.......\"<\/span>, <span class=\"hljs-string\">\"Info\"<\/span>);\n\n    <span class=\"hljs-keyword\">try<\/span> {\n      <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">\"\/api\/signup\"<\/span>, options);\n      <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> response.json();\n      <span class=\"hljs-keyword\">if<\/span> (data.id) {\n        localStorage.setItem(<span class=\"hljs-string\">\"cloud-user\"<\/span>, data.id);\n        localStorage.setItem(<span class=\"hljs-string\">\"cloud-email\"<\/span>, emailRef.current.value);\n        NotificationManager.success(<span class=\"hljs-string\">\"Signup was successfully\"<\/span>, <span class=\"hljs-string\">\"Success\"<\/span>);\n        <span class=\"hljs-built_in\">window<\/span>.location.href = <span class=\"hljs-string\">\"\/\"<\/span>;\n      } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> ((response.message = <span class=\"hljs-string\">\"User already exists\"<\/span>)) {\n        NotificationManager.error(<span class=\"hljs-string\">\"User already exists\"<\/span>, <span class=\"hljs-string\">\"Error\"<\/span>);\n      }\n    } <span class=\"hljs-keyword\">catch<\/span> (err) {\n      <span class=\"hljs-built_in\">console<\/span>.log(err);\n    }\n  };\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"form\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"white\"<\/span>&gt;<\/span>Signup<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"input\"<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">{emailRef}<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter Email\"<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n            <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"input\"<\/span>\n            <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"password\"<\/span>\n            <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">{passwordRef}<\/span>\n            <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter Password\"<\/span>\n          \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          {\/*   eslint-disable-next-line @next\/next\/no-html-link-for-pages *\/}\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/login\"<\/span>&gt;<\/span>Login<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"but\"<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{sign}<\/span>&gt;<\/span>\n          Signup\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-20\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>We have imported&nbsp;<strong>bcryptjs<\/strong>&nbsp;and&nbsp;<strong>react notifications<\/strong>&nbsp;to help with password hashing and the user experience. We made use of the useRef hook to get our input value.<\/p>\n\n\n\n<p>The sign function is where the action is taking place; it checks if the email or password is empty and returns an error message if it is empty, then we use bcryptjs to hash the password, we send the credentials to our signup API route, and if the request is successful, we store the userid and email in the client using localStorage API, and redirect the user to the index page, if the user already exists, we display an error message.<\/p>\n\n\n\n<p>pages\/login.js<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-21\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { useState, useRef } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Link <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/link\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Login<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"form\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"white\"<\/span>&gt;<\/span>Login<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"input\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter Email\"<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n            <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"input\"<\/span>\n            <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter Password\"<\/span>\n            <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"password\"<\/span>\n          \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          {\/*  eslint-disable-next-line @next\/next\/no-html-link-for-pages *\/}\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/signup\"<\/span>&gt;<\/span>Signup<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"but\"<\/span>&gt;<\/span>Login<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-21\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The log function checks if the email or password is empty and returns an error message If it is empty, we send the request to the login API route; then we use bcryptjs to compare the password; if the password is wrong, we display an error message, if the password is correct, we store the userid and email in the client using the localStorage API, and redirect the user to the index page.<\/p>\n\n\n\n<p><code>pages\/index.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-22\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/head\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Sidebar <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Sidebar\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { NotificationManager } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react-notifications\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { useState, useEffect, useRef } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;images, setImages] = useState(&#91;]);\n  <span class=\"hljs-keyword\">const<\/span> &#91;documents, setDoc] = useState(&#91;]);\n  <span class=\"hljs-keyword\">const<\/span> &#91;videos, setVideos] = useState(&#91;]);\n  <span class=\"hljs-keyword\">const<\/span> &#91;audios, setAudio] = useState(&#91;]);\n  <span class=\"hljs-keyword\">const<\/span> &#91;others, setOthers] = useState(&#91;]);\n  <span class=\"hljs-keyword\">const<\/span> &#91;recent, setRecent] = useState(&#91;]);\n  <span class=\"hljs-keyword\">const<\/span> &#91;email, setEmail] = useState(<span class=\"hljs-string\">\"\"<\/span>);\n\n  <span class=\"hljs-keyword\">const<\/span> wigRef = useRef();\n\n  useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> user = localStorage.getItem(<span class=\"hljs-string\">\"cloud-user\"<\/span>);\n    <span class=\"hljs-keyword\">if<\/span> (user === <span class=\"hljs-literal\">null<\/span>) {\n      <span class=\"hljs-built_in\">window<\/span>.location.href = <span class=\"hljs-string\">\"\/login\"<\/span>;\n    }\n  }, &#91;]);\n\n  useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> user = localStorage.getItem(<span class=\"hljs-string\">\"cloud-user\"<\/span>);\n    <span class=\"hljs-keyword\">const<\/span> email = localStorage.getItem(<span class=\"hljs-string\">\"cloud-email\"<\/span>);\n    setEmail(email);\n\n    <span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-keyword\">async<\/span> (<\/span>) =&gt;<\/span> {\n      <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">`\/api\/files?search=<span class=\"hljs-subst\">${user}<\/span>`<\/span>);\n        <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> response.json();\n\n        <span class=\"hljs-keyword\">let<\/span> images = &#91;];\n        <span class=\"hljs-keyword\">let<\/span> documents = &#91;];\n        <span class=\"hljs-keyword\">let<\/span> videos = &#91;];\n        <span class=\"hljs-keyword\">let<\/span> audios = &#91;];\n        <span class=\"hljs-keyword\">let<\/span> others = &#91;];\n\n        data.map(<span class=\"hljs-function\">(<span class=\"hljs-params\">item<\/span>) =&gt;<\/span> {\n          <span class=\"hljs-keyword\">if<\/span> (item.type === <span class=\"hljs-string\">\"image\"<\/span>) {\n            images.push(item);\n          }\n          <span class=\"hljs-keyword\">if<\/span> (item.type === <span class=\"hljs-string\">\"video\"<\/span>) {\n            videos.push(item);\n          }\n          <span class=\"hljs-keyword\">if<\/span> (item.type === <span class=\"hljs-string\">\"audio\"<\/span>) {\n            audios.push(item);\n          }\n          <span class=\"hljs-keyword\">if<\/span> (item.type === <span class=\"hljs-string\">\"documents\"<\/span>) {\n            documents.push(item);\n          }\n          <span class=\"hljs-keyword\">if<\/span> (item.type === <span class=\"hljs-string\">\"others\"<\/span>) {\n            others.push(item);\n          }\n        });\n\n        setAudio(audios);\n        setVideos(videos);\n        setDoc(documents);\n        setOthers(others);\n        setImages(images);\n        <span class=\"hljs-keyword\">const<\/span> recent = data.slice(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">5<\/span>);\n        setRecent(recent);\n      } <span class=\"hljs-keyword\">catch<\/span> (err) {\n        <span class=\"hljs-built_in\">console<\/span>.log(err);\n      }\n    })();\n  }, &#91;]);\n\n  <span class=\"hljs-keyword\">const<\/span> showWidget = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> myWidget = <span class=\"hljs-built_in\">window<\/span>.cloudinary.createUploadWidget(\n      {\n        <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"josh4324\"<\/span>,\n        <span class=\"hljs-attr\">uploadPreset<\/span>: <span class=\"hljs-string\">\"hq1e5jub\"<\/span>,\n      },\n      (error, result) =&gt; {\n        <span class=\"hljs-keyword\">if<\/span> (!error &amp;&amp; result &amp;&amp; result.event === <span class=\"hljs-string\">\"success\"<\/span>) {\n          <span class=\"hljs-keyword\">const<\/span> typelist = result.info.secure_url.split(<span class=\"hljs-string\">\".\"<\/span>);\n          <span class=\"hljs-keyword\">const<\/span> len = typelist.length - <span class=\"hljs-number\">1<\/span>;\n          <span class=\"hljs-keyword\">let<\/span> type;\n          <span class=\"hljs-keyword\">if<\/span> (\n            typelist&#91;len] === <span class=\"hljs-string\">\"jpeg\"<\/span> ||\n            typelist&#91;len] === <span class=\"hljs-string\">\"jpg\"<\/span> ||\n            typelist&#91;len] === <span class=\"hljs-string\">\"png\"<\/span> ||\n            typelist&#91;len] === <span class=\"hljs-string\">\"svg\"<\/span>\n          ) {\n            type = <span class=\"hljs-string\">\"image\"<\/span>;\n          } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (\n            typelist&#91;len] === <span class=\"hljs-string\">\"mp4\"<\/span> ||\n            typelist&#91;len] === <span class=\"hljs-string\">\"mov\"<\/span> ||\n            typelist&#91;len] === <span class=\"hljs-string\">\"webm\"<\/span>\n          ) {\n            type = <span class=\"hljs-string\">\"video\"<\/span>;\n          } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (\n            typelist&#91;len] === <span class=\"hljs-string\">\"pdf\"<\/span> ||\n            typelist&#91;len] === <span class=\"hljs-string\">\"dox\"<\/span> ||\n            typelist&#91;len] === <span class=\"hljs-string\">\"docx\"<\/span> ||\n            typelist&#91;len] === <span class=\"hljs-string\">\"xlx\"<\/span> ||\n            typelist&#91;len] === <span class=\"hljs-string\">\"xlxs\"<\/span> ||\n            typelist&#91;len] === <span class=\"hljs-string\">\"txt\"<\/span> ||\n            typelist&#91;len] === <span class=\"hljs-string\">\"ppt\"<\/span> ||\n            typelist&#91;len] === <span class=\"hljs-string\">\"ppts\"<\/span>\n          ) {\n            type = <span class=\"hljs-string\">\"documents\"<\/span>;\n          } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (\n            typelist&#91;len] === <span class=\"hljs-string\">\"mp3\"<\/span> ||\n            typelist&#91;len] === <span class=\"hljs-string\">\"ma4\"<\/span> ||\n            typelist&#91;len] === <span class=\"hljs-string\">\"wav\"<\/span>\n          ) {\n            type = <span class=\"hljs-string\">\"audio\"<\/span>;\n          } <span class=\"hljs-keyword\">else<\/span> {\n            type = <span class=\"hljs-string\">\"others\"<\/span>;\n          }\n\n          <span class=\"hljs-keyword\">const<\/span> cred = {\n            <span class=\"hljs-attr\">userid<\/span>: localStorage.getItem(<span class=\"hljs-string\">\"cloud-user\"<\/span>),\n            <span class=\"hljs-attr\">name<\/span>: result.info.original_filename,\n            <span class=\"hljs-attr\">url<\/span>: result.info.secure_url,\n            type,\n            <span class=\"hljs-attr\">date<\/span>: <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>(),\n          };\n\n          <span class=\"hljs-keyword\">const<\/span> options = {\n            <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">\"POST\"<\/span>,\n            <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-built_in\">JSON<\/span>.stringify(cred),\n          };\n\n          <span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-keyword\">async<\/span> (<\/span>) =&gt;<\/span> {\n            <span class=\"hljs-keyword\">try<\/span> {\n              <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">\"\/api\/upload\"<\/span>, options);\n              <span class=\"hljs-keyword\">if<\/span> (response) {\n                NotificationManager.success(\n                  <span class=\"hljs-string\">\"File uploaded successfully\"<\/span>,\n                  <span class=\"hljs-string\">\"Success\"<\/span>\n                );\n                <span class=\"hljs-built_in\">window<\/span>.location.href = <span class=\"hljs-string\">\"\/\"<\/span>;\n              }\n            } <span class=\"hljs-keyword\">catch<\/span> (err) {\n              <span class=\"hljs-built_in\">console<\/span>.log(err);\n            }\n          })();\n        }\n      }\n    );\n    myWidget.open();\n  };\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>CloudDrop - Home<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"description\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"Clouddrop\"<\/span> \/&gt;<\/span>\n        {\/*  eslint-disable-next-line @next\/next\/no-sync-scripts *\/}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>\n          <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/upload-widget.cloudinary.com\/global\/all.js\"<\/span>\n          <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>\n        &gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homeflex}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sidebar<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.cloud}<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homehead}<\/span>&gt;<\/span>CloudDrop <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homehead2}<\/span>&gt;<\/span>{email}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{showWidget}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.upload}<\/span>&gt;<\/span>\n            Upload File\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n\n          {recent.length &gt; 0 ? (\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.box1}<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.head}<\/span>&gt;<\/span>Recent<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n              {recent.map((item) =&gt; {\n                return (\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.file}<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.name}<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home_text}<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">{<\/span>`${<span class=\"hljs-attr\">item.url<\/span>}`}&gt;<\/span>\n                      {item.name}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                );\n              })}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          ) : null}\n\n          {images.length &gt; 0 ? (\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.box1}<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.head}<\/span>&gt;<\/span>Images<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n              {images.map((item) =&gt; {\n                return (\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.file}<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.name}<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home_text}<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">{<\/span>`${<span class=\"hljs-attr\">item.url<\/span>}`}&gt;<\/span>\n                      {item.name}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                );\n              })}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          ) : null}\n\n          {audios.length &gt; 0 ? (\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.box1}<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.head}<\/span>&gt;<\/span>Audios<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n              {audios.map((item) =&gt; {\n                return (\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.file}<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.name}<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home_text}<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">{<\/span>`${<span class=\"hljs-attr\">item.url<\/span>}`}&gt;<\/span>\n                      {item.name}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                );\n              })}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          ) : null}\n\n          {videos.length &gt; 0 ? (\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.box1}<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.head}<\/span>&gt;<\/span>Videos<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n              {videos.map((item) =&gt; {\n                return (\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.file}<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.name}<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home_text}<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">{<\/span>`${<span class=\"hljs-attr\">item.url<\/span>}`}&gt;<\/span>\n                      {item.name}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                );\n              })}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          ) : null}\n\n          {documents.length &gt; 0 ? (\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.box1}<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.head}<\/span>&gt;<\/span>Documents<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n              {documents.map((item) =&gt; {\n                return (\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.file}<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.name}<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home_text}<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">{<\/span>`${<span class=\"hljs-attr\">item.url<\/span>}`}&gt;<\/span>\n                      {item.name}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                );\n              })}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          ) : null}\n\n          {others.length &gt; 0 ? (\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.box1}<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.head}<\/span>&gt;<\/span>Others<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n              {others.map((item) =&gt; {\n                return (\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.file}<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.name}<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home_text}<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">{<\/span>`${<span class=\"hljs-attr\">item.url<\/span>}`}&gt;<\/span>\n                      {item.name}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                );\n              })}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          ) : null}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-22\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>We set up our useState for the different types of files, and we also set up our useEffect to check if the user has been authenticated. We are doing this by checking the userid in the localStorage. We also get all the files when the page is refreshed, and we do this by calling the files API route inside the useEffect. We have also updated our showWidget function to store the url link and associated information we get when we upload our files to Cloudinary. We are using the upload API route for this inside the showWidget function. We are also getting the type of file by checking the extension of the files, which will help us classify the files into different categories. Finally, we use the different array categories for the file type to display the files on the page.<\/p>\n\n\n\n<p><code>pages\/all.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-23\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { useEffect, useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/head\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Sidebar <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Sidebar\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">All<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;all, setAll] = useState(&#91;]);\n  useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> user = localStorage.getItem(<span class=\"hljs-string\">\"cloud-user\"<\/span>);\n    <span class=\"hljs-keyword\">if<\/span> (user === <span class=\"hljs-literal\">null<\/span>) {\n      <span class=\"hljs-built_in\">window<\/span>.location.href = <span class=\"hljs-string\">\"\/login\"<\/span>;\n    }\n  }, &#91;]);\n\n  useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> user = localStorage.getItem(<span class=\"hljs-string\">\"cloud-user\"<\/span>);\n\n    <span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-keyword\">async<\/span> (<\/span>) =&gt;<\/span> {\n      <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">`\/api\/files?search=<span class=\"hljs-subst\">${user}<\/span>`<\/span>);\n        <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> response.json();\n        setAll(data);\n      } <span class=\"hljs-keyword\">catch<\/span> (err) {\n        <span class=\"hljs-built_in\">console<\/span>.log(err);\n      }\n    })();\n  }, &#91;]);\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>CloudDrop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"description\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"Clouddrop\"<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homeflex}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sidebar<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homehead}<\/span>&gt;<\/span>CloudDrop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.head2}<\/span>&gt;<\/span>All<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n\n          {all.length &gt; 0 ? (\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.box1}<\/span>&gt;<\/span>\n              {all.map((item) =&gt; {\n                return (\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.file}<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.name}<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home_text}<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">{<\/span>`${<span class=\"hljs-attr\">item.url<\/span>}`}&gt;<\/span>\n                      {item.name}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                );\n              })}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          ) : null}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-23\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The all page uses the api\/files endpoint to get all the uploaded files and displays them on the page.<\/p>\n\n\n\n<p><code>pages\/files.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-24\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { useEffect, useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/head\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Sidebar <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Sidebar\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Files<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;documents, setDoc] = useState(&#91;]);\n\n  useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> user = localStorage.getItem(<span class=\"hljs-string\">\"cloud-user\"<\/span>);\n    <span class=\"hljs-keyword\">if<\/span> (user === <span class=\"hljs-literal\">null<\/span>) {\n      <span class=\"hljs-built_in\">window<\/span>.location.href = <span class=\"hljs-string\">\"\/login\"<\/span>;\n    }\n\n    (<span class=\"hljs-keyword\">async<\/span> () =&gt; {\n      <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">`\/api\/files?search=<span class=\"hljs-subst\">${user}<\/span>`<\/span>);\n        <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> response.json();\n        <span class=\"hljs-keyword\">let<\/span> documents = &#91;];\n        data.map(<span class=\"hljs-function\">(<span class=\"hljs-params\">item<\/span>) =&gt;<\/span> {\n          <span class=\"hljs-keyword\">if<\/span> (item.type === <span class=\"hljs-string\">\"documents\"<\/span>) {\n            documents.push(item);\n          }\n          setDoc(documents);\n        });\n      } <span class=\"hljs-keyword\">catch<\/span> (err) {\n        <span class=\"hljs-built_in\">console<\/span>.log(err);\n      }\n    })();\n  }, &#91;]);\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>CloudDrop - Files<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"description\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"Clouddrop\"<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homeflex}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sidebar<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homehead}<\/span>&gt;<\/span>CloudDrop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.head2}<\/span>&gt;<\/span>Documents<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n          {documents.length &gt; 0 ? (\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.box1}<\/span>&gt;<\/span>\n              {documents.map((item) =&gt; {\n                return (\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.file}<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.name}<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home_text}<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">{<\/span>`${<span class=\"hljs-attr\">item.url<\/span>}`}&gt;<\/span>\n                      {item.name}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                );\n              })}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          ) : null}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-24\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The files page uses the api\/files endpoint to get all the uploaded files, filters the result for documents like pdf and Microsoft word, and displays them on the page.<\/p>\n\n\n\n<p><code>pages\/photos.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-25\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { useEffect, useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/head\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Sidebar <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Sidebar\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Photos<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;images, setImages] = useState(&#91;]);\n  useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> user = localStorage.getItem(<span class=\"hljs-string\">\"cloud-user\"<\/span>);\n    <span class=\"hljs-keyword\">if<\/span> (user === <span class=\"hljs-literal\">null<\/span>) {\n      <span class=\"hljs-built_in\">window<\/span>.location.href = <span class=\"hljs-string\">\"\/login\"<\/span>;\n    }\n  }, &#91;]);\n\n  useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> user = localStorage.getItem(<span class=\"hljs-string\">\"cloud-user\"<\/span>);\n\n    <span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-keyword\">async<\/span> (<\/span>) =&gt;<\/span> {\n      <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">`\/api\/files?search=<span class=\"hljs-subst\">${user}<\/span>`<\/span>);\n        <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> response.json();\n        <span class=\"hljs-keyword\">let<\/span> images = &#91;];\n        data.map(<span class=\"hljs-function\">(<span class=\"hljs-params\">item<\/span>) =&gt;<\/span> {\n          <span class=\"hljs-keyword\">if<\/span> (item.type === <span class=\"hljs-string\">\"image\"<\/span>) {\n            images.push(item);\n          }\n          setImages(images);\n        });\n      } <span class=\"hljs-keyword\">catch<\/span> (err) {\n        <span class=\"hljs-built_in\">console<\/span>.log(err);\n      }\n    })();\n  }, &#91;]);\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>CloudDrop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"description\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"Clouddrop\"<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homeflex}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sidebar<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homehead}<\/span>&gt;<\/span>CloudDrop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.head2}<\/span>&gt;<\/span>Images<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n\n          {images.length &gt; 0 ? (\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.box1}<\/span>&gt;<\/span>\n              {images.map((item) =&gt; {\n                return (\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.file}<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.name}<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home_text}<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">{<\/span>`${<span class=\"hljs-attr\">item.url<\/span>}`}&gt;<\/span>\n                      {item.name}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                );\n              })}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          ) : null}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-25\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The photos page uses the api\/files endpoint to get all the uploaded files, filters the result for the images, and displays them on the page.<\/p>\n\n\n\n<p><code>pages\/videos.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-26\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { useEffect, useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/head\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Sidebar <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Sidebar\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Files<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;videos, setVideos] = useState(&#91;]);\n  useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> user = localStorage.getItem(<span class=\"hljs-string\">\"cloud-user\"<\/span>);\n    <span class=\"hljs-keyword\">if<\/span> (user === <span class=\"hljs-literal\">null<\/span>) {\n      <span class=\"hljs-built_in\">window<\/span>.location.href = <span class=\"hljs-string\">\"\/login\"<\/span>;\n    }\n  }, &#91;]);\n\n  useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> user = localStorage.getItem(<span class=\"hljs-string\">\"cloud-user\"<\/span>);\n\n    <span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-keyword\">async<\/span> (<\/span>) =&gt;<\/span> {\n      <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">`\/api\/files?search=<span class=\"hljs-subst\">${user}<\/span>`<\/span>);\n        <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> response.json();\n        <span class=\"hljs-keyword\">let<\/span> videos = &#91;];\n        data.map(<span class=\"hljs-function\">(<span class=\"hljs-params\">item<\/span>) =&gt;<\/span> {\n          <span class=\"hljs-keyword\">if<\/span> (item.type === <span class=\"hljs-string\">\"video\"<\/span>) {\n            videos.push(item);\n          }\n        });\n        setVideos(videos);\n      } <span class=\"hljs-keyword\">catch<\/span> (err) {\n        <span class=\"hljs-built_in\">console<\/span>.log(err);\n      }\n    })();\n  }, &#91;]);\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>CloudDrop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"description\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"Clouddrop\"<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homeflex}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sidebar<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.homehead}<\/span>&gt;<\/span>CloudDrop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.head2}<\/span>&gt;<\/span>Videos<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n          {videos.length &gt; 0 ? (\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.box1}<\/span>&gt;<\/span>\n              {videos.map((item) =&gt; {\n                return (\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.file}<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.name}<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.home_text}<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">{<\/span>`${<span class=\"hljs-attr\">item.url<\/span>}`}&gt;<\/span>\n                      {item.name}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                );\n              })}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          ) : null}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-26\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The videos page uses the api\/files endpoint to get all the uploaded files, and filters the results for videos, and displays them on the page.<\/p>\n\n\n\n<p>For all the pages, we&#8217;re checking if the user is authenticated inside the useEffect, we are also calling the files API route to get the files associated with the user. We use the useState to keep track of our files and display them on the page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/hackmamba\/building-a-filestorage-application-using-xata-cloudinary-and-nextjs-4214#conclusion\"><\/a>Conclusion<\/h2>\n\n\n\n<p>We built a fully functional file storage application using Xata,<a href=\"https:\/\/cloudinary.com\/\"> Cloudinary<\/a>, and Next.js, where users can upload images, videos, documents, and other files. Users can sign up and log in to the application to start using it. Users&#8217; passwords are hashed for security, and only users can access the files they store in the application.<\/p>\n\n\n\n<p>Link to the demo <a href=\"https:\/\/clouddrop.netlify.app\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>This blog post was created for the <a href=\"https:\/\/hackmamba.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Hackmamba<\/a>\u00a0Jamstack Content Hackathon with\u00a0<a href=\"https:\/\/xata.io\/?utm_source=hackmamba&amp;utm_campaign=hackmamba-hackathon&amp;utm_medium=hackmamba-blog\" target=\"_blank\" rel=\"noreferrer noopener\">Xata<\/a>\u00a0and\u00a0<a href=\"https:\/\/cloudinary.com\/?utm_source=hackmamba&amp;utm_campaign=hackmamba-hackathon&amp;utm_medium=hackmamba-blog\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Storing files is necessary due to the ease with which pictures, videos, and other files can be generated. The smartphone era played a significant role in this; people want to save their memories so that they can always refer back to them in the future. This blog post explains how to build a file storage [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":31337,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[212],"class_list":["post-31335","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-next-js"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Building a FileStorage Application Using Xata, Cloudinary, and Next.js<\/title>\n<meta name=\"description\" content=\"Storing files is necessary due to the ease with which pictures, videos, and other files can be generated. The smartphone era played a significant role in\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a FileStorage Application Using Xata, Cloudinary, and Next.js\" \/>\n<meta property=\"og:description\" content=\"Storing files is necessary due to the ease with which pictures, videos, and other files can be generated. The smartphone era played a significant role in\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-02T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-27T06:00:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1696011459\/Blog-Hackmamba_Building_A_File_storage\/Blog-Hackmamba_Building_A_File_storage.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Building a FileStorage Application Using Xata, Cloudinary, and Next.js\",\"datePublished\":\"2023-10-02T14:00:00+00:00\",\"dateModified\":\"2025-11-27T06:00:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js\"},\"wordCount\":1454,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1696011459\/Blog-Hackmamba_Building_A_File_storage\/Blog-Hackmamba_Building_A_File_storage.jpg?_i=AA\",\"keywords\":[\"Next.js\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js\",\"url\":\"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js\",\"name\":\"Building a FileStorage Application Using Xata, Cloudinary, and Next.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1696011459\/Blog-Hackmamba_Building_A_File_storage\/Blog-Hackmamba_Building_A_File_storage.jpg?_i=AA\",\"datePublished\":\"2023-10-02T14:00:00+00:00\",\"dateModified\":\"2025-11-27T06:00:17+00:00\",\"description\":\"Storing files is necessary due to the ease with which pictures, videos, and other files can be generated. The smartphone era played a significant role in\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1696011459\/Blog-Hackmamba_Building_A_File_storage\/Blog-Hackmamba_Building_A_File_storage.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1696011459\/Blog-Hackmamba_Building_A_File_storage\/Blog-Hackmamba_Building_A_File_storage.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a FileStorage Application Using Xata, Cloudinary, and Next.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a FileStorage Application Using Xata, Cloudinary, and Next.js","description":"Storing files is necessary due to the ease with which pictures, videos, and other files can be generated. The smartphone era played a significant role in","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js","og_locale":"en_US","og_type":"article","og_title":"Building a FileStorage Application Using Xata, Cloudinary, and Next.js","og_description":"Storing files is necessary due to the ease with which pictures, videos, and other files can be generated. The smartphone era played a significant role in","og_url":"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js","og_site_name":"Cloudinary Blog","article_published_time":"2023-10-02T14:00:00+00:00","article_modified_time":"2025-11-27T06:00:17+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1696011459\/Blog-Hackmamba_Building_A_File_storage\/Blog-Hackmamba_Building_A_File_storage.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Building a FileStorage Application Using Xata, Cloudinary, and Next.js","datePublished":"2023-10-02T14:00:00+00:00","dateModified":"2025-11-27T06:00:17+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js"},"wordCount":1454,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1696011459\/Blog-Hackmamba_Building_A_File_storage\/Blog-Hackmamba_Building_A_File_storage.jpg?_i=AA","keywords":["Next.js"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js","url":"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js","name":"Building a FileStorage Application Using Xata, Cloudinary, and Next.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1696011459\/Blog-Hackmamba_Building_A_File_storage\/Blog-Hackmamba_Building_A_File_storage.jpg?_i=AA","datePublished":"2023-10-02T14:00:00+00:00","dateModified":"2025-11-27T06:00:17+00:00","description":"Storing files is necessary due to the ease with which pictures, videos, and other files can be generated. The smartphone era played a significant role in","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1696011459\/Blog-Hackmamba_Building_A_File_storage\/Blog-Hackmamba_Building_A_File_storage.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1696011459\/Blog-Hackmamba_Building_A_File_storage\/Blog-Hackmamba_Building_A_File_storage.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/building-filestorage-application-xata-cloudinary-next-js#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a FileStorage Application Using Xata, Cloudinary, and Next.js"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1696011459\/Blog-Hackmamba_Building_A_File_storage\/Blog-Hackmamba_Building_A_File_storage.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/31335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=31335"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/31335\/revisions"}],"predecessor-version":[{"id":39469,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/31335\/revisions\/39469"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/31337"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=31335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=31335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=31335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}