Solution to the Image Uploader Challenge from Devchallenges.io.
Challenge: Create an Image Uploader application. Use any front-end libraries of your choice. Create your API. Don’t look at the existing solution.
Fulfill user stories below:
- User story: I can drag and drop an image to upload it
- User story: I can choose to select an image from my folder
- User story: I can see a loader when uploading
- User story: When the image is uploaded, I can see the image and copy it
- User story: I can choose to copy to the clipboard
Find the website in action here!
Home Page
File is being uploaded
Image Uploaded Successfully
Find the API Documentation in detail in the wiki here.
https://anuva-image-uploader.onrender.com
Note : Since I am using a free plan, the server goes to sleep after 15 min of inactivity and there will be a 30 sec delay for the server to wake up after it receives the first request. So if you don't get any response in the first try, please try again.
| API | Method | Endpoint |
|---|---|---|
| Get All Images | GET | /api/v1/images |
| Get An Image By Id | GET | /api/v1/images/{id} |
| Get A Static File | GET | /{path to file} |
| Upload An Image | POST | /api/v1/images |
| Delete All Images | DELETE | /api/v1/images |
| Delete An Image By Id | DELETE | /api/v1/images/{id} |
To clone and run this application, you'll need Git and npm. From your command line:
# Clone this repository
$ git clone "https://github.com/anuva312/ImageUploader-devChallenges"
# Install dependencies
$ npm install
# Run the app
$ npm run start