File parameters #598

New Issue

2017-01-31T13:50:09Z

VitaliyKovtun commented

2017-01-31 13:50:09 +00:00

(Migrated from github.com)

Hey. I would like to know, if I can pass parameters within uploaded file?
I have


export class AttachmentPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, public attachmentService: Attachment, public authService: Authentication, public socketService: Socket) {}

  public uploader: FileUploader = new FileUploader({
    url: `${API_ENDPOINT}/api/v1/messages/` + this.navParams.get('messageId') + `/attachments`
  });
  public hasBaseDropZoneOver: boolean = false;
  public hasAnotherDropZoneOver: boolean = false;

  public fileOverBase(e:any): void {
    this.hasBaseDropZoneOver = e;
  }

  public fileOverAnother(e:any): void {
    this.hasAnotherDropZoneOver = e;
  }

}

And I need to save Attachment object with image file as field, not only image itself.
How can I do that?
Thank you.

Hey. I would like to know, if I can pass parameters within uploaded file? I have ``` export class AttachmentPage { constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, public attachmentService: Attachment, public authService: Authentication, public socketService: Socket) {} public uploader: FileUploader = new FileUploader({ url: `${API_ENDPOINT}/api/v1/messages/` + this.navParams.get('messageId') + `/attachments` }); public hasBaseDropZoneOver: boolean = false; public hasAnotherDropZoneOver: boolean = false; public fileOverBase(e:any): void { this.hasBaseDropZoneOver = e; } public fileOverAnother(e:any): void { this.hasAnotherDropZoneOver = e; } } ``` And I need to save Attachment object with image file as field, not only image itself. How can I do that? Thank you.

👍 5

usama-jarral commented

2017-02-02 09:58:53 +00:00

(Migrated from github.com)

I'm also having issues with additional parameters I noticed that there is formdata attribute but no way to add additional parameters.

sanorama commented

2017-02-02 13:17:41 +00:00

(Migrated from github.com)

+1

tproenca commented

2017-02-16 18:57:03 +00:00

(Migrated from github.com)

+1

vixeven commented

2017-06-24 16:52:12 +00:00

(Migrated from github.com)

Anyone have a solution?

usama-jarral commented

2017-07-08 12:27:04 +00:00

(Migrated from github.com)

Alternate library for this solution https://github.com/babarxm/ng-uploader

loiane commented

2017-08-30 21:26:54 +00:00

(Migrated from github.com)

Needed this scenario today. Doing some debugging, I found this code in the file-uploader.class (line ~234):

if (!this.options.disableMultipart) {
            sendable = new FormData();
            this._onBuildItemForm(item, sendable);
            sendable.append(item.alias, item._file, item.file.name);
            if (this.options.additionalParameter !== undefined) {
                Object.keys(this.options.additionalParameter).forEach(function (key) {
                    sendable.append(key, _this.options.additionalParameter[key]);
                });
            }
        }

So if you do not disable the multipart, you can pass additionalParameter to the FileUploader:

public uploader: FileUploader = new FileUploader({
    url: this.URL,
    additionalParameter: {
      comments: 'sdfsfsdfsdfsdfsdf'
    }
  });

Needed this scenario today. Doing some debugging, I found this code in the `file-uploader.class` (line ~234): ```js if (!this.options.disableMultipart) { sendable = new FormData(); this._onBuildItemForm(item, sendable); sendable.append(item.alias, item._file, item.file.name); if (this.options.additionalParameter !== undefined) { Object.keys(this.options.additionalParameter).forEach(function (key) { sendable.append(key, _this.options.additionalParameter[key]); }); } } ``` So if you do not disable the multipart, you can pass `additionalParameter` to the FileUploader: ```js public uploader: FileUploader = new FileUploader({ url: this.URL, additionalParameter: { comments: 'sdfsfsdfsdfsdfsdf' } }); ```

👍 4

ArnaudPel commented

2017-09-29 17:24:11 +00:00

(Migrated from github.com)

If I understand your issue correctly, the onBuildItemForm extension point should do the job (mentioned here):

uploader.onBuildItemForm = (fileItem, form) => {
  form.append('another_field', 'another_value');
  return {fileItem, form};
};

I've been able to successfully add parameters to the POST request that way. Just declare it once when you create uploader. Of course 'another_value' can be a function call or a form value, eg. this.form.get('another_field').value

If I understand your issue correctly, the `onBuildItemForm` extension point should do the job ([mentioned here](https://github.com/valor-software/ng2-file-upload/issues/842)): uploader.onBuildItemForm = (fileItem, form) => { form.append('another_field', 'another_value'); return {fileItem, form}; }; I've been able to successfully add parameters to the POST request that way. Just declare it once when you create `uploader`. Of course `'another_value'` can be a function call or a form value, eg. `this.form.get('another_field').value`

👍 1

stephenad commented

2017-10-11 12:04:16 +00:00

(Migrated from github.com)

@loiane

Hi Loiane, I am trying to add parameters like you mention but how do I make sure the Multipart is not disabled, as in my vs code if I use your example it highlights additionalParameter in red and says

"Argument of type '{ url: string; additionalParameter: { comments: string; }; }' is not assignable to parameter of type 'FileUploaderOptions'.
Object literal may only specify known properties, and 'additionalParameter' does not exist in type 'FileUploaderOptions'."

What have I missed, if you look at issue 905 you can see what I am trying to achieve.

Thanks
Andy

@loiane Hi Loiane, I am trying to add parameters like you mention but how do I make sure the Multipart is not disabled, as in my vs code if I use your example it highlights additionalParameter in red and says "Argument of type '{ url: string; additionalParameter: { comments: string; }; }' is not assignable to parameter of type 'FileUploaderOptions'. Object literal may only specify known properties, and 'additionalParameter' does not exist in type 'FileUploaderOptions'." What have I missed, if you look at issue 905 you can see what I am trying to achieve. Thanks Andy

waleed-shahzaib commented

2018-01-08 14:26:54 +00:00

(Migrated from github.com)

Found the solution in issue #673

pnramya commented

2018-08-28 10:43:43 +00:00

(Migrated from github.com)

public uploader: FileUploader = new FileUploader({
url: this.URL,
additionalParameter: {
comments: 'sdfsfsdfsdfsdfsdf'
}
});

how to access the additionalParameter from nodejs??

public uploader: FileUploader = new FileUploader({ url: this.URL, additionalParameter: { comments: 'sdfsfsdfsdfsdfsdf' } }); how to access the additionalParameter from nodejs??

👍 2

inovozenko commented

2018-08-30 18:24:39 +00:00

(Migrated from github.com)

@pnramya

upload(req, res, function (error) {
    console.log(req.body); // <- here your params
});

And I'm using snippet on client-side:

this.fileUploader.onBuildItemForm = (fileItem: any, form: any) => {
    form.append('my-param', 'my-value');
};

@pnramya ``` upload(req, res, function (error) { console.log(req.body); // <- here your params }); ``` And I'm using snippet on client-side: ``` this.fileUploader.onBuildItemForm = (fileItem: any, form: any) => { form.append('my-param', 'my-value'); }; ```

inovozenko commented

2018-08-31 09:21:11 +00:00

(Migrated from github.com)

@pnramya

Or

    const storage = multer.diskStorage({
        destination: function (req, file, cb) {
          cb(null, '/tmp');
        },
        filename: function (req, file, cb) {
          console.log(req.body); // <- here your params
          cb(null, '<filename>');
        }
      });

@pnramya Or ``` const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, '/tmp'); }, filename: function (req, file, cb) { console.log(req.body); // <- here your params cb(null, '<filename>'); } }); ```

noemi-dresden commented

2018-11-14 00:04:41 +00:00

(Migrated from github.com)

@pnramya

upload(req, res, function (error) {
    console.log(req.body); // <- here your params
});

And I'm using snippet on client-side:

this.fileUploader.onBuildItemForm = (fileItem: any, form: any) => {
    form.append('my-param', 'my-value');
};

console.log(req.body) gives me an empty object. @inovozenko do you know why? may be I miss something?

> @pnramya > > ``` > upload(req, res, function (error) { > console.log(req.body); // <- here your params > }); > ``` > And I'm using snippet on client-side: > > ``` > this.fileUploader.onBuildItemForm = (fileItem: any, form: any) => { > form.append('my-param', 'my-value'); > }; > ``` `console.log(req.body)` gives me an empty object. @inovozenko do you know why? may be I miss something?

inovozenko commented

2018-11-14 11:10:31 +00:00

(Migrated from github.com)

@noemi-dresden Hi
First of all you should send some param on client-side:
form.append('my-param', 'my-value');

And then receive it on NodeJS-side:
upload(req, res, function (error) { console.log(req.body); // <- here your params });

@noemi-dresden Hi First of all you should send some param on client-side: `form.append('my-param', 'my-value');` And then receive it on NodeJS-side: `upload(req, res, function (error) { console.log(req.body); // <- here your params });`

noemi-dresden commented

2018-11-14 12:07:26 +00:00

(Migrated from github.com)

@inovozenko thx for the quick reply,

That's was, what I've done and then I got {}, I could see my params while console.log on the client side browser thought

I was trying this as well but it doesn't work

this.uploader = new FileUploader({
      url: URL,
      authToken: localStorage.getItem('token'),
      additionalParameter: this.user.id
    })

When I console.log(this.uploader), I can see the additional parameter under options

@inovozenko thx for the quick reply, That's was, what I've done and then I got `{}`, I could see my params while console.log on the client side browser thought I was trying this as well but it doesn't work ```javascript this.uploader = new FileUploader({ url: URL, authToken: localStorage.getItem('token'), additionalParameter: this.user.id }) ``` When I console.log(this.uploader), I can see the additional parameter under `options`

LailaBouziani commented

2019-05-27 00:20:46 +00:00

(Migrated from github.com)

the solution for this prblm is:

uploader:FileUploader = new FileUploader({url:uri,
authTokenHeader: 'authorization',
authToken: localStorage.getItem('token'),
additionalParameter: { 'name': 'my data'}
});

upload(req, res, function(err){

   console.info('body',JSON.stringify(req.body.name));
});

the solution for this prblm is: uploader:FileUploader = new FileUploader({url:uri, authTokenHeader: 'authorization', authToken: localStorage.getItem('token'), additionalParameter: { 'name': 'my data'} }); upload(req, res, function(err){ console.info('body',JSON.stringify(req.body.name)); });

horatiucherebetiu commented

2019-10-21 06:05:48 +00:00

(Migrated from github.com)

In definition of FileUploader I used : itemAlias
new FileUploader({ url: URL, itemAlias: 'image' });

In definition of **FileUploader** I used : **itemAlias** `new FileUploader({ url: URL, itemAlias: 'image' });`

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#598