Uppy: Support ngrx store

[rimlin]

Hi! Thanks for great library for uploading files.
In documentation of uppy i saw, that i can change default store or create my own store to get more control of data. In my project i use Angular 5 with ngrx and i did not find ngrx store at source of stores, which is sad.
If it is necessary, then I can create pull request to support ngrx store.

[arturi]

Hi,

Yes, it seems no one has made an Uppy ngrx store yet, we’ll be happy to check out your PR!

[rimlin]

Created NgrxStore implementation for Uppy based on ReduxStore - https://gist.github.com/rimlin/561c2851329c02bc3d027faaff3ef39e
I think it can not be merged to main codebase, because it require Rxjs with @ngrx, but it can be used as like standalone plugin.

At this week i will try to create repository with full-featured ngrx capacity, like selecting files, uploads and etc.

[goto-bus-stop]

Very cool—if you'd like to publish that store implementation separately (eg as uppy-store-ngrx or something) we can link to it on the website!

(I also think it's probably best not to keep it in the transloadit/uppy repo; if only because neither I nor @arturi or anyone at @transloadit are very familiar with Angular/ngrx, AFAIK.)

[rimlin]

Hey guys, happy to introduce uppy-store-ngrx
Waiting for any comments =)

[goto-bus-stop]

Awesome! Just opened a PR to link it in our Store documentation here: https://github.com/transloadit/uppy/pull/572

[arturi]

Link is in the docs: https://uppy.io/docs/stores/ 👌Thank you!

[kvz]

@rimlin Sorry to be a bother but I wondered if you could offer insights in this thread? https://community.transloadit.com/t/integrating-uppy-uploader-with-angular-4-application/14647 It's a fellow Angular user having some trouble. I would love to help him out myself but none on our team have Angular experience :o

[rimlin]

@kvz Oh, not tryed to use dashboard plugin in Angular app (as i understand TC described problem with it), i only set up Uppy module for manual upload files, but i can create example of usage Uppy Dashboard with Angular app at this week, no problem!

[kvz]

Ah, thanks that would be amazing @rimlin!

[viswanathjandhyala]

Hi @kvz @rimlin

Thanks for taking time to help me out to resolve my issue how to use Uppy in angular applictaion. As the Ng2 is based on typescript, i am not sure of how the uploader can be integrated with angular.

Attaching the files
In the zip i have ts file and html file. I added all the code in the TS file which is required to load all the necessary files to use uppy and in html file i added all the classes required to display the UI. IN the consle i am not getting any errors as such regarding the files required or files not found.
mycomponents.zip

Attaching the image file for the UI

and the console screenshot

I am not sure where i am missing.

Used npm install uppy --save to install uppy in the app i want to integrate.
and added the css file in angular-cli.json styles array
and added the js file in angular-cli.json assets array.

I want to integrate google drive, dropbox.

Thanks in Advance

Please do let me know if anything needed from my side to understand the issue.

Viswanath.

[rimlin]

Hi @viswanathjandhyala
Created simple example of usage Uppy with Angular, check it here: https://codesandbox.io/s/2xw80l2lvp
Check 'src/styles.css', where you can import your local uppy styles for dashboard.

[viswanathjandhyala]

Hi @rimlin and @kvz

Sorry for the late reply. I have a problem with my anugular version installed in my system. Today i have copied the code to my project and it is working as expected.

Thanks for the Help.

[JWess]

Someone created a very helpful Stackblitz which wraps Uppy with an Angular component:

https://stackblitz.com/edit/angular-uppy