Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/uploadcare/uploadcare-widget

Uploadcare Widget, an ultimate tool for HTML5 file upload supporting multiple file upload, drag&drop, validation by file size/file extension/MIME file type, progress bar for file uploads, image preview.
https://github.com/uploadcare/uploadcare-widget

dialog file file-upload file-validation filepicker files image image-upload images store upload uploadcare uploader validation widget

Last synced: 6 days ago
JSON representation

Uploadcare Widget, an ultimate tool for HTML5 file upload supporting multiple file upload, drag&drop, validation by file size/file extension/MIME file type, progress bar for file uploads, image preview.

Awesome Lists containing this project

README 

        
# Uploadcare jQuery File Uploader



## ⚠️ Notice: File Uploader Option



**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.**



---





    




jQuery File Uploader is a part of the [Uploadcare][uc-home]

file handling platform.



[![NPM version][badge-npm-img]][badge-npm-url]

[![Build Status][badge-github-img]][badge-github-url]

[![Uploadcare stack on StackShare][badge-stack-img]][badge-stack-url]



Uploads affect your web or mobile app performance. The widget ensures you

integrate file uploading into your product in minutes, no matter the development

stack.



The widget features:



* Drag&Drop selection.

* Over a dozen [upload sources][uc-docs-widget-sources] including social media

  and cloud storage providers.

* Multiple file upload with individual progress bars.

* File moderation through validation by file size, extension or MIME type.

* Image preview and image crop.

* [Libraries and integrations][uc-libs] for JavaScript, PHP, Python, Java,

  Django, Ruby on Rails, Angular, and more.

* 20+ languages, [learn more][uc-docs-widget-locales].



We provide the uploading widget as a typical JavaScript library; it can be easily

embedded in your site.



Using the older `2.x` version? Check out the stuff under the

[v2 tag][github-branch-v2].





  Widget in action




---



* [Docs](#docs)

  * [Quick references](#quick-references)

* [Types of bundles](#types-of-bundles)

* [Install](#install)

  * [NPM](#npm)

  * [CDN](#cdn)

  * [Other install methods](#other-install-methods)

* [Usage](#usage)

  * [Usage with React](#usage-with-react)

  * [Usage with Angular](#usage-with-angular)

* [Configuration](#configuration)

* [JavaScript API](#javascript-api)

* [Localization](#localization)

* [Browser Support](#browser-support)

* [Development](#development)

* [Security issues](#security-issues)

* [Feedback](#feedback)



## Docs



See the complete widget docs [here][uc-docs-widget].

If you're looking for the widget v2 docs, check out [here][uc-docs-widget-v2].



### Quick references



* [JavaScript API][uc-docs-widget-js-api]

* [Live widget config][uc-widget-configurator]

* [In-browser image editing][uc-features-effects-tab]

* [Libraries, plugins and integrations][uc-docs-libs]

* Tutorials

  * [Visual tweaks][uc-docs-widget-visual-tweaks]

  * [File validation][uc-docs-widget-validation]

  * [Widget customization][uc-docs-widget-styling]

  * [Advanced topics][uc-guides-advanced]

* [Migration guide from v2 to v3][uc-docs-widget-migration-v2-v3]



## Types of bundles



There are a few types of JS bundles:



* `uploadcare.full.js` — a full bundle with built-in jQuery.

* `uploadcare.js` — a bundle without built-in jQuery.

* `uploadcare.api.js` — a bundle without UI of the widget and built-in jQuery

  [JavaScript API][uc-docs-widget-js-api] only.

* `uploadcare.lang.en.js` — a bundle without built-in jQuery, `en` locale only.



Each bundle has its minified version. Just add `.min` before `.js`,

e.g. `uploadcare.min.js`.



By default, `uploadcare.js` is exported for npm and other package managers.



## Install



You’re free to choose from the install methods listed below.



### NPM



```bash

npm install uploadcare-widget

```



```javascript

import uploadcare from 'uploadcare-widget'

```



### CDN



Embed our client library via the `` tag in the `<head>`

section of each page where you’d like to use the uploading widget.

Here is the CDN link to the current widget version with built-in jQuery,



```html

<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" charset="utf-8">

```



Or, if you’re already using jQuery on your page, consider loading

the light version of the widget: without built-in jQuery,



```html



```



### Other install methods



Check out the widget [docs][uc-docs-widget-install]

for more install methods.



## Usage



Once you’re done with the install, there are

two simple steps to take to use the widget.



**Set your [public key][uc-docs-widget-options-public-key]**.

This can also sit in the `` section,



```html



  UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';



```



Your secret key is not required for the widget; (it’s quite careless for your

page to include any secret keys anyway.



**Insert widget element** into your form,



```html



```



By default, the library looks for inputs with the specified

`role` attribute and places widgets there.

Once a file is uploaded, this `` gets a

CDN link with a file UUID. Your server then

receives this link, not file content.



We suggest placing the widget somewhere at the top of your form.

Unlike regular inputs, our widget starts uploading files **immediately**

after they get selected by a user, not on form submission.

That way users can fill out the rest of your form while an

upload is in progress. This can be a real time saver.



### Usage with React



Check out our [React component](https://github.com/uploadcare/react-widget/)

for jQuery File Uploader.



### Usage with Angular



Check out our

[Angular 2+ wrapper](https://www.npmjs.com/package/ngx-uploadcare-widget) for

jQuery File Uploader.



[angular-uploadcare](https://github.com/uploadcare/angular-uploadcare) can be

used with Angular 1.



## Configuration



The widget is highly customizable with widget options. Check out the existing

options and ways to set them in UC

[docs][uc-docs-widget-config].



## JavaScript API



You might not want to use all the features that

[our widget][uc-docs-widget] exhibits.

Or, perhaps, you might want to redesign the user experience

without having to reinvent the wheel.

Maybe, you're in pursuit of building a UI on top of the widget.

For all of those use cases, we provide a

[JavaScript API][uc-docs-widget-js-api].

Feel free to control the default widget with it,

or make use of its standalone components that

can be combined with your solutions.



### UploadClient



If 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.



## Localization



It’s possible that your locale is not available in the widget yet.

If that’s the case, contributing your locale might be a good idea.

This can be done by forking the [main repository][github-home]

and adding a localization file [here][github-files-locales].



Until that you can use [`UPLOADCARE_LOCALE_TRANSLATIONS`][uc-docs-widget-options-locale-translations]

property to use your locale immediately.



## Browser Support



The widget should work perfectly in a couple of the latest versions

of major desktop browsers: Internet Explorer, Edge, Firefox, Google Chrome,

Safari, and Opera. It is most likely to run well in older versions

of major browser too, except for Internet Explorer < 10.



If you need the support for older browsers including IE8, consider using

[the widget v2][github-branch-v2] instead.





  

    

      

        Desktop

        Mobile

      

    

    

      

        Chrome: 37+

        Android Browser: 4.4+

      

      

        Firefox: 32+

        Opera Mobile: 8+

      

      

        Safari: 9+

        iOS Safari: 9+

      

      

        Edge: 12+

        IE Mobile: 11+

      

      

        IE: 10+

        Opera Mini: Last

      

    

  




## Development



Check out jQuery File Uploader [development guide][github-files-development].



## Security issues



If you think you ran into something in Uploadcare libraries which might have

security implications, please hit us up at [[email protected]][uc-email-bounty]

or Hackerone.



We'll contact you personally in a short time to fix an issue through co-op and

prior to any public disclosure.



## Feedback



Issues and PRs are welcome. You can provide your feedback or drop us a support

request at [[email protected]][uc-email-hello].



[badge-npm-img]: http://img.shields.io/npm/v/uploadcare-widget.svg

[badge-npm-url]: https://www.npmjs.org/package/uploadcare-widget

[badge-github-img]: https://github.com/uploadcare/uploadcare-widget/actions/workflows/checks.yml/badge.svg

[badge-github-url]: https://github.com/uploadcare/uploadcare-widget/actions/workflows/checks.yml

[badge-stack-img]: https://img.shields.io/badge/tech-stack-0690fa.svg?style=flat

[badge-stack-url]: https://stackshare.io/uploadcare/stacks/

[github-branch-v2]: https://github.com/uploadcare/uploadcare-widget/tree/v2

[github-home]: https://github.com/uploadcare/uploadcare-widget

[github-files-locales]: https://github.com/uploadcare/uploadcare-widget/tree/master/src/locales

[github-files-development]: https://github.com/uploadcare/uploadcare-widget/blob/master/DEVELOPMENT.md

[github-upload-client]: https://github.com/uploadcare/uploadcare-upload-client

[uc-email-bounty]: mailto:[email protected]

[uc-email-hello]: mailto:[email protected]

[uc-libs]: https://uploadcare.com/docs/libs/?utm_source=github&utm_campaign=uploadcare-widget

[uc-home]: https://uploadcare.com/?utm_source=github&utm_campaign=uploadcare-widget

[uc-features-effects-tab]: https://uploadcare.com/features/effects_tab/?utm_source=github&utm_campaign=uploadcare-widget

[uc-widget-configurator]: https://uploadcare.com/widget/configure/?utm_source=github&utm_campaign=uploadcare-widget

[uc-docs-libs]: https://uploadcare.com/docs/libs/?utm_source=github&utm_campaign=uploadcare-widget

[uc-docs-widget-v2]: https://uploadcare.com/documentation/widget/v2/?utm_source=github&utm_campaign=uploadcare-widget

[uc-docs-widget]: https://uploadcare.com/docs/uploads/widget/?utm_source=github&utm_campaign=uploadcare-widget

[uc-docs-widget-js-api]: https://uploadcare.com/docs/api_reference/javascript/?utm_source=github&utm_campaign=uploadcare-widget

[uc-docs-widget-visual-tweaks]: https://uploadcare.com/docs/uploads/widget/visual_tweaks/?utm_source=github&utm_campaign=uploadcare-widget

[uc-docs-widget-validation]: https://uploadcare.com/docs/uploads/widget/validation/?utm_source=github&utm_campaign=uploadcare-widget

[uc-docs-widget-styling]: https://uploadcare.com/docs/uploads/widget/styling/?utm_source=github&utm_campaign=uploadcare-widget

[uc-docs-widget-migration-v2-v3]: https://uploadcare.com/docs/uploads/widget/migration_v2_v3/?utm_source=github&utm_campaign=uploadcare-widget

[uc-docs-widget-install]: https://uploadcare.com/docs/uploads/widget/install/?utm_source=github&utm_campaign=uploadcare-widget

[uc-docs-widget-options-public-key]: https://uploadcare.com/docs/uploads/widget/config/?utm_source=github&utm_campaign=uploadcare-widget#option-public-key

[uc-docs-widget-options-locale-translations]: https://uploadcare.com/docs/uploads/widget/config/?utm_source=github&utm_campaign=uploadcare-widget#option-locale-translations

[uc-docs-widget-sources]: https://uploadcare.com/docs/uploads/widget/locales/?utm_source=github&utm_campaign=uploadcare-widget

[uc-docs-widget-config]: https://uploadcare.com/docs/uploads/widget/config/?utm_source=github&utm_campaign=uploadcare-widget

[uc-docs-widget-locales]: https://uploadcare.com/docs/uploads/widget/locales/?utm_source=github&utm_campaign=uploadcare-widget

[uc-docs-widget-v2]: https://uploadcare.com/documentation/widget/v2/?utm_source=github&utm_campaign=uploadcare-widget

[uc-guides-advanced]: https://uploadcare.com/docs/guides/advanced/?utm_source=github&utm_campaign=uploadcare-widget