Giter Club home page Giter Club logo

auth-filesharing-api-module's Introduction


File Upload Form Project

This project demonstrates a simple file upload form built with React and TypeScript on the frontend and an Express.js server with MongoDB on the backend.

Table of Contents

Project Structure

FileUploadFormProject
│
├── backend
│   ├── models
│   │   └── User.js
│   ├── uploads
│   ├── index.js
│   └── package.json
│
├── frontend
│   ├── src
│   │   ├── components
│   │   │   └── FileUploadForm.tsx
│   │   ├── App.tsx
│   │   └── index.tsx
│   ├── public
│   ├── package.json
│   ├── tsconfig.json
│   └── .gitignore
│
└── README.md

Features

  • Upload a file along with user details (name, address, email).
  • Store the uploaded file on the server and user details along with file path in MongoDB.

Prerequisites

  • Node.js and npm installed on your machine.
  • MongoDB installed and running.
  • React development environment setup.

Installation

Backend

  1. Navigate to the backend directory:

    cd backend
  2. Install backend dependencies:

    npm install

Frontend

  1. Navigate to the frontend directory:

    cd frontend
  2. Install frontend dependencies:

    npm install

Running the Project

Backend

  1. Start the MongoDB server.

  2. Run the backend server:

    npm start

    The backend server will start at http://localhost:3000.

Frontend

  1. Run the React development server:

    npm start

    The frontend development server will start at http://localhost:3000.

Usage

  1. Open your web browser and navigate to http://localhost:3000.

  2. Fill in the form with your name, address, email, and select a file to upload.

  3. Submit the form. The file and user details will be sent to the backend server and stored in MongoDB.

API Endpoints

POST /submit

  • Description: Endpoint to handle form submission.
  • Request Body:
    • name: string
    • address: string
    • email: string
    • file: file
  • Response: A success message or an error message.

Technologies Used

  • Frontend:

    • React
    • TypeScript
  • Backend:

    • Express.js
    • MongoDB
    • Mongoose
    • Multer

License

This project is licensed under the MIT License.


Feel free to modify this README to better fit your project's specific details and requirements!

auth-filesharing-api-module's People

Contributors

dhanushprabakaran avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.