{"id":18980396,"url":"https://github.com/pierreamgabriel/react-images-upload","last_synced_at":"2026-05-18T14:04:59.427Z","repository":{"id":157475827,"uuid":"480101124","full_name":"pierreamgabriel/react-images-upload","owner":"pierreamgabriel","description":"React component to upload images.","archived":false,"fork":false,"pushed_at":"2023-05-08T06:09:11.000Z","size":3058,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-01T11:12:40.431Z","etag":null,"topics":["image-upload","react","react-images-uploading","reactjs","uploader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pierreamgabriel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2022-04-10T18:13:31.000Z","updated_at":"2024-04-08T08:02:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"d4dc812a-e145-4ef0-96e2-ea560e152c79","html_url":"https://github.com/pierreamgabriel/react-images-upload","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"ff6dabc6c95453962cd87965bffe0a54dcf81f59"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreamgabriel%2Freact-images-upload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreamgabriel%2Freact-images-upload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreamgabriel%2Freact-images-upload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreamgabriel%2Freact-images-upload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pierreamgabriel","download_url":"https://codeload.github.com/pierreamgabriel/react-images-upload/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239985694,"owners_count":19729512,"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":["image-upload","react","react-images-uploading","reactjs","uploader"],"created_at":"2024-11-08T16:06:43.672Z","updated_at":"2025-11-11T14:01:58.096Z","avatar_url":"https://github.com/pierreamgabriel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Images Upload\nThis is a React component to upload images. It's easy to use, and it comes with a PHP script to handle the back-end logic.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"demo.jpg\"\u003e\n\u003c/p\u003e\n\n## Installation\nCopy the lib folder and the ImageUpload.js and ImageUpload.css files to the src folder of your project. Copy the upload.php file to the public folder. Create a folder called uploads inside the public folder.\n\nInstall dependencies:\n\n```bash\nnpm install axios @mui/material @emotion/react @emotion/styled\n```\n## Usage\nImport the component in your code:\n\n```javascript\nimport ImageUpload from './ImageUpload';\n```\n### How does it work?\nIt copies any jpg or png image to the uploads folder, and it adds the image URL to the imgList variable in the order it was uploaded. It also shows a preview of all images uploaded with an edit and delete button.\n\n### What do I do with the URL list in the imgList variable?\nYou save the URLs in your database. You'll need to change the code a bit to add your logic.\n\n### How can I apply different styles?\nYou can freely change the code and apply the styles you want.  \n\n### Does it delete and replace images as well?\nIt does, but it won't delete the actual images inside the uploads folder. It'll just update the URL list. \n\n### How can I upload images to a different folder?\nYou need to change the upload.php file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierreamgabriel%2Freact-images-upload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpierreamgabriel%2Freact-images-upload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierreamgabriel%2Freact-images-upload/lists"}