File does not upload on first attempt. #653

New Issue

2017-03-02T10:54:56Z

yaashaswi commented

2017-03-02 10:54:56 +00:00

(Migrated from github.com)

File does not upload on first attempt, it's throwing 500 Internal Server Error. But, when I try second time, it works.

Html:

`<input type="file" class="form-control" ng2FileSelect [uploader]="uploader_single" />

                                    <div class="col-md-12" style="margin-bottom: 40px" *ngIf="uploader_single?.queue?.length">

                                       [ <h3>Upload queue</h3>](url)
                                        <p>Queue length: {{ uploader_single?.queue?.length }}</p>
                                        <div class="table-responsive">
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th width="50%">File</th>
                                                        <th>Size</th>
                                                        <th>Progress</th>
                                                        <th>Status</th>
                                                        <th>Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr *ngFor="let item of uploader_single.queue">
                                                        <td><strong>{{ item?.file?.name }}</strong></td>
                                                        <td nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                                                        <td>
                                                            <div class="progress" style="margin-bottom: 0;">
                                                                <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                                                            </div>
                                                        </td>
                                                        <td class="text-center">
                                                            <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                                                            <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                                                            <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                                                        </td>
                                                        <td nowrap>
                                                            <button type="button" class="btn btn-success btn-xs"
                                                                    (click)="uploadMultipleFiles(item, 'property_insurance_cert')" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                                                                <span class="glyphicon glyphicon-upload"></span> Upload
                                                            </button>
                                                            <button type="button" class="btn btn-warning btn-xs"
                                                                    (click)="item.cancel()" [disabled]="!item.isUploading">
                                                                <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                                                            </button>
                                                            <button type="button" class="btn btn-danger btn-xs"
                                                                    (click)="item.remove()">
                                                                <span class="glyphicon glyphicon-trash"></span> Remove
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                   `

Component.ts

public uploader: FileUploader = new FileUploader({
       url: WebServiceUrl.UPLOAD, disableMultipart: false, maxFileSize: 50000000, queueLimit: 1
   });

uploadMultipleFiles(alias) {
       this.uploader.setOptions({ itemAlias: alias, disableMultipart: false });
       this.uploader.uploadAll()
   }

File does not upload on first attempt, it's throwing 500 Internal Server Error. But, when I try second time, it works. Html: `<input type="file" class="form-control" ng2FileSelect [uploader]="uploader_single" /> <div class="col-md-12" style="margin-bottom: 40px" *ngIf="uploader_single?.queue?.length"> [ <h3>Upload queue</h3>](url) <p>Queue length: {{ uploader_single?.queue?.length }}</p> <div class="table-responsive"> <table class="table"> <thead> <tr> <th width="50%">File</th> <th>Size</th> <th>Progress</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tbody> <tr *ngFor="let item of uploader_single.queue"> <td><strong>{{ item?.file?.name }}</strong></td> <td nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td> <td> <div class="progress" style="margin-bottom: 0;"> <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div> </div> </td> <td class="text-center"> <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span> <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span> <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span> </td> <td nowrap> <button type="button" class="btn btn-success btn-xs" (click)="uploadMultipleFiles(item, 'property_insurance_cert')" [disabled]="item.isReady || item.isUploading || item.isSuccess"> <span class="glyphicon glyphicon-upload"></span> Upload </button> <button type="button" class="btn btn-warning btn-xs" (click)="item.cancel()" [disabled]="!item.isUploading"> <span class="glyphicon glyphicon-ban-circle"></span> Cancel </button> <button type="button" class="btn btn-danger btn-xs" (click)="item.remove()"> <span class="glyphicon glyphicon-trash"></span> Remove </button> </td> </tr> </tbody> </table> </div> ` Component.ts ``` public uploader: FileUploader = new FileUploader({ url: WebServiceUrl.UPLOAD, disableMultipart: false, maxFileSize: 50000000, queueLimit: 1 }); uploadMultipleFiles(alias) { this.uploader.setOptions({ itemAlias: alias, disableMultipart: false }); this.uploader.uploadAll() } ```

😕 3

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#653