Cloudinary widget support for JWT token

src/components/UploadWidget.js

@@ -14,6 +14,7 @@ const UploadWidget = ({
   folder = null,
   cropping = true,
   generateSignatureUrl,
+  getCustomHeaders = null,
   onSuccess = null,
   onFailure = null,
   logging = true,
@@ -42,6 +43,7 @@ const UploadWidget = ({
       folder,
       cropping,
       generateSignatureUrl,
+      getCustomHeaders,
       onSuccess,
       onFailure,
       logging,

src/functions/generateSignature.js

@@ -5,6 +5,7 @@ const generateSignature = (
   params,
   {
     generateSignatureUrl,
+    getCustomHeaders,
     accepts,
     contentType,
     withCredentials,
@@ -47,15 +48,16 @@ const generateSignature = (
         },
         accepts: accepts,
         contentType: contentType,
-        withCredentials: withCredentials
+        withCredentials: withCredentials,
+        getCustomHeaders
       }).then((response) => {
         logging && console.log(response, 'Signature Response')
         return Object.assign(
           {
             ...(eager && { eager: eager }),
             ...(customPublicId && { public_id: customPublicId }),
-            signature: response,
-            api_key: apiKey,
+            signature: response.signature,
+            api_key: response.api_key,
             resource_type: resourceType
           },
           uploadParams

src/functions/getterFunction.js

@@ -4,21 +4,33 @@ const instance = axios.create()
 
 instance.interceptors.response.use((response) => response.data)
 
-export const getterFunction = ({
+export const getterFunction = async ({
   url,
   data,
-  accepts,
-  contentType,
-  withCredentials
+  getCustomHeaders
 }) => {
-  instance.defaults.headers.common['Accepts'] = accepts
-  instance.defaults.headers.common['Content-Type'] = contentType
-  instance.defaults.withCredentials = withCredentials
-  const options = {
-    url: url + '?nocache=' + new Date().getTime(),
-    method: 'post',
-    data: data
+  const headers = { 'Content-Type': 'application/json' }
+
+  if (getCustomHeaders) {
+    const customHeaders = await getCustomHeaders()
+
+    for (const [key, value] of Object.entries(customHeaders)) {
+      headers[key] = value
+    }
+  }
+
+  const endpoint = url + '?nocache=' + new Date().getTime()
+
+  // eslint-disable-next-line no-undef
+  const response = await fetch(endpoint, {
+    method: 'POST',
+    body: JSON.stringify(data),
+    headers
+  })
+
+  if (!response.ok) {
+    throw new Error('Error fetching media upload signature.')
   }
 
-  return instance(options)
+  return response.json()
 }

src/functions/myWidget.js

@@ -10,6 +10,7 @@ const myWidget = (
   folder,
   cropping,
   generateSignatureUrl,
+  getCustomHeaders,
   onSuccess,
   onFailure,
   logging,
@@ -52,15 +53,16 @@ const myWidget = (
           params,
           {
             generateSignatureUrl,
+            getCustomHeaders,
             accepts,
             contentType,
             withCredentials,
             customPublicId,
             eager,
             apiKey,
-            resourceType,
             unique_filename,
-            use_filename
+            use_filename,
+            resourceType
           },
           logging
         )

src/index.test.js

@@ -1,29 +1,29 @@
 import { useMyHook } from './'
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook, act } from '@testing-library/react-hooks'
 
 // mock timer using jest
-jest.useFakeTimers();
+jest.useFakeTimers()
 
 describe('useMyHook', () => {
   it('updates every second', () => {
-    const { result } = renderHook(() => useMyHook());
+    const { result } = renderHook(() => useMyHook())
 
-    expect(result.current).toBe(0);
+    expect(result.current).toBe(0)
 
     // Fast-forward 1sec
     act(() => {
-      jest.advanceTimersByTime(1000);
-    });
+      jest.advanceTimersByTime(1000)
+    })
 
     // Check after total 1 sec
-    expect(result.current).toBe(1);
+    expect(result.current).toBe(1)
 
     // Fast-forward 1 more sec
     act(() => {
-      jest.advanceTimersByTime(1000);
-    });
+      jest.advanceTimersByTime(1000)
+    })
 
     // Check after total 2 sec
-    expect(result.current).toBe(2);
+    expect(result.current).toBe(2)
   })
 })