How to upload file？

[kitepad]

My scenario:

1. User open a FolderSelection dialog.
2. Select single or multiple file (.png .jpg, .gif or .docx)
3. upload selected files to remote server.

Should I use Fetch API or mithril.js. I don't know if mithril.js FileUpload/XHR is workable with Sciter.js.

[c-smile]

Fetch API supports file upload, I'll make sample for that.

[kitepad]

Andrew, thanks for your help. Expect to see your sample soon.

[c-smile]

See samples/fetch(AJAX)/test-upload.htm in 4.4.7.4

[kitepad]

I tried this sample and it's running ok. But I don't understand this statement and I cann't find any document about it.
` let dataToSend = {"file1": file, "comment1": "this is just a test" };

var resp = await fetch("https://sciter.com/test/test-file-receiver.php", {
  method: "POST",
  body: dataToSend
});`

file1 and comment1 are used in dataToSend as json key. Is it neededy by demo php file?
I have to write my server logic to parse body and I cann't issue standard form submission request. I find some javascript demo code to upload file , but most of them required FormData, but is not exist in sciter.js.

[kitepad]

I write a sample server using Deno (https://deno.land) :
import Aqua from "https://deno.land/x/aqua/mod.ts"; const app = new Aqua(3100); app.get("/", (req) => { return "Hello, World!"; }); app.post("/upload", async (req) => { console.log(req.files); return "Uploaded!"; });.

When I use curl to upload file, success. curl -XPOST -F "file=@test-fetch.htm" http://127.0.0.1:3100/upload.
But it's failed when run scapp test-upload.htm. Only change fetch's URL to http://127.0.0.1:3100/upload.

[c-smile]

This in Sciter:

let dataToSend = {"file1": file, "comment1": "this is just a test" };

var resp = await fetch("https://sciter.com/test/test-file-receiver.php", {
  method: "POST",
  body: dataToSend
});

is equivalent of

    const dataToSend = new FormData();
    dataToSend.append('file1',file);    
    dataToSend.append('comment1',"this is just a test");    
    const resp = await fetch("https://sciter.com/test/test-file-receiver.php", {
          method:'POST',
          body:dataToSend
     } );

in browsers.

If body is an object (map) that contains File objects, Sciter will send Content-Type: multipart/form-data data, otherwise Content-Type: application/x-www-form-urlencoded - in the same way as browsers do.

[kitepad]

I tried your sample code, I think Content-Type: multipart/form-data should be sent, but I see is "content-type": "application/x-www-form-urlencoded;"

[kitepad]

How can I change content-type header and others？

[c-smile]

Could you explain why do you need to change content-type header?

If that's about posting data then check: https://stackoverflow.com/a/26791188/421163

[kitepad]

Base on your comment : "If body is an object (map) that contains File objects, Sciter will send Content-Type: multipart/form-data data, otherwise Content-Type: application/x-www-form-urlencoded - in the same way as browsers do."

I think Sciter should send multipart/form-data content-type for test-upload.htm, but my demo server received content-type is application/x-www-form-urlencoded. I think it's not correct.
Below is my server log for your reference:

url: "/upload",
headers: {
accept: "/",
"accept-encoding": "gzip, deflate",
"content-type": "application/x-www-form-urlencoded;charset=utf-8",
"user-agent": "Sciter.JS/4.4.7.3 (Windows;Windows-10.2;en)",
host: "127.0.0.1:3100",
"content-length": "0",
connection: "Keep-Alive",
"cache-control": "no-cache"
},
method: "POST",

[kitepad]

I check my demo server using curl to upload same file, server log output is content-type: multipart/form-data. I don't know what's happened and why.

[kitepad]

I know why. It is my mistake. It's ok after I upgrade to 4.4.7.4.

Thanks.