@@ -42,23 +42,23 @@ export class FileUploaderComponent {
4242 @Input ( ) acceptMultiple : boolean ;
4343 @Input ( ) acceptedTypes : Array < String > ;
4444 @Input ( ) showPreview : Boolean ;
45-
45+ @Input ( ) maxImages = 10 ;
46+ @Input ( ) recommendedHeight = 512 ;
47+ @Input ( ) recommendedWidth = 512 ;
48+ public files : Array < UploadFile > = new Array < UploadFile > ( ) ;
4649 /**
4750 * The maximum size of a file in bytes
4851 */
4952 private maxFileSize = 2097152 ;
50-
5153 /**
5254 * The maximum size of a file in a readable format
5355 */
5456 private maxFileSizeReadable : string = this . formatBytes ( this . maxFileSize , 0 ) ;
5557
5658 constructor (
57- private uploadService : FileUploaderService ,
58- private alertService : AlertService ,
59- private fileRetrieverService : FileRetrieverService ) { }
60-
61- public files : Array < UploadFile > = new Array < UploadFile > ( ) ;
59+ private uploadService : FileUploaderService ,
60+ private alertService : AlertService ,
61+ private fileRetrieverService : FileRetrieverService ) { }
6262
6363 /**
6464 * handle onFileDrop event
@@ -85,6 +85,65 @@ export class FileUploaderComponent {
8585 this . fileInput . nativeElement . value = '' ;
8686 }
8787
88+ /**
89+ * Send the selected files to the API and return the id's
90+ * @return Observable<Array<UploadFile>>
91+ */
92+ public uploadFiles ( ) : Observable < Array < UploadFile > > {
93+ // Check if any files were uploaded
94+ if ( this . fileInput . nativeElement . value !== '' ) {
95+ // Map all the files to an observable
96+ const fileUploads = this . files . map ( file => {
97+ if ( file . path ) {
98+ return of ( file ) ;
99+ } else {
100+ return this . uploadService . uploadFile ( file )
101+ . pipe (
102+ map ( event => {
103+ switch ( event . type ) {
104+ case HttpEventType . UploadProgress :
105+ // divide the (uploaded bytes * 100) by the total bytes to calculate the progress in percentage
106+ this . files . find ( value => value . name === file . name ) . progress = Math . round ( event . loaded * 100 / event . total ) ;
107+ break ;
108+ case HttpEventType . Response :
109+ return event . body ;
110+ default :
111+ return ;
112+ }
113+ } )
114+ ) ;
115+ }
116+ }
117+ ) ;
118+ // forkJoin the observables so they can be uploaded at the same time
119+ return forkJoin ( fileUploads ) ;
120+ }
121+ // If no files were updated return original list
122+
123+ // If there are any files left in the list
124+ if ( this . files . length ) {
125+ // Return the original list
126+ return of ( this . files ) ;
127+ } else {
128+ // If there are no files in the list return undefined
129+ return of ( undefined ) ;
130+ }
131+ }
132+
133+ /**
134+ * Populates the fileList
135+ * @param uploadedFiles files that have been uploaded
136+ */
137+ public setFiles ( uploadedFiles : Array < UploadFile > ) : void {
138+ uploadedFiles . forEach ( uploadedFile => {
139+ if ( uploadedFile ) {
140+ this . files . push ( {
141+ ...uploadedFile ,
142+ preview : this . fileRetrieverService . getIconUrl ( uploadedFile )
143+ } ) ;
144+ }
145+ } ) ;
146+ }
88147
89148 /**
90149 * This will finalize the data from the uploadForm and do some filetype and -size checks.
@@ -95,9 +154,22 @@ export class FileUploaderComponent {
95154 if ( ! this . acceptMultiple ) {
96155 this . files = [ ] ;
97156 }
157+
158+ if ( this . files . length + files . length > 10 ) {
159+ const alertConfig : AlertConfig = {
160+ type : AlertType . danger ,
161+ preMessage : `You can't upload more than 10 images` ,
162+ mainMessage : `You tried to upload too many images, please remove some.` ,
163+ dismissible : true ,
164+ timeout : this . alertService . defaultTimeout
165+ } ;
166+ this . alertService . pushAlert ( alertConfig ) ;
167+ return ;
168+ }
169+
98170 for ( const file of files ) {
99171 if ( file . size < this . maxFileSize ) {
100- if ( this . acceptedTypes . includes ( file . type ) ) {
172+ if ( this . acceptedTypes . includes ( file . type . toLocaleLowerCase ( ) ) ) {
101173 this . generatePreview ( file ) ;
102174 file . readableSize = this . formatBytes ( file . size ) ;
103175 this . files . push ( file ) ;
@@ -158,60 +230,4 @@ export class FileUploaderComponent {
158230
159231 return parseFloat ( ( bytes / Math . pow ( k , i ) ) . toFixed ( dm ) ) + ' ' + sizes [ i ] ;
160232 }
161-
162-
163- /**
164- * Send the selected files to the API and return the id's
165- * @return Observable<Array<UploadFile>>
166- */
167- public uploadFiles ( ) : Observable < Array < UploadFile > > {
168- // Check if any files were uploaded
169- if ( this . fileInput . nativeElement . value !== '' ) {
170- // Map all the files to an observable
171- const fileUploads = this . files . map ( file => this . uploadService . uploadFile ( file )
172- . pipe (
173- map ( event => {
174- switch ( event . type ) {
175- case HttpEventType . UploadProgress :
176- // divide the (uploaded bytes * 100) by the total bytes to calculate the progress in percentage
177- this . files . find ( value => value . name === file . name ) . progress = Math . round ( event . loaded * 100 / event . total ) ;
178- break ;
179- case HttpEventType . Response :
180- return event . body ;
181- default :
182- return ;
183- }
184- } )
185- )
186- ) ;
187- // forkJoin the observables so they can be uploaded at the same time
188- return forkJoin ( fileUploads ) ;
189- }
190- // If no files were updated return original list
191-
192- // If there are any files left in the list
193- if ( this . files . length ) {
194- // Return the original list
195- return of ( this . files ) ;
196- } else {
197- // If there are no files in the list return undefined
198- return of ( undefined ) ;
199- }
200- }
201-
202-
203- /**
204- * Populates the fileList
205- * @param files files that have been uploaded
206- */
207- public setFiles ( uploadedFiles : Array < UploadFile > ) : void {
208- uploadedFiles . forEach ( uploadedFile => {
209- if ( uploadedFile ) {
210- this . files . push ( {
211- ...uploadedFile ,
212- preview : this . fileRetrieverService . getIconUrl ( uploadedFile )
213- } ) ;
214- }
215- } ) ;
216- }
217233}
0 commit comments