Add a possibility to append other values to FormData object #241

New Issue

2016-06-06T11:40:16Z

mmisecius commented

2016-06-06 11:40:16 +00:00

(Migrated from github.com)

I would be nice to extend of your sending method about possibility (e.g calling some new method) which would appends other data to created form object

msfanous commented

2016-06-07 15:46:32 +00:00

(Migrated from github.com)

As pointed out by @dmarginian in a duplicate issue (#12), you can already do this. I have verified that it is working in 1.0.3.

this._uploader.onBuildItemForm = (item, form) => {
form.append("key", "value");
};

As pointed out by @dmarginian in a duplicate issue (#12), you can already do this. I have verified that it is working in 1.0.3. this._uploader.onBuildItemForm = (item, form) => { form.append("key", "value"); };

👍 3

thehashrocket commented

2016-07-30 00:15:23 +00:00

(Migrated from github.com)

@msfanous do you have an example of this working? Like with either drag/drop or just a single upload input?

msfanous commented

2016-08-02 12:03:45 +00:00

(Migrated from github.com)

Hi @thehashrocket. Yes, I did get it working with both the single and multiple upload inputs. There wasn't much to it besides adding those extra lines after constructing the uploader. Is there a specific issue that you're seeing?

// create the uploader
this.uploader = new FileUploader({ url: 'your/url/here'});

// Add in the other upload form parameters.        
this.uploader.onBuildItemForm = (item, form) => {
  form.append(key1, value1);
  form.append(key2, value2);
};

Here's the file selection component. I chose to use my own button and clear way any old files when a new section is made.

<input ng2FileSelect [uploader]="uploader" type="file" #file multiple style="display: none;" />
<button type="button" class="btn btn-primary pull-right" (click)="file.value='';file.click();">
  Upload
</button>

Hi @thehashrocket. Yes, I did get it working with both the single and multiple upload inputs. There wasn't much to it besides adding those extra lines after constructing the uploader. Is there a specific issue that you're seeing? ``` // create the uploader this.uploader = new FileUploader({ url: 'your/url/here'}); // Add in the other upload form parameters. this.uploader.onBuildItemForm = (item, form) => { form.append(key1, value1); form.append(key2, value2); }; ``` Here's the file selection component. I chose to use my own button and clear way any old files when a new section is made. ``` <input ng2FileSelect [uploader]="uploader" type="file" #file multiple style="display: none;" /> <button type="button" class="btn btn-primary pull-right" (click)="file.value='';file.click();"> Upload </button> ```

👍 11 ❤️ 4 🎉 4 😆 2 🚀 2

thehashrocket commented

2016-08-02 12:08:29 +00:00

(Migrated from github.com)

No, that's perfect @msfanous ! Thank you! :)

👍 2

alobmaier commented

2016-12-02 12:48:39 +00:00

(Migrated from github.com)

Is there also a possibility to add your values manually? So not by subscribing to the onBuildItemForm event?
Because I would need to do that after creating the form for each item.

Is there also a possibility to add your values manually? So not by subscribing to the onBuildItemForm event? Because I would need to do that after creating the form for each item.

PyroSA commented

2017-02-18 22:29:41 +00:00

(Migrated from github.com)

In my case I needed to do an async call before the upload 😢

In the onAfterAddingFile I add this async information to item.formData
I then call item.upload() forcing the upload.

Inside the onBuildItemForm I then form.append the relevant fields.

Sadly this forces a type of auto-upload.

In my case I needed to do an async call before the upload 😢 In the `onAfterAddingFile` I add this async information to `item.formData` I then call `item.upload()` forcing the upload. Inside the `onBuildItemForm` I then form.append the relevant fields. Sadly this forces a type of auto-upload.

👍 1

deanb22 commented

2018-03-27 01:12:25 +00:00

(Migrated from github.com)

so can someone tell me how to access this additional form data on the server side in web api 2?

brainmuller77 commented

2020-10-06 19:08:15 +00:00

(Migrated from github.com)

Hi @msfanous please can you help me out on this same issue. i have tried what you did but i dont seem to get it working. is there anything i am not doing right?
this is my uploader instance
public fileUploader: FileUploader = new FileUploader({});

then i do the next part in the ngonit() method like this
this.fileUploader = new FileUploader({ url: "http://localhost/phat/server/post.php"});

this.fileUploader.onBuildItemForm = (fileItem: any, form: FormData): any => {

  form.append('body', this.body);

  
  form.append('file', fileItem);

fileItem.withCredentials = false;
return { fileItem, form };
};

Afterwards i proceed to call an upload method where i do the real post of the form like this
upload(){
let files = this.getFiles();
let requests = [];

files.forEach((file) => {
  let formData = new FormData();
 
  formData.append('file' , file.rawFile, file.name);
  formData.append('body' , this.body);
  formData.append('username' , this.username);

  requests.push(this.uploadingService.uploadFormData(formData));

});

concat(...requests).subscribe(
  (res) => {
    console.log(res);
  },
  (err) => {  
    console.log(err);
  }

}
But still it doesnt work... yet the form values are seen in the request body and can be printed on the console.
can anyone help, what am i doing wrong?

Hi @msfanous please can you help me out on this same issue. i have tried what you did but i dont seem to get it working. is there anything i am not doing right? this is my uploader instance public fileUploader: FileUploader = new FileUploader({}); then i do the next part in the ngonit() method like this this.fileUploader = new FileUploader({ url: "http://localhost/phat/server/post.php"}); this.fileUploader.onBuildItemForm = (fileItem: any, form: FormData): any => { form.append('body', this.body); form.append('file', fileItem); fileItem.withCredentials = false; return { fileItem, form }; }; Afterwards i proceed to call an upload method where i do the real post of the form like this upload(){ let files = this.getFiles(); let requests = []; files.forEach((file) => { let formData = new FormData(); formData.append('file' , file.rawFile, file.name); formData.append('body' , this.body); formData.append('username' , this.username); requests.push(this.uploadingService.uploadFormData(formData)); }); concat(...requests).subscribe( (res) => { console.log(res); }, (err) => { console.log(err); } } But still it doesnt work... yet the form values are seen in the request body and can be printed on the console. can anyone help, what am i doing wrong?

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#241