{"id":19541246,"url":"https://github.com/jonkirathe/drag-drop-upload-app","last_synced_at":"2025-10-11T05:05:34.881Z","repository":{"id":244305112,"uuid":"814847374","full_name":"jonkirathe/drag-drop-upload-app","owner":"jonkirathe","description":"This Angular 18 app is a fun and interactive image upload and preview tool. The app consists of two main components: UploadComponent and PreviewComponent. The UploadComponent allows users to select or drag and drop images for upload.","archived":false,"fork":false,"pushed_at":"2024-09-10T19:52:51.000Z","size":167,"stargazers_count":22,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-20T17:11:38.253Z","etag":null,"topics":["angular","angular18","drag-and-drop","draggable-elements","input-output","material-ui","ng-container","ng-content","ngtemplate","ngtemplateoutlet","signals","zoneless"],"latest_commit_sha":null,"homepage":"https://filedropapp.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonkirathe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-06-13T20:43:47.000Z","updated_at":"2025-04-14T17:56:34.000Z","dependencies_parsed_at":"2024-06-13T23:54:46.474Z","dependency_job_id":"67e8808a-4f77-40b7-adee-484da86073dd","html_url":"https://github.com/jonkirathe/drag-drop-upload-app","commit_stats":null,"previous_names":["jonnykratz/drag-drop-upload-app","jonkirathe/drag-drop-upload-app"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/jonkirathe/drag-drop-upload-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonkirathe%2Fdrag-drop-upload-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonkirathe%2Fdrag-drop-upload-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonkirathe%2Fdrag-drop-upload-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonkirathe%2Fdrag-drop-upload-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonkirathe","download_url":"https://codeload.github.com/jonkirathe/drag-drop-upload-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonkirathe%2Fdrag-drop-upload-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279006333,"owners_count":26084083,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular18","drag-and-drop","draggable-elements","input-output","material-ui","ng-container","ng-content","ngtemplate","ngtemplateoutlet","signals","zoneless"],"created_at":"2024-11-11T03:09:25.041Z","updated_at":"2025-10-11T05:05:34.862Z","avatar_url":"https://github.com/jonkirathe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DragDropUploadApp\n\n[![Love Angular badge](https://img.shields.io/badge/angular-love-blue?logo=angular\u0026angular=love)](https://www.github.com/angular/angular)\n\nLive: [DragDropUploadApp](https://filedropapp.vercel.app/)\n\n## Overview\nDragDropUploadApp is an Angular 18 application designed to provide a seamless and interactive experience for uploading and previewing images. The app leverages Angular's powerful features and the Angular CDK Drag and Drop module to create a user-friendly interface.\n\n## Components\n\n### UploadComponent\n- **Functionality**: Allows users to select or drag and drop images for upload.\n- **Features**:\n  - Drag-and-drop zone.\n  - File input field.\n  - Emits an event when new images are uploaded.\n\n### PreviewComponent\n- **Functionality**: Displays a preview of uploaded images.\n- **Features**:\n  - Utilizes Angular’s CDK Drag and Drop module for rearranging images.\n  - Renders images in a responsive grid layout.\n\n### AppComponent\n- **Functionality**: Manages image state and passes it to the PreviewComponent.\n- **Features**:\n  - Handles image uploads using Angular signals.\n  - Includes placeholder, loading, and defer directives for a better user experience.\n\n## Development\n\n### Development Server\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.\n\n### Code Scaffolding\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n### Build\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n### Running Unit Tests\nRun `ng test` to execute the unit tests via Karma.\n\n### Running End-to-End Tests\nRun `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.\n\n## Additional Information\n\n### Features\n- **Drag and Drop**: Users can drag and drop images for upload.\n- **Responsive Design**: The app is designed to be responsive and works well on various devices.\n- **Image Rearrangement**: Users can rearrange images using drag-and-drop functionality.\n- **State Management**: Efficient state management using Angular signals.\n- **User Experience**: Includes placeholder, loading, and defer directives for a smooth user experience.\n\n### Technologies Used\n- **Angular**: Framework for building the application.\n- **Angular CDK**: For drag-and-drop functionality.\n- **TypeScript**: Primary language for development.\n- **SCSS**: For styling the application.\n\n### Project Structure\n- **src/app**: Contains the main application code.\n  - **components**: Contains the UploadComponent and PreviewComponent.\n  - **services**: Contains services for handling image uploads and state management.\n  - **models**: Contains TypeScript interfaces and models used in the application.\n- **assets**: Contains static assets like images and styles.\n- **environments**: Contains environment-specific configurations.\n\n### Contributing\nIf you would like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome.\n\n### License\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n### Contact\nFor any inquiries or feedback, please contact the project maintainer at [kirathendegwa@gmail.com].\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonkirathe%2Fdrag-drop-upload-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonkirathe%2Fdrag-drop-upload-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonkirathe%2Fdrag-drop-upload-app/lists"}