Unable to change URL after instantiating FileUploader #293

New Issue

2016-07-10T17:39:55Z

Vantablack commented

2016-07-10 17:39:55 +00:00

(Migrated from github.com)

I've instantiated FileUploader in this manner

constructor () {
        private URL = 'https://evening-anchorage-3159.herokuapp.com/api/';
        private uploader: FileUploader = new FileUploader({url : this.URL});
} // end of constructor()

However tried to change the upload URL later on but realised that this.uploader.uploadAll() still uploads to the first URL.

I've tried the code below and it doesn't work

this.uploader.setOptions({
        url: 'https://example-new-url.com/api/'
});

Any help will be highly appreciated! Thanks!

Version

ng2-file-upload: 1.0.3

I've instantiated FileUploader in this manner ``` typescript constructor () { private URL = 'https://evening-anchorage-3159.herokuapp.com/api/'; private uploader: FileUploader = new FileUploader({url : this.URL}); } // end of constructor() ``` However tried to change the upload URL later on but realised that `this.uploader.uploadAll()` still uploads to the first URL. I've tried the code below and it doesn't work ``` typescript this.uploader.setOptions({ url: 'https://example-new-url.com/api/' }); ``` Any help will be highly appreciated! Thanks! **Version** - ng2-file-upload: 1.0.3

Vantablack commented

2016-07-21 07:14:16 +00:00

(Migrated from github.com)

@valorkin Could you take a look at this?

Vantablack commented

2016-07-21 09:38:55 +00:00

(Migrated from github.com)

Nevermind I managed to temporarily solve it.
Steps taken:

HTML

<input #fileUpload type="file" ng2FileSelect [uploader]="uploader" multiple/>

Typescript

// Codes...

@ViewChild('fileUpload') public fileUpload: ElementRef;
private uploader: FileUploader;

// Codes...

submitForm (): void {
  let newUrl = "http://www.new-url.com/";

  // Update uploader URL
  this.uploader.setOptions({ url: newUrl });

  // Clear the item queue (somehow they will upload to the old URL)
  this.uploader.clearQueue();

  // Dispatch new Event to invoke file-select.directive's onChange listener
  this.fileUpload.nativeElement.dispatchEvent(new Event("change"));

  // Setting the proper alias
  this.uploader.queue.forEach((currentItem) => {
    currentItem.alias = "photo";
  });

  this.uploader.uploadAll();
} // end of submitForm()

References:

Nevermind I managed to temporarily solve it. Steps taken: `HTML` ``` html <input #fileUpload type="file" ng2FileSelect [uploader]="uploader" multiple/> ``` `Typescript` ``` typescript // Codes... @ViewChild('fileUpload') public fileUpload: ElementRef; private uploader: FileUploader; // Codes... submitForm (): void { let newUrl = "http://www.new-url.com/"; // Update uploader URL this.uploader.setOptions({ url: newUrl }); // Clear the item queue (somehow they will upload to the old URL) this.uploader.clearQueue(); // Dispatch new Event to invoke file-select.directive's onChange listener this.fileUpload.nativeElement.dispatchEvent(new Event("change")); // Setting the proper alias this.uploader.queue.forEach((currentItem) => { currentItem.alias = "photo"; }); this.uploader.uploadAll(); } // end of submitForm() ``` References: - [How to trigger onChange event manually](http://stackoverflow.com/a/23612498/3903483) - [file-select.directive.ts](https://github.com/valor-software/ng2-file-upload/blob/development/components/file-upload/file-select.directive.ts#L28) - [file-uploader.class.ts](https://github.com/valor-software/ng2-file-upload/blob/development/components/file-upload/file-uploader.class.ts#L123)

👍 1

PaulChan1991 commented

2016-08-04 04:19:14 +00:00

(Migrated from github.com)

You can set url for each item to change the url :

for (var index = 0; index < this.uploader.queue.length; index++) {
var element = this.uploader.queue[index];
element.alias = "photo";
element.url = 'https://example-new-url.com/api/';
}

You can set url for each item to change the url : for (var index = 0; index < this.uploader.queue.length; index++) { var element = this.uploader.queue[index]; element.alias = "photo"; element.url = 'https://example-new-url.com/api/'; }

👍 2

tom10271 commented

2016-09-20 06:16:38 +00:00

(Migrated from github.com)

        this.uploader.queue.forEach((elem)=> {
            elem.alias = "photo";
            elem.url = 'https://example-new-url.com/api/';
        });

This is simpler.

``` this.uploader.queue.forEach((elem)=> { elem.alias = "photo"; elem.url = 'https://example-new-url.com/api/'; }); ``` This is simpler.

👍 4

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#293