HelloAlberuni/uploadify: Image Sharing App with Vanilla JS · GitHub

Uploadify offers an intuitive platform for seamless image sharing right from the browser. It leverages an 3rd-party API to host the image and generate shareable links with ease.

It has various uploading methods including drag and drop, manual selection, and copy paste. Uploaded images can then be shared across social media platforms or distributed links. Spreading images is now simply a matter of clicks!

I created this web application as a hobby project to strengthen my Vanilla JS skills and learn several new technologies. Although it is a simple and small project, building Uploadify allowed me to gain experience with:

• JavaScript File API: For handling file uploads client-side
• Clipboard API: For convenient copy and paste functions
• FileReader API: For reading file contents
• ESLint: For consistent, clean code
• Vite: For rapid builds and bundles
• Jest: For unit testing modules
• SCSS: For modular styles with variables, mixins, and nesting
• GitHub Pages: For static hosting
• GitHub Actions: For automatic deployments

• 👉 Converting it to a React application
• 👉 Adding a Node.js backend to replace the 3rd party API
• 👉 Building user registration and file management systems

• Drag & Drop: The upload process is frictionless with drag & drop support. Get your file into Uploadify in seconds by dragging them directly onto the browser window.

• Copy & Paste: Simply copy and paste images directly into Uploadify. With one click, the file uploads and a shareable link is provided.

• Manually Select Image: For full flexibility, images can also be manually selected from your local device.

• Link Copying: Generated links can be easily copied to clipboard via the "Copy" button.

• Upload Progress Tracking: While the image is being uploaded, a progress bar will be shown. This way, you don't have to guess how much longer you need to wait. You can see the progress.

• Upload Cancelation: Cancel an image and start fresh if you have a change of mind.

• Social Media Integrations: Once uploaded, images can be shared directly to top platforms with integrated buttons.

Please check out the code and let me know if you have any feedback!