Make FileUploader class stand alone about angular-file HOT 41 CLOSED

Part 1 of 2 is complete. I have created a path for old schoolers to get with the times in version 0.2

Part 2 will be to actually remove the [uploader] attribute from the other directives.

Release often!!!!!!

from angular-file.

Yeah, it's in part digging into what the old package was doing and understanding it. One thing was the old package wrapped it all up and obscured the parts. I am also giving thought to that image thumbnail bit and the code it has that is not part of uploading and not core to selecting files.
Also the file type / allowed files code, thinking what really belongs and what is nice utility but might be optional.
Today was good in that I had time to really work through it and not get a lot of other stuff pulling me off it.

from angular-file.

not sure but i got the number of files showing again.
mostly i am just stripping off stuff that i do not need to get down to the bones and have a working bit of code. then stuff can be added back if needed but now i will fully understand what is going on.

in a bit i will do a check in of some code in my angular wiki project and that will show what i have done so far.
i am now have the ngfSelect allowing me to pick a set of files, the file objects are in an array and i can bind that to the html table to show what has been selected.
next i will do the actual upload and when all files are uploaded i can empty the array.

when i get more of it tested i will let you know ...

from angular-file.

Right now, as I type, FileUploader will no longer be something used like [uploader]="" ... It will now be more like:

<input ngf (filesChange)="uploader.uploadFiles($event)" />
<ngfUploader [(ref)]="uploader" [options]="..." (success)="" (catch)="" />

v0.2 in-progress

from angular-file.

just to let you know:

I have a few ideas and it looks like i will be able to do some work on my Wiki project so I am taking the code for this , i am using my wiki as my test bed and then we can see what chnages to pull into this project.
i think i will have a clean uploader and remove the old stuff.

from angular-file.

Fantastic.

HEADS UP! After you so kindly brought to my attention, the new Angular HttpClient "stuff", I am mostly certain I will remove the import of angular/http and the option that optionally allows angular/http to be used...... In short, angular-file will only offer FileUploader class since that is built in. DO NOT use the built in FileLoader WITH option "useNgHttp" (useNgHttp defaults to false).

Thanks again for your participation!

from angular-file.

what i am doing first is to use Angular Cli ng g to generate and i am going to try and not use the old uploader code at all but i am going to see if i can track the files[] in what i think it the right way.
if the file has been uploaded then take it out of the files[]
use files and not all the other stuff that was in the classes we started from.

i will work with it and when i have a working local version then we can see where to go with it.

from angular-file.

the more i work with the code the more i am thinking that the uploader needs to just go.....

been trying to work out how to re-factor stuff and having multiple directives on a view / page seems to just get messy.
just take the upload and make an http service that takes a list of files looks better as i try to sort it out.
let the view hold the not uploaded files array and when the http service uploaded them take them out of the array.....

from angular-file.

That’s exactly my thoughts man and you’ve heard me saying so. So how should we continue on? I think, the uploaded stays but more documentation or something that makes it clear to be a last result.

By programming principle, selecting files and uploading them should be a separated process.

Thanks for validating my point of view on the Uploader

from angular-file.

Hey perhaps you can help me find a thing in how the code works...

i have a local copy that i am reworking to get rid of stuff i do not need and to use the new HttpClient to do the upload.

in doing this i have an ngfSelect that runs on it's own with no use of the old uploader and other code.

it is selecting files and doing an EventEmit() to tell my UI code the files selected,
my view now has the array of File and that array is not connected to the ngfSelect code at all.

now here is the question:

my select shows a button and some text that in the old versions was changing to something like "6 Files Selected"

now it is not doing that.

how did i break it ?? trying to figure that out right now....
but
i think i will have the uploading working today and test that it works with IE11
if it does then we may want to use that as the way to upload and just have a simple angular http service.

from angular-file.

Your details are a little scattered. I need some code examples.

I will make one assumption: I think you are perhaps not using [(files)]="model" but instead perhaps you are doing (filesChange)="model=$event" ? Is that maybe it? Your statements of "not connected to the ngfSelect" makes me assume you are infact NOT two way binding your files model because otherwise they "should" be connected.

<input type="file" ngfSelect [(files)]="model" multiple />
<button type="submit" *ngIf="model">
  send {{ model.length }} files
</button>

from angular-file.

I like you good guy. Great work and details!

from angular-file.

making some good progress that you may want to check out.
my wiki project has the files i am working on: AngleWiki

my file uploader service : upload

using the new HttpClient , works on IE 11 and chrome, reports progress to caller for the progress bar and other things.

code for the ui that picks files and uploads them: UI

still a work in progress so the code is still messy and not finished.

but from this we can start to see a cleaner and simpler file uploader.

i let the UI class have the Files[] and let the file picker do an EventEmit with it's array of File
i might have been doing something wrong but the @input binding for the File[] did not work so i just pulled it out in my working copy.

also I do not know if any of it is of interest to you but that Wiki project also has the start of using an OIDC connect library to do logins
I use Identity Server 3 as an SSO login system at work.
OIDC is the common standard for things like Google and Facebook login sharing.
Identity Server is free here on github, a bit complex to get started with but when you get it running very nice to use.
and my Wiki has a Markdown component so the pages are written with Markdown Syntax.

several things still to be finished in that but it's coming along nicely now...

from angular-file.

Ok, it will take me sometime to fully digest your comment as it has a lot of meat to it.

Initial thoughts upon first reading:

• Very interested in this IE "fix" you have found and it simply seems "fixed" just by uploading using HttpClient? I wonder if angular/http works with IE as I've only seen you and others using the FileUploader class.
• The evidence and difference in your experience using the HttpClient instead of the FileUploader, really really really makes me want to completely drop the FileUploader class altogether. I have zero desires to maintain an Http uploading tool. I really appreciate your findings on this subject as it may ultimately lead to the removal of the FileUploader class.
• One reason I was holding onto the FileUploader class, was that it had the progress indicators in example. I have not the code to get progress indication from any Angular transmitters. I am glad to hear you have already covered this ground and I will be reviewing your code to replace examples in this package.
• As much as I appreciate all this knowledge, you would be far more helpful to this project by forking it, making changes to it that you see fit, and then issuing a pull request. I know we talked before about getting you todo pull request so I bet you'll rise to the occasion in due time.
• OIDC, I am extremely interested in this topic you bring up. I have tried a few times trying to integrate social logins into my apps and failed hard. I could use your knowledge and help here, when the time is right.

I am juggling a few things. Have not looked at your links but they are top priority to me.

Will report after I can properly digest your findings!

Fantastic work fella. I now have the hope we may someday play pinball together

from angular-file.

I see something to do with getting progress is controlled here:
https://github.com/figuerres/AngleWiki/blob/master/src/app/services/wiki-files.service.ts#L24

I also need to find the code that then calculates the percent complete. Will investigate later, got to put this down but you got me excited

from angular-file.

the pct % is really freaking simple man....

https://github.com/figuerres/AngleWiki/blob/master/src/app/file-manager/file-manager.component.ts

look at lines 54 to 79
the HttpClient returns an event that has the bytes count and we just do the math for %

from angular-file.

Awesome.

Same link, just more direct for me when I am ready:
https://github.com/figuerres/AngleWiki/blob/master/src/app/file-manager/file-manager.component.ts#L64

from angular-file.

Early notes to self:

The original package tried to make everything convenient and available all within one package. This is causing bumps in the road as I unravel this "mess"

• The original package sends multiple files one-at-a-time when using built in FileUploader
  • This technique out right sucks, faking multi-file sending
  • Using Angular Http/HttpClient you can send multiple files in one batch
  • The old example page has two upload status indicators, one for each file and one for all files percent. This needs to change to one status.

To summarize: Example page will only have one status indicator indicating overall uploading progress of running http transmission

from angular-file.

also add this: the server that you send files to may have a limit on total upload size.
you may need to configure the server to allow larger uploads and or limit total megabytes in one batch upload.

i am working my way thru the settings needed for IIS and web api.
default for IIS is about 4 Megs at a time.
total upload size is NOT a sum of the sizes of the files as each file will be base64 encoded.
if one meg raw file size the upload will be some % larger.

from angular-file.

Understood. We have a maxSize, I think you know that and you are also pointing out that it isnt the end all be all protector when it comes to total multiple files.

Noted. I will think on it. I have already done a lot of work on this and will share soon.

from angular-file.

The old package had the ability to cancel uploading. We will need to figure that out too

from angular-file.

Github of this package is now on version 0.3.0

• NPM has NOT been updated
• The Github example page has NOT been updated

To help control progress on an upload, I have created ngfUploadStatus.

It looks a little something like this:

<ngfUploadStatus [(percent)]="progress" [httpEmitter]="httpEmitter"></ngfUploadStatus>

Link to new ngfUploadStatus directive:
https://github.com/AckerApple/angular-file/blob/development/src/file-upload/ngfUploadStatus.directive.ts

Link to example of using ngfUploadStatus:
https://github.com/AckerApple/angular-file/blob/development/demo/src/app/components/file-upload/simple-demo.html#L23

Link to example of setting httpEmitter:
https://github.com/AckerApple/angular-file/blob/development/demo/src/app/components/file-upload/simple-demo.component.ts#L52

from angular-file.

More to come tomorrow

from angular-file.

IMPORTANT : Heads up! 0.3.1 will append [(files)] at each selection. Currently, each time a user selects files, the array of files model is reset.

from angular-file.

for IIS server users i have some notes to post later on making the upload limit larger for folks who need to do more than a 4 meg file.
needs web config items and a class in the startup.cs to be registered.

from angular-file.

IIS. Ugh, yikes! Rhetorical question: why not cloud hosted servers that cost less and have better security and scaling than housing a dedicated machine?? You have some powerful Angular/Javascript knowledge, wouldn't you far prefer the control and management of a NodeJs server?? Aye aye aye, don't answer none of that as I'm being dramatic and so thankful I left IIS/Apache for NodeJs

from angular-file.

it's what we have.... and may change over time. when a company has sunk a bunch of money into something you have to be careful in asking them to change.

at least IIS 8 is way better than IIS 6 -- back in the 1999 to 2002 time i had to deal with a lot of the old issues, had a server that got really hosed with a stealth install of a hacked mIRC client that faked it's identity in Task Manager, they also had folders that had names like COM4: -- in windows server 2000 / 2003 you could not delete names that matched reserved device names!

what we may be doing later is using Azure to run the servers. but this all takes time to sell the owners on. if we meet in the real world i can tell you some long tales that will amaze and amuse you.
I am also an old hand at Linux, and at SunOS and at Novell Netware and a lot of other tech.

from angular-file.

Cool cool. Doing hella searching on how to stop an Angular http request. Not having much luck

from angular-file.

link for info on IIS: large upload sizes

in my class i had to use the path not the route data
if (context.Request.RequestContext.HttpContext.Request.Path == "wikiapi/assets") {
return false;
}

from angular-file.

PS: if the user selects a large number of files / large files sizes there will be some lag in passing the list of files / updatijg the UI and starting the transfer.
when doing 43 Megs of assorted image files it looked like the app hung for about 30 seconds, then it ran like a champ. 208 files 43 Megs.

from angular-file.

Lag is expected the more and larger files you go. You don't have to stop the comments about file sizes and large uploads but I'd like you to as this libraries focus is just selecting files. Uploading files takes knowing what you are doing on the server

It's like you're stating "common" knowledge about uploading files that is outside this packages duties

from angular-file.

I have found how to cancel requests. It will impact the new unreleased ngfUploadStatus

from angular-file.

All of GITHUB has been updated to 3.0.1

The examples page no longer includes the use of the FileUploader class. The README.md will need to be updated

[0.3.0] - 2017-10-02

Breaking Changes

• [(files)] is now a default blank array . May cause issues if you have *ngIf="files" instead of *ngIf="files.length"
• removed useNgHttp from ngfUploader and no longer depend on angular/http
• ngf, ngfSelect, and ngfDrop no longer reset the [(files)]. They always append new files

Added

• ngfUploadStatus

from angular-file.

npm updated as well

from angular-file.

Example pages has gone thru a semi-heavy face lift

from angular-file.

hey before i forget:

login and identity server and related:

if you want to ask stuff w/o going thru this board my name is my email.
denny at figuerres dot com

also if you can go to Orlando next month for the vs live conference one of the speakers is one of the authors of the Identity Server software .
https://live360events.com/events/orlando-2017/speakers/speaker-list.aspx?_ga=2.137788912.1332898008.1508434941-197715594.1503411434
Brock Allen
Consultant
Solliance

VST17 Fast Focus: Web Security 101
VSW09 Securing Web APIs in ASP.NET Core
VSW01 User Authentication for ASP.NET Core MVC Applications

https://vslive.com/ECG/live360events/Events/Orlando-2017/VSLive.aspx

from angular-file.

I'm most certain I will be in Orlando for a pinball event: http://wp.freeplayflorida.com/

What you are talking about seems to be Nov 12-17, right?

Maybe I can make it.... Hmmmmmm. Thanks

from angular-file.

yes that's the dates, myself and two others will be there and a whole lot of other folks.

from angular-file.

Really excited to see the progress on this, and the direction it’s heading. I’ve been swamped on a project, but will be incorporating this shortly and will provide whatever feedback I can.

from angular-file.

Note to self: document in readme new ngfUploadStatus. Perhaps more micro examples including canceling a request. Document FileUploader deprecation and why especially that it fakes multi uploads.

Future thoughts:

• Document how to work on this project
• Reduce dev dependencies which I think bootstrap will be tossed
• Update Examples layout. Perhaps replace bootstrap with ack-css-boot or less
• Fire up IE11 and see about drag/drop issue

Last note, I’ve hella loved Promises and super think they still have their place but after working on this package I’ve come to find I will most certainly master Observables & Subscriptions. Next to Observables, Promises are just so linear.

from angular-file.

This issue has now become irrelevant as of latest release 0.5.0

0.5.0 has many breaking changes for the legacy folks, especially anyone still using FileUploader

## 0.5.0 - (2018-02-07)
- Removed much unused code from original package that this is a fork from
- Fixed and ensured accept attribute working correctly
- Improved demo page in terms of the accept attribute and file drag metadata
- BREAKING CHANGES
  - Removed directive ngfUploader
  - ngfUploader.directive.ts has been removed from this package
  - FileUploader.class.ts has been removed from this package
  - FileUploader.class has been removed from this package
  - FileItem.class has been removed from this package
  - FileLikeObject.class has been removed from this package
  - Files are always considered valid when dragged inside browsers that dont allow ANY drag file metadata
  - Input forceFilename has been removed from all ngf directives
  - Input forcePostname has been removed from all ngf directives

Closing this issue. Feel free to open a new one

from angular-file.