{"id":13398127,"url":"https://github.com/uploadcare/uploadcare-widget","last_synced_at":"2025-04-08T08:10:49.657Z","repository":{"id":4564365,"uuid":"5705577","full_name":"uploadcare/uploadcare-widget","owner":"uploadcare","description":"Uploadcare Widget, an ultimate tool for HTML5 file upload supporting multiple file upload, drag\u0026drop, validation by file size/file extension/MIME file type, progress bar for file uploads, image preview.","archived":false,"fork":false,"pushed_at":"2024-10-03T15:50:08.000Z","size":11070,"stargazers_count":229,"open_issues_count":30,"forks_count":101,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-03-21T23:35:15.051Z","etag":null,"topics":["dialog","file","file-upload","file-validation","filepicker","files","image","image-upload","images","store","upload","uploadcare","uploader","validation","widget"],"latest_commit_sha":null,"homepage":"https://uploadcare.com/products/file_uploader/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uploadcare.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"AUTHORS.txt","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2012-09-06T17:07:04.000Z","updated_at":"2025-01-29T11:28:55.000Z","dependencies_parsed_at":"2024-01-13T19:26:39.265Z","dependency_job_id":"691fbc95-308c-4a67-b062-1ed846b94324","html_url":"https://github.com/uploadcare/uploadcare-widget","commit_stats":{"total_commits":2842,"total_committers":77,"mean_commits":36.90909090909091,"dds":0.6590429275158339,"last_synced_commit":"e8edb906843c7f81c999952705ee67e8d2793aa5"},"previous_names":[],"tags_count":266,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uploadcare%2Fuploadcare-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uploadcare%2Fuploadcare-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uploadcare%2Fuploadcare-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uploadcare%2Fuploadcare-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uploadcare","download_url":"https://codeload.github.com/uploadcare/uploadcare-widget/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247801155,"owners_count":20998338,"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":["dialog","file","file-upload","file-validation","filepicker","files","image","image-upload","images","store","upload","uploadcare","uploader","validation","widget"],"created_at":"2024-07-30T19:00:17.631Z","updated_at":"2025-04-08T08:10:49.544Z","avatar_url":"https://github.com/uploadcare.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","CoffeeScript"],"sub_categories":[],"readme":"# Uploadcare jQuery File Uploader\n\n## ⚠️ Notice: File Uploader Option\n\n**This jQuery-based uploader remains fully functional and can be a great fit for your projects, especially if you have specific needs for jQuery. However, we recommend exploring our new web component-based [File Uploader](https://github.com/uploadcare/file-uploader?tab=readme) to access the latest features and improvements.**\n\n---\n\n\u003ca href=\"https://uploadcare.com/?utm_source=github\u0026utm_campaign=uploadcare-widget\"\u003e\n    \u003cimg align=\"right\" width=\"64\" height=\"64\"\n         src=\"https://ucarecdn.com/2f4864b7-ed0e-4411-965b-8148623aa680/uploadcare-logo-mark.svg\"\n         alt=\"\"\u003e\n\u003c/a\u003e\n\njQuery File Uploader is a part of the [Uploadcare][uc-home]\nfile handling platform.\n\n[![NPM version][badge-npm-img]][badge-npm-url]\n[![Build Status][badge-github-img]][badge-github-url]\n[![Uploadcare stack on StackShare][badge-stack-img]][badge-stack-url]\n\nUploads affect your web or mobile app performance. The widget ensures you\nintegrate file uploading into your product in minutes, no matter the development\nstack.\n\nThe widget features:\n\n* Drag\u0026Drop selection.\n* Over a dozen [upload sources][uc-docs-widget-sources] including social media\n  and cloud storage providers.\n* Multiple file upload with individual progress bars.\n* File moderation through validation by file size, extension or MIME type.\n* Image preview and image crop.\n* [Libraries and integrations][uc-libs] for JavaScript, PHP, Python, Java,\n  Django, Ruby on Rails, Angular, and more.\n* 20+ languages, [learn more][uc-docs-widget-locales].\n\nWe provide the uploading widget as a typical JavaScript library; it can be easily\nembedded in your site.\n\nUsing the older `2.x` version? Check out the stuff under the\n[v2 tag][github-branch-v2].\n\n\u003ca href=\"https://uploadcare.com/widget/configure/\" title=\"Play with the widget\"\u003e\n  \u003cimg src=\"https://ucarecdn.com/021e5297-c1c4-43d4-97fc-6de7dd97c856/\"\n       width=\"888\" alt=\"Widget in action\"\u003e\n\u003c/a\u003e\n\n---\n\n\u003c!-- toc --\u003e\n\n* [Docs](#docs)\n  * [Quick references](#quick-references)\n* [Types of bundles](#types-of-bundles)\n* [Install](#install)\n  * [NPM](#npm)\n  * [CDN](#cdn)\n  * [Other install methods](#other-install-methods)\n* [Usage](#usage)\n  * [Usage with React](#usage-with-react)\n  * [Usage with Angular](#usage-with-angular)\n* [Configuration](#configuration)\n* [JavaScript API](#javascript-api)\n* [Localization](#localization)\n* [Browser Support](#browser-support)\n* [Development](#development)\n* [Security issues](#security-issues)\n* [Feedback](#feedback)\n\n\u003c!-- tocstop --\u003e\n\n## Docs\n\nSee the complete widget docs [here][uc-docs-widget].\nIf you're looking for the widget v2 docs, check out [here][uc-docs-widget-v2].\n\n### Quick references\n\n* [JavaScript API][uc-docs-widget-js-api]\n* [Live widget config][uc-widget-configurator]\n* [In-browser image editing][uc-features-effects-tab]\n* [Libraries, plugins and integrations][uc-docs-libs]\n* Tutorials\n  * [Visual tweaks][uc-docs-widget-visual-tweaks]\n  * [File validation][uc-docs-widget-validation]\n  * [Widget customization][uc-docs-widget-styling]\n  * [Advanced topics][uc-guides-advanced]\n* [Migration guide from v2 to v3][uc-docs-widget-migration-v2-v3]\n\n## Types of bundles\n\nThere are a few types of JS bundles:\n\n* `uploadcare.full.js` — a full bundle with built-in jQuery.\n* `uploadcare.js` — a bundle without built-in jQuery.\n* `uploadcare.api.js` — a bundle without UI of the widget and built-in jQuery\n  [JavaScript API][uc-docs-widget-js-api] only.\n* `uploadcare.lang.en.js` — a bundle without built-in jQuery, `en` locale only.\n\nEach bundle has its minified version. Just add `.min` before `.js`,\ne.g. `uploadcare.min.js`.\n\nBy default, `uploadcare.js` is exported for npm and other package managers.\n\n## Install\n\nYou’re free to choose from the install methods listed below.\n\n### NPM\n\n```bash\nnpm install uploadcare-widget\n```\n\n```javascript\nimport uploadcare from 'uploadcare-widget'\n```\n\n### CDN\n\nEmbed our client library via the `\u003cscript\u003e` tag in the `\u003chead\u003e`\nsection of each page where you’d like to use the uploading widget.\nHere is the CDN link to the current widget version with built-in jQuery,\n\n```html\n\u003cscript src=\"https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\n\nOr, if you’re already using jQuery on your page, consider loading\nthe light version of the widget: without built-in jQuery,\n\n```html\n\u003cscript src=\"https://code.jquery.com/jquery-3.4.1.min.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://ucarecdn.com/libs/widget/3.x/uploadcare.min.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\n\n### Other install methods\n\nCheck out the widget [docs][uc-docs-widget-install]\nfor more install methods.\n\n## Usage\n\nOnce you’re done with the install, there are\ntwo simple steps to take to use the widget.\n\n**Set your [public key][uc-docs-widget-options-public-key]**.\nThis can also sit in the `\u003chead\u003e` section,\n\n```html\n\u003cscript\u003e\n  UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';\n\u003c/script\u003e\n```\n\nYour secret key is not required for the widget; (it’s quite careless for your\npage to include any secret keys anyway.\n\n**Insert widget element** into your form,\n\n```html\n\u003cinput type=\"hidden\" role=\"uploadcare-uploader\" name=\"my_file\" /\u003e\n```\n\nBy default, the library looks for inputs with the specified\n`role` attribute and places widgets there.\nOnce a file is uploaded, this `\u003cinput\u003e` gets a\nCDN link with a file UUID. Your server then\nreceives this link, not file content.\n\nWe suggest placing the widget somewhere at the top of your form.\nUnlike regular inputs, our widget starts uploading files **immediately**\nafter they get selected by a user, not on form submission.\nThat way users can fill out the rest of your form while an\nupload is in progress. This can be a real time saver.\n\n### Usage with React\n\nCheck out our [React component](https://github.com/uploadcare/react-widget/)\nfor jQuery File Uploader.\n\n### Usage with Angular\n\nCheck out our\n[Angular 2+ wrapper](https://www.npmjs.com/package/ngx-uploadcare-widget) for\njQuery File Uploader.\n\n[angular-uploadcare](https://github.com/uploadcare/angular-uploadcare) can be\nused with Angular 1.\n\n## Configuration\n\nThe widget is highly customizable with widget options. Check out the existing\noptions and ways to set them in UC\n[docs][uc-docs-widget-config].\n\n## JavaScript API\n\nYou might not want to use all the features that\n[our widget][uc-docs-widget] exhibits.\nOr, perhaps, you might want to redesign the user experience\nwithout having to reinvent the wheel.\nMaybe, you're in pursuit of building a UI on top of the widget.\nFor all of those use cases, we provide a\n[JavaScript API][uc-docs-widget-js-api].\nFeel free to control the default widget with it,\nor make use of its standalone components that\ncan be combined with your solutions.\n\n### UploadClient\n\nIf you want to use Upload API directly and don't need a widget, try [upload-client][github-upload-client] — a 7.3 kB JS library for uploading files.\n\n## Localization\n\nIt’s possible that your locale is not available in the widget yet.\nIf that’s the case, contributing your locale might be a good idea.\nThis can be done by forking the [main repository][github-home]\nand adding a localization file [here][github-files-locales].\n\nUntil that you can use [`UPLOADCARE_LOCALE_TRANSLATIONS`][uc-docs-widget-options-locale-translations]\nproperty to use your locale immediately.\n\n## Browser Support\n\nThe widget should work perfectly in a couple of the latest versions\nof major desktop browsers: Internet Explorer, Edge, Firefox, Google Chrome,\nSafari, and Opera. It is most likely to run well in older versions\nof major browser too, except for Internet Explorer \u003c 10.\n\nIf you need the support for older browsers including IE8, consider using\n[the widget v2][github-branch-v2] instead.\n\n\u003cdiv\u003e\n  \u003ctable\u003e\n    \u003cthead\u003e\n      \u003ctr\u003e\n        \u003cth\u003eDesktop\u003c/th\u003e\n        \u003cth\u003eMobile\u003c/th\u003e\n      \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n      \u003ctr\u003e\n        \u003ctd\u003eChrome: 37+\u003c/td\u003e\n        \u003ctd\u003eAndroid Browser: 4.4+\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003eFirefox: 32+\u003c/td\u003e\n        \u003ctd\u003eOpera Mobile: 8+\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003eSafari: 9+\u003c/td\u003e\n        \u003ctd\u003eiOS Safari: 9+\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003eEdge: 12+\u003c/td\u003e\n        \u003ctd\u003eIE Mobile: 11+\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003eIE: 10+\u003c/td\u003e\n        \u003ctd\u003eOpera Mini: Last\u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n## Development\n\nCheck out jQuery File Uploader [development guide][github-files-development].\n\n## Security issues\n\nIf you think you ran into something in Uploadcare libraries which might have\nsecurity implications, please hit us up at [bugbounty@uploadcare.com][uc-email-bounty]\nor Hackerone.\n\nWe'll contact you personally in a short time to fix an issue through co-op and\nprior to any public disclosure.\n\n## Feedback\n\nIssues and PRs are welcome. You can provide your feedback or drop us a support\nrequest at [hello@uploadcare.com][uc-email-hello].\n\n[badge-npm-img]: http://img.shields.io/npm/v/uploadcare-widget.svg\n[badge-npm-url]: https://www.npmjs.org/package/uploadcare-widget\n[badge-github-img]: https://github.com/uploadcare/uploadcare-widget/actions/workflows/checks.yml/badge.svg\n[badge-github-url]: https://github.com/uploadcare/uploadcare-widget/actions/workflows/checks.yml\n[badge-stack-img]: https://img.shields.io/badge/tech-stack-0690fa.svg?style=flat\n[badge-stack-url]: https://stackshare.io/uploadcare/stacks/\n[github-branch-v2]: https://github.com/uploadcare/uploadcare-widget/tree/v2\n[github-home]: https://github.com/uploadcare/uploadcare-widget\n[github-files-locales]: https://github.com/uploadcare/uploadcare-widget/tree/master/src/locales\n[github-files-development]: https://github.com/uploadcare/uploadcare-widget/blob/master/DEVELOPMENT.md\n[github-upload-client]: https://github.com/uploadcare/uploadcare-upload-client\n[uc-email-bounty]: mailto:bugbounty@uploadcare.com\n[uc-email-hello]: mailto:hello@uploadcare.com\n[uc-libs]: https://uploadcare.com/docs/libs/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-home]: https://uploadcare.com/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-features-effects-tab]: https://uploadcare.com/features/effects_tab/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-widget-configurator]: https://uploadcare.com/widget/configure/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-docs-libs]: https://uploadcare.com/docs/libs/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-docs-widget-v2]: https://uploadcare.com/documentation/widget/v2/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-docs-widget]: https://uploadcare.com/docs/uploads/widget/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-docs-widget-js-api]: https://uploadcare.com/docs/api_reference/javascript/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-docs-widget-visual-tweaks]: https://uploadcare.com/docs/uploads/widget/visual_tweaks/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-docs-widget-validation]: https://uploadcare.com/docs/uploads/widget/validation/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-docs-widget-styling]: https://uploadcare.com/docs/uploads/widget/styling/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-docs-widget-migration-v2-v3]: https://uploadcare.com/docs/uploads/widget/migration_v2_v3/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-docs-widget-install]: https://uploadcare.com/docs/uploads/widget/install/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-docs-widget-options-public-key]: https://uploadcare.com/docs/uploads/widget/config/?utm_source=github\u0026utm_campaign=uploadcare-widget#option-public-key\n[uc-docs-widget-options-locale-translations]: https://uploadcare.com/docs/uploads/widget/config/?utm_source=github\u0026utm_campaign=uploadcare-widget#option-locale-translations\n[uc-docs-widget-sources]: https://uploadcare.com/docs/uploads/widget/locales/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-docs-widget-config]: https://uploadcare.com/docs/uploads/widget/config/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-docs-widget-locales]: https://uploadcare.com/docs/uploads/widget/locales/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-docs-widget-v2]: https://uploadcare.com/documentation/widget/v2/?utm_source=github\u0026utm_campaign=uploadcare-widget\n[uc-guides-advanced]: https://uploadcare.com/docs/guides/advanced/?utm_source=github\u0026utm_campaign=uploadcare-widget\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuploadcare%2Fuploadcare-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuploadcare%2Fuploadcare-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuploadcare%2Fuploadcare-widget/lists"}