url-loader@5.6.0 by colbyfayock · Pull Request #166 · cloudinary-community/cloudinary-util

colbyfayock · 2024-08-02T15:54:12Z

This creates a new set of helpers that will help framework libraries reduce the boilerplate needed to instantiate new instances of the upload widget.

getUploadWidgetOptions: this takes in a set of options that deal with the configuration of the upload widget, including account credentials and signature callback function
generateSignatureCallback: this generates a new callback function that given an endpoint and fetcher (like the fetch API), will make it easier to pass the resulting function to the widget options above
generateUploadWidgetResultCallback: when uploading with the widget, different events are produced depending on the state of the upload, this helps manage all of the different events via a single callback function with the ability to pass in and tap into the different events

Issue Ticket Number

Fixes #164

Usage

const signatureCallback = generateSignatureCallback({
  signatureEndpoint: '/asdf',
  fetch
})

const uploadOptions = getUploadWidgetOptions({
  signatureCallback
}, {
  cloud: {
    cloudName: 'testcloud',
    apiKey: 'abcd1234'
  }
});

const resultsCallback = generateUploadWidgetResultCallback({
  onError: (uploadError) => {
    // Example on storing error
    // setError(uploadError);
  },
  onResult: (uploadResult) => {
    // Example of storing results on any event
    // setResults(uploadResult);
  },
  onSuccess: (uploadResult) => {
    // Tapping into individual events
  }
});

cloudinary.createUploadWidget(uploadOptions, resultsCallback);

Description

Issue Ticket Number

Fixes #<ISSUE_NUMBER>

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Fix or improve the documentation
This change requires a documentation update

Checklist

I have followed the contributing guidelines of this project as mentioned in CONTRIBUTING.md
I have created an issue ticket for this PR
I have checked to ensure there aren't other open Pull Requests for the same update/change?
I have performed a self-review of my own code
I have run tests locally to ensure they all pass
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes needed to the documentation

…adWidgetResultCallback (#165) # Description This creates a new set of helpers that will help framework libraries reduce the boilerplate needed to instantiate new instances of the upload widget. * getUploadWidgetOptions: this takes in a set of options that deal with the configuration of the upload widget, including account credentials and signature callback function * generateSignatureCallback: this generates a new callback function that given an endpoint and fetcher (like the fetch API), will make it easier to pass the resulting function to the widget options above * generateUploadWidgetResultCallback: when uploading with the widget, different events are produced depending on the state of the upload, this helps manage all of the different events via a single callback function with the ability to pass in and tap into the different events ## Issue Ticket Number Fixes #164 ## Usage ``` const signatureCallback = generateSignatureCallback({ signatureEndpoint: '/asdf', fetch }) const uploadOptions = getUploadWidgetOptions({ signatureCallback }, { cloud: { cloudName: 'testcloud', apiKey: 'abcd1234' } }); const resultsCallback = generateUploadWidgetResultCallback({ onError: (uploadError) => { // Example on storing error // setError(uploadError); }, onResult: (uploadResult) => { // Example of storing results on any event // setResults(uploadResult); }, onSuccess: (uploadResult) => { // Tapping into individual events } }); cloudinary.createUploadWidget(uploadOptions, resultsCallback); ```

# [@cloudinary-util/url-loader-v5.4.0-beta.1](https://github.com/cloudinary-community/cloudinary-util/compare/@cloudinary-util/url-loader-v5.3.1...@cloudinary-util/url-loader-v5.4.0-beta.1) (2024-08-02) ### Features * getUploadWidgetOptions, generateSignatureCallback, generateUploadWidgetResultCallback ([#165](#165)) ([4e3adc4](4e3adc4)), closes [#164](#164)

# [@cloudinary-util/types-v1.2.0-beta.1](https://github.com/cloudinary-community/cloudinary-util/compare/@cloudinary-util/types-v1.1.0...@cloudinary-util/types-v1.2.0-beta.1) (2024-08-02) ### Features * getUploadWidgetOptions, generateSignatureCallback, generateUploadWidgetResultCallback ([#165](#165)) ([4e3adc4](4e3adc4)), closes [#164](#164)

# [@cloudinary-util/url-loader-v5.5.0-beta.1](https://github.com/cloudinary-community/cloudinary-util/compare/@cloudinary-util/url-loader-v5.4.0...@cloudinary-util/url-loader-v5.5.0-beta.1) (2024-08-02) ### Features * getUploadWidgetOptions, generateSignatureCallback, generateUploadWidgetResultCallback ([#165](#165)) ([4e3adc4](4e3adc4)), closes [#164](#164)

# [@cloudinary-util/util-v3.2.0-beta.1](https://github.com/cloudinary-community/cloudinary-util/compare/@cloudinary-util/util-v3.1.0...@cloudinary-util/util-v3.2.0-beta.1) (2024-08-02) ### Features * getUploadWidgetOptions, generateSignatureCallback, generateUploadWidgetResultCallback ([#165](#165)) ([4e3adc4](4e3adc4)), closes [#164](#164)

# [@cloudinary-util/url-loader-v5.5.0-beta.1](https://github.com/cloudinary-community/cloudinary-util/compare/@cloudinary-util/url-loader-v5.4.0...@cloudinary-util/url-loader-v5.5.0-beta.1) (2024-08-02) ### Features * getUploadWidgetOptions, generateSignatureCallback, generateUploadWidgetResultCallback ([#165](#165)) ([4e3adc4](4e3adc4)), closes [#164](#164)

# [@cloudinary-util/util-v3.2.0-beta.1](https://github.com/cloudinary-community/cloudinary-util/compare/@cloudinary-util/util-v3.1.0...@cloudinary-util/util-v3.2.0-beta.1) (2024-08-02) ### Features * getUploadWidgetOptions, generateSignatureCallback, generateUploadWidgetResultCallback ([#165](#165)) ([4e3adc4](4e3adc4)), closes [#164](#164)

…l into beta

# [@cloudinary-util/types-v1.2.0-beta.1](https://github.com/cloudinary-community/cloudinary-util/compare/@cloudinary-util/types-v1.1.0...@cloudinary-util/types-v1.2.0-beta.1) (2024-08-02) ### Features * getUploadWidgetOptions, generateSignatureCallback, generateUploadWidgetResultCallback ([#165](#165)) ([4e3adc4](4e3adc4)), closes [#164](#164)

…l into beta

# [@cloudinary-util/url-loader-v5.5.0-beta.2](https://github.com/cloudinary-community/cloudinary-util/compare/@cloudinary-util/url-loader-v5.5.0-beta.1...@cloudinary-util/url-loader-v5.5.0-beta.2) (2024-08-02) ### Features * force version ([cb63bff](cb63bff))

# [@cloudinary-util/url-loader-v5.5.0-beta.3](https://github.com/cloudinary-community/cloudinary-util/compare/@cloudinary-util/url-loader-v5.5.0-beta.2...@cloudinary-util/url-loader-v5.5.0-beta.3) (2024-08-02) ### Features * Generative Replace Background ([#167](#167)) ([4129214](4129214))

…l into beta

# [@cloudinary-util/url-loader-v5.6.0-beta.1](https://github.com/cloudinary-community/cloudinary-util/compare/@cloudinary-util/url-loader-v5.5.0...@cloudinary-util/url-loader-v5.6.0-beta.1) (2024-08-02) ### Features * force version ([cb63bff](cb63bff)) * getUploadWidgetOptions, generateSignatureCallback, generateUploadWidgetResultCallback ([#165](#165)) ([4e3adc4](4e3adc4)), closes [#164](#164)

colbyfayock · 2024-08-05T13:24:18Z

I'm working on implementing these methods and thinking about the direction of generateUploadWidgetResultCallback

In my example, Next.js, I'm using the callback methods in 2 ways, 1 as a direct callback (onSuccess) and as a supplemental one as an Action (onSuccessAction) with a slightly different signature

here's an initial look at the implementation of this function along with the previous logic that split up these different callbacks

const resultsCallback = generateUploadWidgetResultCallback({
    onError: (uploadError) => {
      setError(uploadError);

      if ( typeof onError === 'function' ) {
        onError(uploadError, {
          widget: widget.current,
          ...instanceMethods
        });
      }
    },
    onResult: (uploadResult) => {
      if ( typeof uploadResult?.event !== 'string' ) return;

      setResults(uploadResult);

      const widgetEvent = WIDGET_EVENTS[uploadResult.event] as keyof typeof props;

      if ( typeof widgetEvent === 'string' && typeof props[widgetEvent] === 'function' ) {
        const callback = props[widgetEvent] as CldUploadEventCallback;
        callback(uploadResult, {
          widget: widget.current,
          ...instanceMethods
        });
      }

      const widgetEventAction = `${widgetEvent}Action` as keyof typeof props;

      if ( widgetEventAction && typeof props[widgetEventAction] === 'function' ) {
        const action = props[widgetEventAction] as CldUploadEventAction;
        action(uploadResult);
      }
    }
  });

this somewhat deters from the original simplicity goal where this requires still defining the callbacks and handling them all within a single onResult callback as opposed to just dumping the callbacks into the widget, but it feels like this may be unavoidable in this instance and any code to try to supply both callbacks is ultimately going to result in a bunch of code on the Next.js side

the other point is each of the callbacks in the generateUploadWidgetResultCallback are only Typed to pass the the results of the event, not the results and the instance methods as is currently shown here. this is also somewhat unavoidable because this is intentionally detatched from instance creation so it never knows about it, leaving some of this code additionally unavoidable

does this method even help? if only a little bit? it may provide a slightly cleaner interface and centralize some, but not all of the props

would love your thoughts @Baroshem and @ghostdevv

…l into beta

# [@cloudinary-util/url-loader-v5.6.0-beta.2](https://github.com/cloudinary-community/cloudinary-util/compare/@cloudinary-util/url-loader-v5.6.0-beta.1...@cloudinary-util/url-loader-v5.6.0-beta.2) (2024-08-06) ### Bug Fixes * updating enum value to allow for both the list of values and string ([1b4c403](1b4c403))

ghostdevv · 2024-08-06T19:15:42Z

I think it's ok to have a onResult callback that is then up to us to handle because each framework has different ways of doing events that might be otherwise incompatible

# [@cloudinary-util/util-v3.2.0](https://github.com/cloudinary-community/cloudinary-util/compare/@cloudinary-util/util-v3.1.0...@cloudinary-util/util-v3.2.0) (2024-08-07) ### Features * url-loader@5.6.0 ([#166](#166)) ([26736af](26736af)), closes [#164](#164)

github-actions · 2024-08-07T19:14:52Z

🎉 This PR is included in version @cloudinary-util/util-v3.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [@cloudinary-util/url-loader-v5.6.0](https://github.com/cloudinary-community/cloudinary-util/compare/@cloudinary-util/url-loader-v5.5.0...@cloudinary-util/url-loader-v5.6.0) (2024-08-07) ### Bug Fixes * falsy check for replacebackground ([5574e39](5574e39)) ### Features * url-loader@5.6.0 ([#166](#166)) ([26736af](26736af)), closes [#164](#164)

github-actions · 2024-08-07T19:22:44Z

🎉 This PR is included in version @cloudinary-util/url-loader-v5.6.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [@cloudinary-util/types-v1.2.0](https://github.com/cloudinary-community/cloudinary-util/compare/@cloudinary-util/types-v1.1.0...@cloudinary-util/types-v1.2.0) (2024-08-07) ### Features * url-loader@5.6.0 ([#166](#166)) ([26736af](26736af)), closes [#164](#164)

github-actions · 2024-08-07T19:23:00Z

🎉 This PR is included in version @cloudinary-util/types-v1.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

colbyfayock and others added 7 commits August 2, 2024 11:53

Merge branch 'main' into beta

3964bfc

colbyfayock force-pushed the beta branch from afe2e4a to 31f87cc Compare August 2, 2024 16:24

colbyfayock and others added 15 commits August 2, 2024 12:33

Merge branch 'test' into beta

e60c38c

adding exports

0f422f3

Merge branch 'beta' of github.com:cloudinary-community/cloudinary-uti…

d44fc3b

…l into beta

oops

13dcdf2

feat: exports

4c17f1b

feat: force version

cb63bff

Merge branch 'beta' of github.com:cloudinary-community/cloudinary-uti…

2ca8a75

…l into beta

Merge branch 'main' into beta

70ed5d2

Merge branch 'main' into beta

2055056

Merge branch 'beta' of github.com:cloudinary-community/cloudinary-uti…

c365165

…l into beta

colbyfayock changed the title ~~url-loader@5.5.0~~ url-loader@5.6.0 Aug 5, 2024

colbyfayock and others added 3 commits August 6, 2024 11:55

fix: updating enum value to allow for both the list of values and string

1b4c403

Merge branch 'beta' of github.com:cloudinary-community/cloudinary-uti…

7232904

…l into beta

colbyfayock merged commit 26736af into main Aug 7, 2024

colbyfayock deleted the beta branch August 7, 2024 19:09

github-actions bot added the released label Aug 7, 2024

This was referenced Aug 7, 2024

[Feature] CldUploadWidget Helper Functions cloudinary-community/next-cloudinary#495

Closed

[Feature] CldUploadWidget Helper Functions cloudinary-community/svelte-cloudinary#113

Closed

[Feature] CldUploadWidget Helper Functions nuxt-modules/cloudinary#226

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

url-loader@5.6.0#166

url-loader@5.6.0#166
colbyfayock merged 25 commits intomainfrom
beta

colbyfayock commented Aug 2, 2024

Uh oh!

colbyfayock commented Aug 5, 2024

Uh oh!

ghostdevv commented Aug 6, 2024

Uh oh!

github-actions bot commented Aug 7, 2024

Uh oh!

github-actions bot commented Aug 7, 2024

Uh oh!

github-actions bot commented Aug 7, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

colbyfayock commented Aug 2, 2024

Issue Ticket Number

Usage

Description

Issue Ticket Number

Type of change

Checklist

Uh oh!

colbyfayock commented Aug 5, 2024

Uh oh!

ghostdevv commented Aug 6, 2024

Uh oh!

github-actions bot commented Aug 7, 2024

Uh oh!

github-actions bot commented Aug 7, 2024

Uh oh!

github-actions bot commented Aug 7, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants