files in multi-part

Webix JS
#1

Hi Webix Team,

https://webix.com/snippet/82b424a8

I have a post call URL like:“test”+param1+’/’+param2.

I have put autosend property: False for uploader.

On One button Click, I want to send the File Array to above url.

How can I do that in order to send the filearray with above kind of url?

#2

Hello,

First of all, please pay attention that autosend:false should contain a boolean value, not string one (as in your snippet).

Secondly, the easiest way to send files on a button click one by one is to call the uploader send method. It will take the url provided by the upload setting and send all the necessary requests.

Please, check the snippet: https://webix.com/snippet/c8469612

To send all the files by a single request, you will need to create a FormData object, append all the files and send the request with plain Javascript:

var formData = new FormData();
//iterate files added to Uploader
$$("uploader").files.data.each(function(obj, i){
      formData.append("file"+i, obj.file);
});

var xhr = new XMLHttpRequest();
xhr.open('POST', "test"+param1+'/'+param2, true);
xhr.send(formData);

Here’s the snippet to illustrate the above code: https://webix.com/snippet/9b6df3f6

#3

Hi Helga,

It works for single uploader.

But I have a scenario in which I have multiple file uploaders on single page, in which I have created a global fileArray, in this fileArray I am pushing all the files of all the uploader.

So my array is like:

[{ file: File, name: “Standard_CSV.csv”, id: 1516249090028, size: 154495, sizetext: “150.87 Kb”, type: “csv”, context: undefined, status: “client”, index: “0” },
{ file: File, name: “Standard_CSV_1.csv”, id: 1516249090029, size: 154495, sizetext: “150.87 Kb”, type: “csv”, context: undefined, status: “client”, index: “0” }]

And instead of using following logic:

$$(“uploader”).files.data.each(function(obj, i){
formData.append(“file”+i, obj.file);
});

I am using:
for(i=0;i<fileArray.length;i++){
console.log(‘fileArray[i]::’+JSON.stringify(fileArray[i]));
formData.append(‘file_’+i, fileArray[i]);
}

But in such scenario it shows: In browser network instead of file data, it shows [Object Object].

So in backend it shows input stream as:[Object Object] for file.

Is there a solution for this.

#4

did you try fileArray[i].file?