{"id":16485595,"url":"https://github.com/damikun/react-file-dragdrop","last_synced_at":"2025-05-02T03:30:40.746Z","repository":{"id":112963584,"uuid":"318001548","full_name":"damikun/React-File-DragDrop","owner":"damikun","description":"React file drag-drop component preview for easy file uploads.. Just point it to API and get token / response result","archived":false,"fork":false,"pushed_at":"2020-12-03T11:57:36.000Z","size":848,"stargazers_count":5,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T22:05:31.619Z","etag":null,"topics":["file-drag","file-upload","react-drag-and-drop","react-dropzone","react-file-upload-component","react-file-upload-s3","react-upload","react-uploadfile"],"latest_commit_sha":null,"homepage":"","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/damikun.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}},"created_at":"2020-12-02T21:54:10.000Z","updated_at":"2023-09-30T04:26:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"401964b9-1836-43d9-bf1d-c9254c87e32f","html_url":"https://github.com/damikun/React-File-DragDrop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damikun%2FReact-File-DragDrop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damikun%2FReact-File-DragDrop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damikun%2FReact-File-DragDrop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damikun%2FReact-File-DragDrop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/damikun","download_url":"https://codeload.github.com/damikun/React-File-DragDrop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251981016,"owners_count":21675060,"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","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":["file-drag","file-upload","react-drag-and-drop","react-dropzone","react-file-upload-component","react-file-upload-s3","react-upload","react-uploadfile"],"created_at":"2024-10-11T13:26:24.158Z","updated_at":"2025-05-02T03:30:40.742Z","avatar_url":"https://github.com/damikun.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/damikun/React-File-DragDrop\"\u003e\n  \u003cimg src=\"images/Upload.gif\" alt=\"Example demo\" \u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eReact File Drag-Drop\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n   Preview of file drag drop react component\n  \u003c/p\u003e\n    \u003cp align=\"center\"\u003e\n   This is frontend file dropper include axios under the hood for sending file and receiving its token. Token is used as temporary user and file identifier and is generated by backend app. For frontend component ussage is not necessary, it is just ilustrating the full concept of uploading files for app.\n  \u003c/p\u003e\n  \n\n\u003c/p\u003e\n\n\n\u003c!-- ABOUT --\u003e\n### About full process\n- This repo contains only Frontend component (is a component trim of personal UI lib)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/damikun/React-File-DragDrop\"\u003e\n    \u003cimg src=\"images/fileProcess.png\" alt=\"Example demo\" \u003e\n  \u003c/a\u003e\n  \n  \u003cp align=\"center\"\u003e\n   Custom project file upload process\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\n##### Description\n\nThe image describe simplified version of file upload handling for custom system...\n\nThis componnent helps to push file over API to backend to get tmp file token which is used to commit file using form...\n\n##### Concepts\n- Just poit it to API and get result\n- Self managed component\n- Ability to cancle request in flight\n- Process indicator\n- Validate file types on drop based on \"accept\" input string\n\n##### Other\n- Using Tailwind you can style it in your way\n- Using PurgeCss by default\n- Using functional components and hooks\n\n### Installation\n\n1. Clone the repo\n   ```sh\n   git clone https://github.com/damikun/React-File-DragDrop.git\n   ```\n2. CD to project dir\n   ```sh\n   cd .\\File-DragDropper\\\n   ```\n3. Restore packages\n   ```\n   yarn install\n   ```\n4. Build and run demo\n   ```\n   yarn run start\n   ```\n   \n\u003c!-- USAGE EXAMPLES --\u003e\n### Configuration API\n\n   ```js\n    \u003cFileDragDrop\n      className=\"text-gray-600\"\n      accept=\"image/png\"\n      multiple={false}\n      api_url=\"https://localhost:5001/api/Data/UploadFile\"\n\n      onSuccess={(token, response) =\u003e {\n        setstate(token);\n      }}\n\n      onError={(type, message, object) =\u003e {\n        window.alert(`Type: ${type}, Messagbe: ${type}, Object: ${object}`)   \n        if (type === \"Exception\") console.log(object);\n        setstate(\"\");\n      }}\n    /\u003e\n   ```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamikun%2Freact-file-dragdrop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdamikun%2Freact-file-dragdrop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamikun%2Freact-file-dragdrop/lists"}