cloudinary-jquery-file-upload
Advanced tools
Comparing version 2.12.3 to 2.13.0
@@ -242,3 +242,3 @@ export as namespace cloudinary; | ||
| variables(value: Array<[string, any]>): Transformation; | ||
| videoCodec(value: string | Object): Transformation; // Select the video codec and control the video content of the profile used. Can be provided in the form <codec>[:<profile>:[<level>]] to specify specific values to apply for video codec, profile and level, e.g. "h264:baseline:3.1". Also accepts a hash of values such as { codec: 'h264', profile: 'basic', level: '3.1' } | ||
| videoCodec(value: string | Object): Transformation; // Select the video codec and control the video content of the profile used. Can be provided in the form <codec>[:<profile>:[<level>:[<:b_frames>]]] to specify specific values to apply for video codec, profile, level and b_frames, e.g. "h264:baseline:3.1:bframes_no". Also accepts a hash of values such as { codec: 'h264', profile: 'basic', level: '3.1', b_frames: false } | ||
| videoSampling(value: number | string): Transformation; // Integer - The total number of frames to sample from the original video. String - The number of seconds between each frame to sample from the original video. e.g. 2.3s takes one frame every 2.3 seconds. | ||
@@ -377,3 +377,3 @@ width(value: string | number): Transformation; // Number of pixels, width % or "auto" with rounding step | ||
| streamingProfile?: StreamingProfiles | ||
| videoCodec?: string | Object; // Select the video codec and control the video content of the profile used. Can be provided in the form <codec>[:<profile>:[<level>]] to specify specific values to apply for video codec, profile and level, e.g. "h264:baseline:3.1". Also accepts a hash of values such as { codec: 'h264', profile: 'basic', level: '3.1' } | ||
| videoCodec?: string | Object; // Select the video codec and control the video content of the profile used. Can be provided in the form <codec>[:<profile>:[<level>:[<:b_frames>]]] to specify specific values to apply for video codec, profile, level and b_frames, e.g. "h264:baseline:3.1:bframes_no". Also accepts a hash of values such as { codec: 'h264', profile: 'basic', level: '3.1', b_frames: false } | ||
| videoSampling?: number | string; // Integer - The total number of frames to sample from the original video. The frames are spread out over the length of the video, e.g. 20 takes one frame every 5% -- OR -- String - The number of seconds between each frame to sample from the original video. e.g. 2.3s takes one frame every 2.3 seconds. | ||
@@ -380,0 +380,0 @@ } |
| { | ||
| "name": "cloudinary-jquery-file-upload", | ||
| "version": "2.12.3", | ||
| "version": "2.13.0", | ||
| "description": "Cloudinary Client Side JS library. Cloudinary streamlines your web application’s image manipulation needs. Cloudinary's cloud-based servers automate image uploading, resizing, cropping, optimizing, sprite generation and more. Cloudinary's jQuery File Upload plugin allows direct uploading from the browser to the cloud and dynamic cloud-based image transformations and effects.", | ||
@@ -5,0 +5,0 @@ "main": "cloudinary-jquery-file-upload.js", |
327
README.md
@@ -1,282 +0,109 @@ | ||
| [](https://travis-ci.org/cloudinary/cloudinary_js) []() []() []() | ||
| Cloudinary jQuery File Upload Plugin | ||
| ======================================= | ||
| # Cloudinary jQuery Plugin with file upload - bower and npm repository | ||
| ## About | ||
| The Cloudinary jQuery File Upload plugin allows you to effortlessly upload assets to your cloud. | ||
| Cloudinary is a cloud service that offers a solution to a web application's entire image management pipeline. | ||
| #### Note | ||
| This Readme provides basic installation and usage information. | ||
| For the complete documentation, see the [JQuery SDK Guide](https://cloudinary.com/documentation/jquery_integration). | ||
| Easily upload images to the cloud. Automatically perform smart image resizing, cropping and conversion without installing any complex software. Integrate Facebook or Twitter profile image extraction in a snap, in any dimension and style to match your website’s graphics requirements. Images are seamlessly delivered through a fast CDN, and much much more. | ||
| Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with any web application, existing or new. | ||
| ## Table of Contents | ||
| - [Key Features](#key-features) | ||
| - [Browser Support](#Browser-Support) | ||
| - [Installation](#installation) | ||
| - [Usage](#usage) | ||
| - [Setup](#Setup) | ||
| - [File upload](#File-upload) | ||
| - [Contributions](#Contributions) | ||
| - [About Cloudinary](#About-Cloudinary) | ||
| - [Additional Resources](#Additional-Resources) | ||
| - [Licence](#Licence) | ||
| Cloudinary provides URL and HTTP based APIs that can be easily integrated with any Web development framework. | ||
| ## Key Features | ||
| - [Upload](https://cloudinary.com/documentation/jquery_image_and_video_upload) assets. | ||
| For Javascript, Cloudinary provides a jQuery plugin for simplifying the integration even further. | ||
| ## Browser Support | ||
| Chrome, Safari, Firefox, IE 11 | ||
| The direct image upload feature of the plugin is based on https://github.com/blueimp/jQuery-File-Upload | ||
| ## Getting started guide | ||
|  **Take a look at our [Getting started guide for jQuery](http://cloudinary.com/documentation/jquery_integration#getting_started_guide)**. | ||
| ## Installation | ||
| ### bower | ||
| 1. Install the files using the following command. Use the optional `--save` parameter if you wish to save the dependency in your bower.json file. | ||
| ```shell | ||
| bower install cloudinary-jquery-file-upload | ||
| ``` | ||
| 1. Include the javascript file in your HTML. For Example: | ||
| ```html | ||
| <script src="bower_components/jquery/dist/jquery.js" type="text/javascript"></script> | ||
| <script src="bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js" type="text/javascript"></script> | ||
| <script src="bower_components/blueimp-file-upload/js/jquery.iframe-transport.js" type="text/javascript"></script> | ||
| <script src="bower_components/blueimp-file-upload/js/jquery.fileupload.js" type="text/javascript"></script> | ||
| <script src="bower_components/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js" type="text/javascript"></script> | ||
| ``` | ||
| ### NPM | ||
| 1. Install the files using the following commands. Use the optional `--save` parameter if you wish to save the dependency in your `package.json` file. | ||
| ```shell | ||
| npm install jquery | ||
| npm install blueimp-file-upload | ||
| npm install cloudinary-jquery-file-upload | ||
| ``` | ||
| 1. Include the javascript file in your HTML. For Example: | ||
| ```html | ||
| <script src="node_modules/jquery/dist/jquery.js" type="text/javascript"></script> | ||
| <script src="node_modules/blueimp-file-upload/js/vendor/jquery.ui.widget.js" type="text/javascript"></script> | ||
| <script src="node_modules/blueimp-file-upload/js/jquery.iframe-transport.js" type="text/javascript"></script> | ||
| <script src="node_modules/blueimp-file-upload/js/jquery.fileupload.js" type="text/javascript"></script> | ||
| <script src="node_modules/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js"></script> | ||
| ``` | ||
| For the server side NPM library, refer to https://github.com/cloudinary/cloudinary_npm. | ||
| ## Setup | ||
| In order to properly use this library you have to provide it with a few configuration parameters: | ||
| Required: | ||
| * `cloud_name` - The cloudinary cloud name associated with your Cloudinary account. | ||
| Optional: | ||
| * `private_cdn`, `secure_distribution`, `cname`, `cdn_subdomain` - Please refer to [Cloudinary Documentation](http://cloudinary.com/documentation/rails_additional_topics#configuration_options) for information on these parameters. | ||
| To set these configuration parameters use the `Cloudinary::config` function (see below). | ||
| Note: | ||
| When loading the jQuery Cloudinary library directly (using a `script` tag), the library automatically converts the relevant fileupload tags to utilize the upload functionality. If jquery.cloudinary is loaded as an [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md) however, you need to initialize the Cloudinary fileupload fields e.g., by calling `$("input.cloudinary-fileupload[type=file]").cloudinary_fileupload();` | ||
| ## Usage | ||
| The following blog post details the process of setting up a jQuery based file upload. | ||
| http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery | ||
| The Cloudinary Documentation can be found at: | ||
| http://cloudinary.com/documentation | ||
| ### Cloudinary JavaScript library | ||
| The Cloudinary JavaScript library API reference can be found at: [https://cloudinary.github.io/pkg-cloudinary-jquery-file-upload](https://cloudinary.github.io/pkg-cloudinary-jquery-file-upload) | ||
| The Cloudinary JavaScript library provides several classes, defined under the "`cloudinary`" domain. | ||
| #### Configuration | ||
| Start by instantiating a new Cloudinary class: | ||
| ##### As jQuery plugin | ||
| An instance of the Cloudinary jQuery main class, `CloudinaryJQuery`, is instantiated as `$.cloudinary`. | ||
| ```javascript | ||
| $.cloudinary.config({ cloud_name: "demo"}); | ||
| #### Install the package using: | ||
| ```bash | ||
| npm install cloudinary-jquery cloudinary-jquery-file-upload blueimp-file-upload | ||
| ``` | ||
| ##### Explicitly | ||
| ```javascript | ||
| var cl = cloudinary.CloudinaryJQuery.new( { cloud_name: "demo"}); | ||
| Or | ||
| ```bash | ||
| yarn add cloudinary-jquery cloudinary-jquery-file-upload blueimp-file-upload | ||
| ``` | ||
| ##### Using the config function | ||
| ## Usage | ||
| ### Setup | ||
| 1. Include the javascript files in your HTML. For Example: | ||
| ```javascript | ||
| // Using the config function | ||
| var cl = cloudinary.CloudinaryJQuery.new(); | ||
| cl.config( "cloud_name", "demo"); | ||
| ``` | ||
| ##### From meta tags in the current HTML document | ||
| When using the library in a browser environment, you can use meta tags to define the configuration options. | ||
| The `init()` function is a convenience function that invokes both `fromDocument()` and `fromEnvironment()`. | ||
| For example, add the following to the header tag: | ||
| ```html | ||
| <meta name="cloudinary_cloud_name" content="demo"> | ||
| <script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script> | ||
| <script src="node_modules/blueimp-file-upload/js/vendor/jquery.ui.widget.js" type="text/javascript"></script> | ||
| <script src="node_modules/blueimp-file-upload/js/jquery.iframe-transport.js" type="text/javascript"></script> | ||
| <script src="node_modules/blueimp-file-upload/js/jquery.fileupload.js" type="text/javascript"></script> | ||
| <script src="node_modules/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.min.js" type="text/javascript"></script> | ||
| ``` | ||
| In your JavaScript source, invoke `fromDocument()`: | ||
| #### Configuration | ||
| 1. Configure cloudinary-jquery | ||
| ```javascript | ||
| var cl = cloudinary.Cloudinary.new(); | ||
| cl.fromDocument(); | ||
| // or | ||
| cl.init(); | ||
| $.cloudinary.config({ cloud_name: "demo"}); | ||
| ``` | ||
| [See more ways to configure cloudinary-jquery](https://github.com/cloudinary/cloudinary_js/tree/master/pkg/cloudinary-jquery#there-are-several-ways-to-configure-cloudinary-jquery) | ||
| ##### From environment variables | ||
| When using the library in a backend environment such as NodeJS, you can use an environment variable to define the configuration options. | ||
| Set the environment variable, for example: | ||
| ```shell | ||
| export CLOUDINARY_URL=cloudinary://demo | ||
| ``` | ||
| In your JavaScript source, invoke `fromEnvironment()`: | ||
| ```javascript | ||
| var cl = cloudinary.Cloudinary.new(); | ||
| cl.fromEnvironment(); | ||
| // or | ||
| cl.init(); | ||
| ``` | ||
| #### URL generation | ||
| ```javascript | ||
| cl.url("sample") | ||
| // "http://res.cloudinary.com/demo/image/upload/sample" | ||
| cl.url( "sample", { width: 100, crop: "fit"}) | ||
| // "http://res.cloudinary.com/demo/image/upload/c_fit,w_100/sample" | ||
| ``` | ||
| #### HTML tag generation | ||
| You can generate HTML tags in several ways: | ||
| `Cloudinary::image()` generates a DOM tag, and prepares it for responsive functionality. This is the same functionality as `$.cloudinary.image()`. (When using the jQuery plugin, the `src-cache` data attribute is stored using jQuery's `data()` method and so is not visible.) | ||
| ```javascript | ||
| cl.image("sample") | ||
| ``` | ||
| produces: | ||
| 2. Add a file input tag | ||
| ```html | ||
| <img src="http://res.cloudinary.com/demo/image/upload/sample"> | ||
| <input | ||
| name="file" | ||
| type="file" | ||
| class="cloudinary-fileupload" | ||
| data-cloudinary-field="image_id" | ||
| data-form-data="{ "upload_preset": "user_upload1", | ||
| "callback": "https://www.example.com/cloudinary_cors.html"}" | ||
| /> | ||
| ``` | ||
| You can generate an image Tag using the `imageTag` function: | ||
| ### File upload | ||
| [See full documentation](https://cloudinary.com/documentation/jquery_image_and_video_upload#direct_uploading_from_the_browser) including [upload events](https://cloudinary.com/documentation/jquery_image_and_video_upload#upload_events) and [image validation before upload](https://cloudinary.com/documentation/jquery_image_and_video_upload#client_side_image_validation_before_upload) | ||
| ```javascript | ||
| var tag = cl.imageTag("sample"); | ||
| tag.toHtml(); | ||
| ``` | ||
| which produces: | ||
| ```html | ||
| <img src="http://res.cloudinary.com/demo/image/upload/sample"> | ||
| ``` | ||
| and: | ||
| ```javascript | ||
| tag.transformation().crop("fit").width(100).toHtml(); | ||
| ``` | ||
| which produces: | ||
| ```html | ||
| <img src="http://res.cloudinary.com/demo/image/upload/c_fit,w_100/sample"> | ||
| ``` | ||
| #### Initiate the file input field | ||
| You can also use `ImageTag` independently: | ||
| ```javascript | ||
| var tag = cloudinary.ImageTag.new( "sample", { cloud_name: "some_other_cloud" }); | ||
| tag.toHtml(); | ||
| $(document).ready(function() { | ||
| if($.fn.cloudinary_fileupload !== undefined) { | ||
| $("input.cloudinary-fileupload[type=file]").cloudinary_fileupload(); | ||
| } | ||
| }); | ||
| ``` | ||
| which produces: | ||
| ```html | ||
| <img src="http://res.cloudinary.com/some_other_cloud/image/upload/sample"> | ||
| ``` | ||
| ## Contributions | ||
| - Ensure tests run locally (```npm run test```) | ||
| - Open a PR and ensure Travis tests pass | ||
| #### Transformation | ||
| ## Get Help | ||
| If you run into an issue or have a question, you can either: | ||
| - [Open a Github issue](https://github.com/Cloudinary/cloudinary_js/issues) (for issues related to the SDK) | ||
| - [Open a support ticket](https://cloudinary.com/contact) (for issues related to your account) | ||
| In addition to using a plain object to define transformations or using the builder methods (both described above), you can define transformations by using the Transformation class: | ||
| ## About Cloudinary | ||
| Cloudinary is a powerful media API for websites and mobile apps alike, Cloudinary enables developers to efficiently manage, transform, optimize, and deliver images and videos through multiple CDNs. Ultimately, viewers enjoy responsive and personalized visual-media experiences—irrespective of the viewing device. | ||
| ```javascript | ||
| var tr = cloudinary.Transformation.new(); | ||
| tr.crop("fit").width(100); | ||
| tr.serialize() | ||
| // "c_fit,w_100" | ||
| ``` | ||
| ## Additional Resources | ||
| - [Cloudinary Transformation and REST API References](https://cloudinary.com/documentation/cloudinary_references): Comprehensive references, including syntax and examples for all SDKs. | ||
| - [MediaJams.dev](https://mediajams.dev/): Bite-size use-case tutorials written by and for Cloudinary Developers | ||
| - [DevJams](https://www.youtube.com/playlist?list=PL8dVGjLA2oMr09amgERARsZyrOz_sPvqw): Cloudinary developer podcasts on YouTube. | ||
| - [Cloudinary Academy](https://training.cloudinary.com/): Free self-paced courses, instructor-led virtual courses, and on-site courses. | ||
| - [Code Explorers and Feature Demos](https://cloudinary.com/documentation/code_explorers_demos_index): A one-stop shop for all code explorers, Postman collections, and feature demos found in the docs. | ||
| - [Cloudinary Roadmap](https://cloudinary.com/roadmap): Your chance to follow, vote, or suggest what Cloudinary should develop next. | ||
| - [Cloudinary Facebook Community](https://www.facebook.com/groups/CloudinaryCommunity): Learn from and offer help to other Cloudinary developers. | ||
| - [Cloudinary Account Registration](https://cloudinary.com/users/register/free): Free Cloudinary account registration. | ||
| - [Cloudinary Website](https://cloudinary.com): Learn about Cloudinary's products, partners, customers, pricing, and more. | ||
| You can also chain transformations together: | ||
| ```javascript | ||
| var tr = cloudinary.Transformation.new(); | ||
| tr.width(10).crop('fit').chain().angle(15).serialize() | ||
| // "c_fit,w_10/a_15" | ||
| ``` | ||
| ### jQuery plugin | ||
| This Cloudinary jQuery plugin is fully backward compatible with the previous [cloudinary_js](https://github.com/cloudinary/cloudinary_js) version. | ||
| When loaded, the new JavaScript library instantiates a CloudinaryJQuery object and attaches it to jQuery. | ||
| The following list includes a sample of the API provided by this library: | ||
| * `$.cloudinary.config(parameter_name, parameter_value)` - Sets parameter\_name's value to parameter\_value. | ||
| * `$.cloudinary.url(public_id, options)` - Returns a cloudinary URL based on your configuration and the given options. | ||
| * `$.cloudinary.image(public_id, options)` - Returns an HTML image tag for the photo specified by public\_id | ||
| * `$.cloudinary.facebook_profile_image`, `$.cloudinary.twitter_profile_image`, `$.cloudinary.twitter_name_profile_image`, `$.cloudinary.gravatar_image` , `$.cloudinary.fetch_image` - Same as `image` but returns a specific type of image. | ||
| * `$(jquery_selector).cloudinary(options)` - Goes over the elements specified by the jQuery selector and changes all the images to be fetched using Cloudinary's CDN. Using options, you can also specify transformations to the images. | ||
| The `options` parameters are similar across all cloudinary frameworks. Please refer to [jQuery image manipulation](http://cloudinary.com/documentation/jquery_image_manipulation) for a more complete reference regarding the options. | ||
|  **See [our documentation](http://cloudinary.com/documentation/jquery_image_manipulation) for more information about displaying and transforming images using jQuery**. | ||
| ### Other Cloudinary JavaScript libraries | ||
| #### Core Javascript library | ||
| The Core Cloudinary JavaScript library does not depend on jQuery: https://github.com/cloudinary/pkg-cloudinary-core. | ||
| #### jQuery plugin | ||
| If you are using jQuery, but are not using the *Blueimp File Upload library* you can take advantage of the Cloudinary jQuery plugin at https://github.com/cloudinary/pkg-cloudinary-jquery. | ||
| ## Additional resources | ||
| Additional resources are available at: | ||
| * [Website](http://cloudinary.com) | ||
| * [Documentation](http://cloudinary.com/documentation) | ||
| * [Knowledge Base](http://support.cloudinary.com/forums) | ||
| * [Documentation for jQuery integration](http://cloudinary.com/documentation/jquery_integration) | ||
| * [jQuery image upload documentation](http://cloudinary.com/documentation/jquery_image_upload) | ||
| * [jQuery image manipulation documentation](http://cloudinary.com/documentation/jquery_image_manipulation) | ||
| * [Image transformations documentation](http://cloudinary.com/documentation/image_transformations) | ||
| ## Support | ||
| You can [open an issue through GitHub](https://github.com/cloudinary/cloudinary_js/issues). | ||
| Contact us at [http://cloudinary.com/contact](http://cloudinary.com/contact). | ||
| Stay tuned for updates, tips and tutorials: [Blog](http://cloudinary.com/blog), [Twitter](https://twitter.com/cloudinary), [Facebook](http://www.facebook.com/Cloudinary). | ||
| ## License | ||
| ## Licence | ||
| Released under the MIT license. |
@@ -106,7 +106,7 @@ import Expression from './expression'; | ||
| * @param {(string|Object)} param - the video codec as either a String or a Hash | ||
| * @return {string} the video codec string in the format codec:profile:level | ||
| * @return {string} the video codec string in the format codec:profile:level:b_frames | ||
| * @example | ||
| * vc_[ :profile : [level]] | ||
| * vc_[ :profile : [level : [b_frames]]] | ||
| * or | ||
| { codec: 'h264', profile: 'basic', level: '3.1' } | ||
| { codec: 'h264', profile: 'basic', level: '3.1', b_frames: false } | ||
| * @ignore | ||
@@ -125,2 +125,5 @@ */ | ||
| video += ":" + param.level; | ||
| if ('b_frames' in param && param.b_frames === false) { | ||
| video += ":bframes_no"; | ||
| } | ||
| } | ||
@@ -275,3 +278,3 @@ } | ||
| } | ||
| return value; | ||
| return Expression.normalize(value); | ||
| } | ||
@@ -278,0 +281,0 @@ } |
@@ -380,3 +380,7 @@ import Transformation from './transformation'; | ||
| } | ||
| if (options.auth_token) { | ||
| let appender = resultUrl.indexOf('?') >= 0 ? '&' : '?'; | ||
| resultUrl = `${resultUrl}${appender}__cld_token__=${options.auth_token}`; | ||
| } | ||
| return resultUrl; | ||
| }; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
New alerts
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Fixed alerts
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.1%
13929
Worsened metrics
- Total package byte prevSize
- decreased by-0.42%
1003431
- Number of lines in readme file
- decreased by-61.13%
110
- Number of low supply chain risk alerts
- increased by50%
6
No dependency changes