https://github.com/shreyanshiitk20/image-uploader

https://github.com/shreyanshiitk20/image-uploader

css3 ejs-templating expressjs html5 javascript

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/shreyanshiitk20/image-uploader
• Owner: ShreyanshIITK20
• Created: 2021-09-18T17:40:09.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-09-21T21:26:47.000Z (over 4 years ago)
• Last Synced: 2025-03-09T12:55:19.212Z (about 1 year ago)
• Topics: css3, ejs-templating, expressjs, html5, javascript
• Language: EJS
• Homepage:
• Size: 44.9 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Image uploader




   Solution for a challenge from  Devchallenges.io.





  


    

      Solution

    

     | 

    

      Challenge

    

  



## Table of Contents

- [Overview](#overview)

- [Built With](#built-with)

- [Features](#features)

- [How to use](#how-to-use)

- [Contact](#contact)

## Overview

![screenshot](https://github.com/ShreyanshIITK20/Image-uploader/blob/main/public/images/screenshot.jpg?raw=true)

This was a great starter challenge for beginner full-stack developers which tested both templating and JS skills. 

Creating a ```drop-box``` was kinda fun but at the same time it posed a great challenge to link the dropped/dragged image to a entire new webpage. It introduced me to the concept of ```localStorage``` which retains the information of uploaded files for the entire browsing session. Few bugs were observed when rerouting to root (/), and I tried my best to resolve them. However, this app is open to suggessions and improvements.

### Built With

- HTML5 and CSS3

- JAvascript

- Bootstrap 5

- Node.js 

- Express.js

## Features

With this app one can

- ```Drag and drop``` an image to upload it

- Choose to ```select an image``` from my folder (local computer)

- See a ```loader``` when uploading

- When the image is uploaded, one can ```see the image and copy it```

- Choose to ```copy to the clipboard```

## How To Use

To clone and run this application, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:

```bash

# Clone this repository

$ git clone https://github.com/ShreyanshIITK20/Image-uploader

# Install dependencies

$ npm install

# Run the app

$ npm start

```

## Contact

- [Instagram profile](https://www.instagram.com/_shreyanshagarwal_/)

- [LinkedIn profile](https://www.linkedin.com/in/shreyansh-agarwal-9a0482131/)

- [Twitter account](https://twitter.com/_Shreyansh13_)