changed request from 'GET' to 'POST' for signature generation

- generateSignature method now uses 'payload' instead of a stringified
set of params
- this has been changed to better pass through firewalls

README.md

@@ -18,16 +18,16 @@ import { WidgetLoader, Widget } from 'react-cloudinary-upload-widget'
 const Example = () => {
   return (
     <>
-      <WidgetLoader /> // add to top of file. Only use once.  
+      <WidgetLoader /> // add to top of file. Only use once.
       <Widget
         sources={['local', 'camera', 'dropbox']} // set the sources available for uploading -> by default
-        // all sources are available. More information on their use can be found at 
+        // all sources are available. More information on their use can be found at
         // https://cloudinary.com/documentation/upload_widget#the_sources_parameter
-        sourceKeys={{dropboxAppKey: '1dsf42dl1i2', instagramClientId: 'd7aadf962m'}} // add source keys 
-        // and ID's as an object. More information on their use can be found at 
+        sourceKeys={{dropboxAppKey: '1dsf42dl1i2', instagramClientId: 'd7aadf962m'}} // add source keys
+        // and ID's as an object. More information on their use can be found at
         // https://cloudinary.com/documentation/upload_widget#the_sources_parameter
         resourceType={'image'} // optionally set with 'auto', 'image', 'video' or 'raw' -> default = 'auto'
-        cloudName={'example_cloudname'} // your cloudinary account cloud name. 
+        cloudName={'example_cloudname'} // your cloudinary account cloud name.
         // Located on https://cloudinary.com/console/
         uploadPreset={'preset1'} // check that an upload preset exists and check mode is signed or unisgned
         buttonText={'Open'} // default 'Upload Files'
@@ -45,15 +45,15 @@ const Example = () => {
         // more information here on cropping. Coordinates are returned or upload preset needs changing
         multiple={true} // set to false as default. Allows multiple file uploading
         // will only allow 1 file to be uploaded if cropping set to true
-        autoClose={false} // will close the widget after success. Default true 
+        autoClose={false} // will close the widget after success. Default true
         onSuccess={successCallBack} // add success callback -> returns result
         onFailure={failureCallBack} // add failure callback -> returns 'response.error' + 'response.result'
-        logging={false} // logs will be provided for success and failure messages, 
+        logging={false} // logs will be provided for success and failure messages,
         // set to false for production -> default = true
-        customPublicId={'sample'} // set a specific custom public_id. 
+        customPublicId={'sample'} // set a specific custom public_id.
         // To use the file name as the public_id use 'use_filename={true}' parameter
         eager={'w_400,h_300,c_pad|w_260,h_200,c_crop'} // add eager transformations -> deafult = null
-        use_filename={false} // tell Cloudinary to use the original name of the uploaded 
+        use_filename={false} // tell Cloudinary to use the original name of the uploaded
         // file as its public ID -> default = true,
 
         widgetStyles={{
@@ -85,13 +85,13 @@ const Example = () => {
 
         // 👇 FOR SIGNED UPLOADS ONLY 👇
 
-        generateSignatureUrl={'http://my_domain.com/api/v1/media/generate_signature'} // pass the api 
+        generateSignatureUrl={'http://my_domain.com/api/v1/media/generate_signature'} // pass the api
         // endpoint for generating a signature -> check cloudinary docs and SDK's for signing uploads
         apiKey={00000000000000} // cloudinary API key -> number format
         accepts={'application/json'} // for signed uploads only -> default = 'application/json'
         contentType={'application/json'} // for signed uploads only -> default = 'application/json'
         withCredentials={true} // default = true -> check axios documentation for more information
-        unique_filename={true} // setting it to false, you can tell Cloudinary not to attempt to make 
+        unique_filename={true} // setting it to false, you can tell Cloudinary not to attempt to make
         // the Public ID unique, and just use the normalized file name -> default = true
 
       />
@@ -102,14 +102,17 @@ const Example = () => {
 
 ## Example Backend for Signed Uploads (ruby)
 
-example of backend process to create signature for signing uploads to cloudinary. the param 'params_to_sign' will be a json string. Parse this string to create an object/hash. 
-Check cloudinary documentation for more information on signing uploads, generating signatures and the various language specific SDK's available for this process. 
+In the latest release. We have changed from a 'get' request to a 'post' request due to this request being blocked by many WAF's/Firewalls. This means you'll need to change you signature endpoint to a 'post' and potentially change how the params are unpacked.
+
+example of backend process to create signature for signing uploads to cloudinary. The params will need to be turned into a hash in order to work with Cloudinary's sdk.
+
+Check cloudinary documentation for more information on signing uploads, generating signatures and the various language specific SDK's available for this process.
 
 This example is from their ruby SDK
 
 ```ruby
   def generate_signature
-    render json: Cloudinary::Utils.api_sign_request(JSON.parse(params[:params_to_sign]), ENV['CLOUDINARY_SECRET'])
+    render json: Cloudinary::Utils.api_sign_request(params[:params_to_sign]to_unsafe_hash, ENV['CLOUDINARY_SECRET'])
   end
 ```
 

src/functions/generateSignature.js

@@ -11,7 +11,9 @@ const generateSignature = (
     customPublicId,
     eager,
     apiKey,
-    resourceType
+    resourceType,
+    unique_filename,
+    use_filename
   },
   logging
 ) => {
@@ -28,19 +30,19 @@ const generateSignature = (
             ...(req.custom_coordinates && {
               custom_coordinates: req.custom_coordinates
             }),
+            ...(eager && { eager: eager }),
             ...(req.filename_override && {
               filename_override: req.filename_override
             }),
             ...(req.headers && { headers: req.headers }),
-            ...(eager && { eager: eager }),
             ...(customPublicId && { public_id: customPublicId }),
             ...(req.source && { source: req.source }),
             timestamp: req.timestamp,
             unique_filename: req.unique_filename,
             ...(req.upload_preset && {
               upload_preset: req.upload_preset
             }),
-            ...(req.use_filename && { use_filename: req.use_filename })
+            use_filename: use_filename
           }
         },
         accepts: accepts,
@@ -50,6 +52,8 @@ const generateSignature = (
         logging && console.log(response, 'Signature Response')
         return Object.assign(
           {
+            ...(eager && { eager: eager }),
+            ...(customPublicId && { public_id: customPublicId }),
             signature: response,
             api_key: apiKey,
             resource_type: resourceType

src/functions/getterFunction.js

@@ -16,8 +16,8 @@ export const getterFunction = ({
   instance.defaults.withCredentials = withCredentials
   const options = {
     url: url + '?nocache=' + new Date().getTime(),
-    method: 'get',
-    params: data
+    method: 'post',
+    data: data
   }
 
   return instance(options)

src/functions/myWidget.js

@@ -46,6 +46,7 @@ const myWidget = (
         cropping: cropping,
         resourceType: resourceType,
         ...(generateSignatureUrl && { use_filename: use_filename }),
+        ...(generateSignatureUrl && { eager: eager }),
         ...(generateSignatureUrl && { unique_filename: unique_filename }),
         ...(generateSignatureUrl && {
           prepareUploadParams: async (cb, params) =>
@@ -60,7 +61,9 @@ const myWidget = (
                 customPublicId,
                 eager,
                 apiKey,
-                resourceType
+                resourceType,
+                unique_filename,
+                use_filename
               },
               logging
             )