Issue with *ngFor upload.uploadAll() not working #1015

New Issue

2018-04-27T10:17:25Z

mayur9293 commented

2018-04-27 10:17:25 +00:00

(Migrated from github.com)

I am using ng2FileSelect with *ngFor
The sample code looks something like this

<tr  *ngFor="let item of exampleSet; let i = index;">
	<td class="media-left">
		<img src="" imgPreview [image]="item?._file" class="media-object" *ngIf="item?._file" />
		<input  type="file" title="" ng2FileSelect [uploader]="uploader"  
                           accept="image/png,image/gif,image/jpeg" *ngIf="!item?._file" (change)="onTempImageSelected(i);"  />
	</td>
	<td  class="form-group">
		<textarea class="form-control" type="text" [(ngModel)]="item.example" [ngModelOptions]="{standalone: true}"></textarea>
	</td>
	<td>
		<div class="btn btn-primary btn-xs" style="height: 25px;    margin-top: 10%; margin-left: 14%;" (click)="removeExample(item);">
			<span  class="glyphicon glyphicon-trash" (click)="removeExample(item);"style="font-size: 15px; margin-top: 3px;"></span>
		</div>
	</td>
	<!-- <td >{{item.creationTime | uppercase}}</td> -->
</tr>

onTempImageSelected(index) {

 var tempExample = this.exampleSet[index];
 var tempFile = this.uploader.queue[0];
 tempFile.example = tempExample.example;

 this.exampleSet[index] = tempFile;
 this.uploader.clearQueue();

}

Basically what i am trying to do is I have exampleSet that can either contains textualexample or image + text as example as shown above. And whenever a new image is selected I push that image into exampleSet and preview for the same is available. While uploading this data to the server what I did is
I segregate the Images using something like this

segregateExamples() {
 this.exampleList = [];
 for (var i = 0; i < this.exampleSet.length; i++) {
  if (this.isInstanceOf(this.exampleSet[i], FileItem)) {

   this.uploader.queue.push(this.exampleSet[i]);
  } else {
   if (this.exampleSet[i].example.trim().length != 0) {
    this.exampleList.push(this.exampleSet[i]);
   }
  }
 }
}

and then I try to upload the images using this.uploader.uploadAll(); but the Upload request is not sent to the server. I checked the uploader weather it is working or not using <input type="file" title="upload image" ng2FileSelect [uploader]="uploader" accept="image/png,image/gif,image/jpeg" multiple /> but this is working absolutely fine and as expected. What am I doing wrong. any help would be appretiated/

I am using ng2FileSelect with *ngFor The sample code looks something like this ``` <tr *ngFor="let item of exampleSet; let i = index;"> <td class="media-left"> <img src="" imgPreview [image]="item?._file" class="media-object" *ngIf="item?._file" /> <input type="file" title="" ng2FileSelect [uploader]="uploader" accept="image/png,image/gif,image/jpeg" *ngIf="!item?._file" (change)="onTempImageSelected(i);" /> </td> <td class="form-group"> <textarea class="form-control" type="text" [(ngModel)]="item.example" [ngModelOptions]="{standalone: true}"></textarea> </td> <td> <div class="btn btn-primary btn-xs" style="height: 25px; margin-top: 10%; margin-left: 14%;" (click)="removeExample(item);"> <span class="glyphicon glyphicon-trash" (click)="removeExample(item);"style="font-size: 15px; margin-top: 3px;"></span> </div> </td>  </tr> onTempImageSelected(index) { var tempExample = this.exampleSet[index]; var tempFile = this.uploader.queue[0]; tempFile.example = tempExample.example; this.exampleSet[index] = tempFile; this.uploader.clearQueue(); } ``` ![example screen](https://user-images.githubusercontent.com/12543674/39357269-0252fc5e-4a30-11e8-997d-39afc51315c9.JPG) Basically what i am trying to do is I have exampleSet that can either contains textualexample or image + text as example as shown above. And whenever a new image is selected I push that image into exampleSet and preview for the same is available. While uploading this data to the server what I did is I segregate the Images using something like this ``` segregateExamples() { this.exampleList = []; for (var i = 0; i < this.exampleSet.length; i++) { if (this.isInstanceOf(this.exampleSet[i], FileItem)) { this.uploader.queue.push(this.exampleSet[i]); } else { if (this.exampleSet[i].example.trim().length != 0) { this.exampleList.push(this.exampleSet[i]); } } } } ``` and then I try to upload the images using `this.uploader.uploadAll();` but the Upload request is not sent to the server. I checked the `uploader` weather it is working or not using `<input type="file" title="upload image" ng2FileSelect [uploader]="uploader" accept="image/png,image/gif,image/jpeg" multiple />` but this is working absolutely fine and as expected. What am I doing wrong. any help would be appretiated/

mayur9293 commented

2018-04-27 10:40:44 +00:00

(Migrated from github.com)

#998 I think this may solve the problem. Haven't tried it yet. Will acknowledge once tried this option

[#998](https://github.com/valor-software/ng2-file-upload/issues/998) I think this may solve the problem. Haven't tried it yet. Will acknowledge once tried this option

koenvanderlinden commented

2018-04-27 15:51:01 +00:00

(Migrated from github.com)

@mayur9293 In your code I see you use this.uploader.queue.push(). I think you should use the method addToQueue(files: File[], options?: FileUploaderOptions, filters?: FilterFunction[] | string).
If you inspect the source code of addToQueue, it does a whole lot more then just adding a file to a local array.

@mayur9293 In your code I see you use this.uploader.queue.push(). I think you should use the method addToQueue(files: File[], options?: FileUploaderOptions, filters?: FilterFunction[] | string). If you inspect the source code of addToQueue, it does a whole lot more then just adding a file to a local array.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#1015