Forked and Published as angular-file #889

New Issue

2017-09-18T14:00:11Z

AckerApple commented

2017-09-18 14:00:11 +00:00

(Migrated from github.com)

Hey great package owner and to anyone having issues with it,

I have forked, updated, and published my fork of ng2-file-upload as angular-file

I used to use old ng-file-upload for AngularJs and I was inspired to weave together much of that codes concepts with this package's foundation.

I am submitting this "issue" to help others find their way to a much more robust and stable version of your code.

Thank you kindly. I much appreciate you and your code.

_Acker Apple

Hey great package owner and to anyone having issues with it, I have forked, updated, and published my fork of ng2-file-upload as [angular-file](https://www.npmjs.com/package/angular-file) I used to use old [ng-file-upload](https://www.npmjs.com/package/ng-file-upload) for AngularJs and I was inspired to weave together much of that codes concepts with this package's foundation. I am submitting this "issue" to help others find their way to a much more robust and stable version of your code. Thank you kindly. I much appreciate you and your code. _Acker Apple

AckerApple commented

2017-09-18 14:01:21 +00:00

(Migrated from github.com)

Note: Demo page is under construction but fully working. Still has references and links to original package. Updates predicted to be often.

sylvainpolletvillard commented

2017-09-18 14:20:10 +00:00

(Migrated from github.com)

lol, I was just complaining to my coworkers about the old unmaintained ng2-* components that we chose at the time when the angular 2 ecosystem was an oasis in the desert, and you post this at this precise moment.

Thank you for this, at first look the API is much different and will require some work to migrate from ng2-file-upload to angular-file, but at least we have something.

Two obvious questions here, 1) is your package ready to be used on production and 2) do you plan to do a better job than the current repo owner maintaining this stuff ?

lol, I was just complaining to my coworkers about the old unmaintained ng2-* components that we chose at the time when the angular 2 ecosystem was an oasis in the desert, and you post this at this precise moment. Thank you for this, at first look the API is much different and will require some work to migrate from ng2-file-upload to angular-file, but at least we have something. Two obvious questions here, 1) is your package ready to be used on production and 2) do you plan to do a better job than the current repo owner maintaining this stuff ?

AckerApple commented

2017-09-18 14:25:39 +00:00

(Migrated from github.com)

Yes, this is production ready and being used in changing the avatar photo of a building for a health care administrative web based app. Includes all uses of file drag/drop, file selecting, temp upload as image background, and iPhone orientation correction.

As for number 2, I'm not advertising myself to attract attention to me for no reason. I want code participation and my/our code to benefit and be strengthen/hardened by open source participation. SO, if you come asking me for help, better be prepared to do the work yourself as you ask for work out of me. I love pull requests, they make our world go round.

I have many more awesome original and forked packages. Check em' out: https://www.npmjs.com/~ackerapple

Yes, this is production ready and being used in changing the avatar photo of a building for a health care administrative web based app. Includes all uses of file drag/drop, file selecting, temp upload as image background, and iPhone orientation correction. As for number 2, I'm not advertising myself to attract attention to me for no reason. I want code participation and my/our code to benefit and be strengthen/hardened by open source participation. SO, if you come asking me for help, better be prepared to do the work yourself as you ask for work out of me. I love pull requests, they make our world go round. I have many more awesome original and forked packages. Check em' out: https://www.npmjs.com/~ackerapple

sylvainpolletvillard commented

2017-09-18 14:32:34 +00:00

(Migrated from github.com)

Sounds good to me. I also own some OS projects so I can understand your position. As long as you regularly check the PR, it's fine 👍

Sounds good to me. I also own some OS projects so I can understand your position. As long as you regularly check the PR, it's fine :+1:

valorkin commented

2017-09-18 15:05:29 +00:00

(Migrated from github.com)

@AckerApple may be I can give you maintainer access?

AckerApple commented

2017-09-18 15:13:47 +00:00

(Migrated from github.com)

Hey @valorkin, thank you for participating. I'm feeling warm, fuzzy, and have a digital version of being star struck.

Chat aside. You could give me maintainer access as I have that with other packages and I see some value in that. But I tell ya, it would mostly be to direct issue reports to my package. My problem is the name of this package being ng2-file-upload. I long considered making a pull request and working with you buttttttttttt the name.

It is a very noble gesture and I'd be honored to do what I think should be the future of this package => Pushing to the better named package

NEW DOCS COMING!

Upgrading from ng2-file-upload

This package is a fork with a complete overhaul, of ng2-file-upload

Breaking Changes
- ng2FileSelect becomes ngfSelect
- ng2FileDrop becomes ngfDrop

More breaking changes may exist in upgrading including file naming conventions. This list is to be updated

Recommended Changes
- [uploader] was not to my liking
  - I think this was a poor design
  - Use [(file)] and [(files)] as models and then wrap them in HTML5 FormData for transmission
    - Tools included to help do this
- (fileOver) is better suited as:
  - [(validDrag)]="validDragVar"
  - [(invalidDrag)]="invalidDragVar"

Hey @valorkin, thank you for participating. I'm feeling warm, fuzzy, and have a digital version of being star struck. Chat aside. You could give me maintainer access as I have that with other packages and I see some value in that. But I tell ya, it would mostly be to direct issue reports to my package. My problem is the name of this package being ng2-file-upload. I long considered making a pull request and working with you buttttttttttt the name. It is a very noble gesture and I'd be honored to do what I think should be the future of this package => Pushing to the better named package NEW DOCS COMING! ## Upgrading from ng2-file-upload This package is a fork with a complete overhaul, of [ng2-file-upload](https://www.npmjs.com/package/ng2-file-upload) - Breaking Changes - ng2FileSelect becomes ngfSelect - ng2FileDrop becomes ngfDrop > More breaking changes may exist in upgrading including file naming conventions. This list is to be updated - Recommended Changes - [uploader] was not to my liking - I think this was a poor design - Use `[(file)]` and `[(files)]` as models and then wrap them in HTML5 FormData for transmission - Tools included to help do this - `(fileOver)` is better suited as: - `[(validDrag)]="validDragVar"` - `[(invalidDrag)]="invalidDragVar"`

👍 6

valorkin commented

2017-09-18 15:42:25 +00:00

(Migrated from github.com)

@AckerApple I can rename it to ngx-file-upload, same as I did with ng2-bootstrap to ngx-bootstrap

AckerApple commented

2017-09-18 15:49:28 +00:00

(Migrated from github.com)

Pretty cool, can you provide some value that I might see in that? As I bet, if we did pros/cons, I think it's time to move on, no? Do you not feel angular-file is better than ngx-file-upload? The word upload does not appear in any directive you nor I have.

My package is already on npm. I have other complaints and concerns for causing people confusion if we were to update your package and now have two package of the same. I think we good, good guy. I wish to only remember where angular-file came from with appreciation and the less string attached perhaps the better, no?

I could be wrong. Ask my wife, she says I'm crazy for wanting to buy a Joker Poker pinball machine while shes 5 months pregnant (i think shes right but its a beauty of a pinball machine)

Pretty cool, can you provide some value that I might see in that? As I bet, if we did pros/cons, I think it's time to move on, no? Do you not feel angular-file is better than ngx-file-upload? The word upload does not appear in any directive you nor I have. My package is already on npm. I have other complaints and concerns for causing people confusion if we were to update your package and now have two package of the same. I think we good, good guy. I wish to only remember where angular-file came from with appreciation and the less string attached perhaps the better, no? I could be wrong. Ask my wife, she says I'm crazy for wanting to buy a Joker Poker pinball machine while shes 5 months pregnant (i think shes right but its a beauty of a pinball machine)

sylvainpolletvillard commented

2017-09-18 16:35:34 +00:00

(Migrated from github.com)

my 2 cents about why it's not so simple to move on

It's cool to have a new package with more opiniated changes, but please consider all the people having a legacy codebase to maintain. ng2-file-upload has 75k downloads/month, so getting this package up to date with the minimum amount of breaking changes would make life easier for many people.

I personally have a huge component built on top of ng2-file-upload that overwrites some inner methods, so I know that migrating to angular-file is going to be a real pain (anyway, I really appreciate the upgrading guide). I don't really care about the API or package name, I just need the security/perf updates of latest Angular and ensure that it doesn't break my component. So I need to consider if the migration cost is worth it, to be honest.

my 2 cents about why it's not so simple to _move on_ It's cool to have a new package with more opiniated changes, but please consider all the people having a legacy codebase to maintain. ng2-file-upload has 75k downloads/month, so getting this package up to date with the minimum amount of breaking changes would make life easier for many people. I personally have a huge component built on top of ng2-file-upload that overwrites some inner methods, so I know that migrating to angular-file is going to be a real pain (anyway, I really appreciate the upgrading guide). I don't really care about the API or package name, I just need the security/perf updates of latest Angular and ensure that it doesn't break my component. So I need to consider if the migration cost is worth it, to be honest.

AckerApple commented

2017-09-18 16:40:47 +00:00

(Migrated from github.com)

My philosophy: Take the growing pains of upgrading over choking to survive on outdated code.

For the reason of "make life easier": I've turned the package upside down on it's head for the better of tomorrow starting today. It's like jumping from AngularJs to Angular, in my eyes (it's gotta be done).

I'm sassy with attitude and so guilty of not caring what others want (unless it makes sense). So I think it's best we keep our packages separate for the benefit of peoples choice.

Good luck changing. It ain't no thang, I used ng2-file-upload before I knew it needed so much love.

My philosophy: Take the growing pains of upgrading over choking to survive on outdated code. For the reason of "make life easier": I've turned the package upside down on it's head for the better of tomorrow starting today. It's like jumping from AngularJs to Angular, in my eyes (it's gotta be done). I'm sassy with attitude and so guilty of not caring what others want (unless it makes sense). So I think it's best we keep our packages separate for the benefit of peoples choice. Good luck changing. It ain't no thang, I used ng2-file-upload before I knew it needed so much love.

petewins commented

2017-09-18 17:35:50 +00:00

(Migrated from github.com)

@AckerApple Hi, is the angular-file drag&drop feature to be supported on IE? It did not work in the new demo but did in ng2-file-upload. Thanks

AckerApple commented

2017-09-18 17:42:57 +00:00

(Migrated from github.com)

Did it work with the original ng2-file-upload package, for you?

Also, is this Internet Explorer or Internet Edge?

Does the demo page work for you? https://ackerapple.github.io/angular-file/

Does the old demo page work for you? https://valor-software.com/ng2-file-upload/

I model most all I do after how AngularJs's ng-file-upload tackled things. Stating that, if you read here, it seems you need a shim perhaps: https://github.com/danialfarid/ng-file-upload#features

Also, a chart on IE suggest you may have issues, see here: http://caniuse.com/#search=drop

I'm very accepting of pull request. I absolutely hate IE with a passion but love Internet Edge

Did it work with the original ng2-file-upload package, for you? Also, is this Internet Explorer or Internet Edge? Does the demo page work for you? https://ackerapple.github.io/angular-file/ Does the old demo page work for you? https://valor-software.com/ng2-file-upload/ I model most all I do after how AngularJs's [ng-file-upload](https://github.com/danialfarid/ng-file-upload) tackled things. Stating that, if you read here, it seems you need a shim perhaps: https://github.com/danialfarid/ng-file-upload#features Also, a chart on IE suggest you may have issues, see here: http://caniuse.com/#search=drop I'm very accepting of pull request. I absolutely hate IE with a passion but love Internet Edge

abelkbil commented

2017-09-21 19:50:44 +00:00

(Migrated from github.com)

@AckerApple please give insight how to use angular-file along with form data / reactive form. All example are of independent file upload. Thanks for updated lib.

AckerApple commented

2017-09-21 19:52:16 +00:00

(Migrated from github.com)

I don't think I could spell it out anymore for you than this: https://www.npmjs.com/package/angular-file#practical-example

AckerApple commented

2017-09-21 20:42:37 +00:00

(Migrated from github.com)

If I was short and rude, my apology. Not my intention to be

AckerApple commented

2017-09-22 02:05:11 +00:00

(Migrated from github.com)

Now that I am on my own dime, I took the time to elaborate on better usage of [(file)] and [(files)]

Please see the same "Practical Example" I pasted before.

Here is another link to it on GITHUB (incase i add more):
https://github.com/ackerapple/angular-file#practical-example

Look close at the const template string definition and the two buttons that follow the first input tag

Now that I am on my own dime, I took the time to elaborate on better usage of [(file)] and [(files)] Please see the same "Practical Example" I pasted before. Here is another link to it on GITHUB (incase i add more): https://github.com/ackerapple/angular-file#practical-example Look close at the `const template` string definition and the two buttons that follow the first input tag

AckerApple commented

2017-09-22 02:13:09 +00:00

(Migrated from github.com)

ALSO, you know ya'lllllllllllllllllll ... I think it's also best you just know, like second nature, working with HTML5 FormData & File classes.

If you have [(file)] or [(files)] models, you just quite simply:

new FormData().append('file', file, file.name)

As seen here: https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

After you master the FormData class, follow my practical example to correctly interact with Angular's HTTP service which sorta looks like:

import { Http, Response, Request } from '@angular/http';

const body = new FormData()
body.append('file', file, file.name)

const request = new Request({
  method:'post',
  url:'string',
  body:body
})

Http.request( request )

ALSO, you know ya'lllllllllllllllllll ... I think it's also best you just know, like second nature, working with HTML5 FormData & File classes. If you have [(file)] or [(files)] models, you just quite simply: ```javascript new FormData().append('file', file, file.name) ``` As seen here: https://developer.mozilla.org/en-US/docs/Web/API/FormData/append After you master the FormData class, follow my practical example to correctly interact with Angular's HTTP service which sorta looks like: ```javascript import { Http, Response, Request } from '@angular/http'; const body = new FormData() body.append('file', file, file.name) const request = new Request({ method:'post', url:'string', body:body }) Http.request( request ) ```

AckerApple commented

2017-09-22 17:14:45 +00:00

(Migrated from github.com)

I have further updated the practical example to elaborate on manually turning [(files)] into hand made FormData transmittable objects:

Looks like:

  // takes array of HTML5 Files and uploads without using FileUploader class
  manualFormDataUploadFiles(files:File[]):Promise<any>{
    const formData:FormData = new FormData()

    files.each( file=>formData.append('file', file, file.name) )
    
    const config = new Request({
      url:'...',
      method:'POST',
      body:formData
    })

    return this.Http(config)
  }

I have further updated the practical example to elaborate on manually turning [(files)] into hand made FormData transmittable objects: Looks like: ```javascript // takes array of HTML5 Files and uploads without using FileUploader class manualFormDataUploadFiles(files:File[]):Promise<any>{ const formData:FormData = new FormData() files.each( file=>formData.append('file', file, file.name) ) const config = new Request({ url:'...', method:'POST', body:formData }) return this.Http(config) } ```

figuerres commented

2017-09-28 15:04:38 +00:00

(Migrated from github.com)

Hey folks, interesting thread here.
@AckerApple on your github site there is not an issues board setup to post there.
IMHO as you made a fork from this project to a new one then i think it would be better to setup your own issues board on your project and take the discussion there.
I am in the process of looking at what you are doing and seeing if i like it and can use it.
i might have items to go over and ask questions , i would rather post them on that project and not confuse things.

Hey folks, interesting thread here. @AckerApple on your github site there is not an issues board setup to post there. IMHO as you made a fork from this project to a new one then i think it would be better to setup your own issues board on your project and take the discussion there. I am in the process of looking at what you are doing and seeing if i like it and can use it. i might have items to go over and ask questions , i would rather post them on that project and not confuse things.

AckerApple commented

2017-09-28 15:06:36 +00:00

(Migrated from github.com)

@figuerres, I didn't know issues were off. Purely didnt know.

I just turned them on

@figuerres, I didn't know issues were off. Purely didnt know. I just turned them on

figuerres commented

2017-09-28 15:10:12 +00:00

(Migrated from github.com)

thanks, i figured it got overlooked or something....
will post there for things on that package.

thanks, i figured it got overlooked or something.... will post there for things on that package.

AckerApple commented

2017-10-02 18:51:11 +00:00

(Migrated from github.com)

Release early release often. I have added new support and supporting documentation.

Upgrading from ng2-file-upload

This package is a fork with a complete overhaul of ng2-file-upload

Breaking Changes
- ng2FileSelect becomes ngfSelect
- ng2FileDrop becomes ngfDrop
- Import Module
  - Deprecated import { FileUploadModule } from "ng2-file-upload"
  - Update import { ngfModule } from "angular-file"

More breaking changes may exist in upgrading including file naming conventions. This list is to be updated

Recommended Changes
- Use ngf selectable="1" instead of ngfSelect
- [uploader] was not to my liking
  - I think this was a poor design
  - replace A with B.1 and B.2
    - A. <div ng2FileDrop [uploader]="uploader">
    - B.1 <input ngfDrop (filesChange)="uploader.uploadFiles($event)" />
    - B.2 <ngfUploader [(ref)]="uploader" ></ngfUploader>
  - Use [(file)] and [(files)] as models and then wrap them in HTML5 FormData for transmission
    - Tools included to help do this
- (fileOver) is better suited as:
  - [(validDrag)]="validDragVar"
  - [(invalidDrag)]="invalidDragVar"

Quickest Dirty Example

Showing off. This is NOT the best approach but sure does get a lot done for a little

<input
  type          = "file"
  multiple
  accept        = "image/*"
  ngf
  (filesChange) = "uploader.uploadFiles($event)"
  maxSize       = "1024"
/>

<ngfUploader
  [(ref)]   = "uploader"
  [options] = "{url:'...'}"
  (save)    = ""
  (catch)   = ""
></ngfUploader>

Release early release often. I have added new support and supporting documentation. ## Upgrading from ng2-file-upload This package is a fork with a complete overhaul of [ng2-file-upload](https://www.npmjs.com/package/ng2-file-upload) - Breaking Changes - ng2FileSelect becomes ngfSelect - ng2FileDrop becomes ngfDrop - Import Module - Deprecated `import { FileUploadModule } from "ng2-file-upload"` - **Update** `import { ngfModule } from "angular-file"` > More breaking changes may exist in upgrading including file naming conventions. This list is to be updated - Recommended Changes - Use `ngf` selectable="1" instead of `ngfSelect` - [uploader] was not to my liking - I think this was a poor design - replace `A` with `B.1` and `B.2` - A. `<div ng2FileDrop [uploader]="uploader">` - B.1 `<input ngfDrop (filesChange)="uploader.uploadFiles($event)" />` - B.2 `<ngfUploader [(ref)]="uploader" ></ngfUploader>` - Use `[(file)]` and `[(files)]` as models and then wrap them in HTML5 FormData for transmission - Tools included to help do this - `(fileOver)` is better suited as: - `[(validDrag)]="validDragVar"` - `[(invalidDrag)]="invalidDragVar"` ### Quickest Dirty Example Showing off. This is NOT the best approach but sure does get a lot done for a little ```html <input type = "file" multiple accept = "image/*" ngf (filesChange) = "uploader.uploadFiles($event)" maxSize = "1024" /> <ngfUploader [(ref)] = "uploader" [options] = "{url:'...'}" (save) = "" (catch) = "" ></ngfUploader> ```

stephenad commented

2017-10-05 12:21:24 +00:00

(Migrated from github.com)

@AckerApple,

Will your new version handle additional parameters? but still work with Angular 2 as I need to have more information in the queue array that I can call and work with later but need to be able to display it to the users. I created a post yesterday on here called "Adding additional parameters to queue"

Thanks

@AckerApple, Will your new version handle additional parameters? but still work with Angular 2 as I need to have more information in the queue array that I can call and work with later but need to be able to display it to the users. I created a post yesterday on here called "Adding additional parameters to queue" Thanks

AckerApple commented

2017-10-05 14:37:34 +00:00

(Migrated from github.com)

Made replies over in issue #900

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#889