Open AckerApple opened 6 years ago
Note: Demo page is under construction but fully working. Still has references and links to original package. Updates predicted to be often.
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 ?
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
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:
@AckerApple may be I can give you maintainer access?
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!
This package is a fork with a complete overhaul, of ng2-file-upload
More breaking changes may exist in upgrading including file naming conventions. This list is to be updated
[(file)]
and [(files)]
as models and then wrap them in HTML5 FormData for transmission
(fileOver)
is better suited as:[(validDrag)]="validDragVar"
[(invalidDrag)]="invalidDragVar"
@AckerApple I can rename it to ngx-file-upload, same as I did with ng2-bootstrap to ngx-bootstrap
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)
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 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.
@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
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
@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.
I don't think I could spell it out anymore for you than this: https://www.npmjs.com/package/angular-file#practical-example
If I was short and rude, my apology. Not my intention to be
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
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 )
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)
}
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.
@figuerres, I didn't know issues were off. Purely didnt know.
I just turned them on
thanks, i figured it got overlooked or something.... will post there for things on that package.
Release early release often. I have added new support and supporting documentation.
This package is a fork with a complete overhaul of ng2-file-upload
import { FileUploadModule } from "ng2-file-upload"
import { ngfModule } from "angular-file"
More breaking changes may exist in upgrading including file naming conventions. This list is to be updated
ngf
selectable="1" instead of ngfSelect
A
with B.1
and B.2
<div ng2FileDrop [uploader]="uploader">
<input ngfDrop (filesChange)="uploader.uploadFiles($event)" />
<ngfUploader [(ref)]="uploader" ></ngfUploader>
[(file)]
and [(files)]
as models and then wrap them in HTML5 FormData for transmission
(fileOver)
is better suited as:[(validDrag)]="validDragVar"
[(invalidDrag)]="invalidDragVar"
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>
@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
Made replies over in issue #900
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