Image Uploader

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Overview
  • Built With
  • Deploy
• Features
• How to use
• Contact
• Acknowledgements

Overview

I really learned more about the HTML Input of type file in this challenge. That was the first time where I took my time on learning and understanding about how it works, how to stylize it and add more functionality like the drag and drop support. That was a fun project, simple but also not so simple (as I didn't really knew how to use this type of input properly haha).

Well, I guess I will not be so lost the next time I'm required to implement this type of input.

• Where can I see your demo?
  • https://mp-imguploader.netlify.app

Built With

• Vite
• Typescript
• Node.js

Deploy

• Netlify
• Render

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.

• The user can drag and drop an image to upload it
• The user can choose to select an image from my folder
• The user can see a loader when uploading
• When the image is uploaded, the user can see the image and copy it
• The user can choose to copy to the clipboard

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository (via HTTPS or SSH)
$ git clone https://github.com/montteiropedro/image-uploader.git
$ git clone git@github.com:montteiropedro/image-uploader.git

Now you gonna have to navigate inside the project folder and there you gonna have two separate folders, web and server. Inside each of these folders you will find files named .env.example, and from them you can easily configure your environment variables. Don't forget to rename these files to just .env, only then they will be functional.

After this we must install web and server dependencies. We can do this by entering each of these folders and running the following command:

# Install dependencies (You must do this step inside the `web` and `server` folders separately)
$ npm install

Still running the commands for each of these 2 folders separately, you can have:

# Run app in localhost
npm run dev

# Compile and Build the app
npm run build

# Run the app
$ npm start

Acknowledgements

• Using __dirname in ES module scope
• Uploading files using fetch and FormData
• Simple Drag and Drop File Upload Tutorial - HTML, CSS & JavaScript

Contact

• LinkedIn @montteiropedro
• GitHub @montteiropedro
• Twitter @montteiropedro