Drag a file and drop it in the area, and you'll get a link you can use to share your image!

This project presents a web component that you can use to upload files an reference link to share it in your document or anywhere else. This repo contains the frontend files, made with vanilla JS, CSS and HTML. The backend, made with Ruby on Rails, can be found here.

• Vanilla JS, HTML and CSS

Live Demo Link

To get a local copy up and running follow these simple example steps.

1. Clone this repo in your local environment:

git clone [email protected]:juanse1904/image-uploader-frontend.git

2. Serve the project files through a local port:

npm install -g live-server
live-server --port=3000

3. Open your browser and go to

Grab an image file, drag it and drop it into the given area in the web browser. Also, you can click on the Choose File button and select your file manually. The image will upload and return you a link you can use to refer to your image.

Juan Sebastián Gómez

• GitHub: @juanse1904
• LinkedIn: /in/juansebg/

Miguel Prada

• GitHub: @mapra99
• LinkedIn: /in/mprada/

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Give a ⭐️ if you like this project!

• Hat tip to devchallenges.io for their design

This project is MIT licensed.