To view the demo of this project, visit my-devchallenge-image-uploader. Building this app was a bit of a back and forth initially, as I first tried to build with javascript, html and css only but I realized I could use svelte to make using components and the javascript interactivity with the dom elements a bit easier so I opted for vite and built the initial upload form.
Before continuing, I realized that I will need possibly a form and api route to upload the file so it will be better to run it in a server environment where I can also use an api. Since I was using svelte, I decided to use sveltekit.
I found most of the UI building easier with the figma design file and also tailwind css. It was definitely exciting and engaging to get the various fonts and sizes correct in tailwind. I extended tailwind config to add a bit more details like colors from the design, animation for the uploading state and box shadow.
Drag and drop was also a web API I had not used before so it was quite new experience to learn how to do it using MDN Docs.
I also used gitpod the whole time to build the complete product. I did struggle with not being able to test the upload on gitpod due to a different domain being assigned to the app (gitpod makes available a public domain you can visit to view launched project) other than localhost. It was an issue around the ORIGIN being different so I found the form not working but it did work on the hosting platform I used, netlify.
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.
- User should be able to upload a file.
- User should see a progress monitor whilst file is being uploaded.
- User should be able to see finally uploaded file with a url they can copy.
- Solution should be hosted publicly on github
- Deploy solution and share
Since images are uplaoded to cloudinary, in other to view the image, you will need to create a cloudinary account if you don't have one, copy the .env.example as .env and add the cloudinary credentials required from your cloudinary dashboard.
cp .env.example .env
# Copy your cloudinary credentials into the .env file
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
$ git clone https://github.com/discoverlance-com/image-uploader
# Install dependencies
$ pnpm install
# Run the app
$ pnpm dev- Steps to replicate a design with only HTML and CSS
- Node.js
- Marked - a markdown parser
- Cloudinary - an image hosting service
- Drag and drop example
- Website discoverlance.com
- GitHub @discoverlance-com
- Twitter @Discoverlance