Example uploading file using tauri http

[NinjaJake86]

Hello!

Does anyone have an example of how to upload a file using the taurl http api? trying currently and failing

       const client = await getClient();

        console.log(this.form.fileData);
        client.request({
          url: '***',
          method: 'POST',
          headers: {
            'Accept': 'application/json, text/plain, */*'
          },
          body: Body.json({name: this.form.name, fileData: this.form.fileData})
        }).then(response => {});

this.form.fileData is provided by a html file input, thanks!

[zbjcs]

headers:{"Content-Type": "multipart/form-data"},
body: Body.form({ 
  fileData: { 
    file: '/path/to/file', // either a path or an array buffer of the file contents
    mime: 'image/jpeg', // optional
    fileName: 'image.jpg' // optional
  } 
})

the Cargo feature http-multipart must be enabled

[liudonghua123]

I have the same issue when I try to upload file using tauri http.

See also my changes on liudonghua123/hoppscotch-app@89ec049#diff-fed4d80eba86a6e74eb47907f2dead6d37714c1895af8e2ff3ee52ec60b0cea3.

[syokensyo]

body: Body.form({ 
  fileData: { 
    file: ###do not pass file path here, you need to pass file's content ie. Uint8Array###
    mime: 'image/jpeg', // optional
    fileName: 'image.jpg' // optional
  } 
})

Do not pass file path to the file key, you need to pass file's content ie. Uint8Array

[slimandslam]

This example works:

import { getClient, Body, ResponseType } from "@tauri-apps/api/http";
const client = await getClient();

const formData = new FormData();
formData.append('somefile', fileobj, 'myfile.dat');
formData.append('somedata', "a bit of data");
formData.append('morestuff', stuff);

const formBody = Body.form(formData);

 const response = await client.request({
      method: 'POST',
      url: servicepath,
      body: formBody,
      type: "Json",
      headers: {
        "Content-Type" : "multipart/form-data"
      }
      });
      

[igordertigor]

Hello,
unfortunately, none of the above worked for me (getting 422 errors). I've tried both versions using the path to the file and using the result of tauri's fs.readBinaryFile. Notably, I can curl the respective API using this command:

curl -i -X POST \
  -H "Authorization: Bearer xxxxxxx" \
  -F "fileup=@/path/to/my/file
  <my-endpoint-url>

I'm getting the same results when using tauri's http.fetch and when going through the client as the examples above do. I get the same results when creating the formdata as suggested by @slimandslam or when using a body created as

const body = Body.from({
  fileup: {
    file: "/path/to/my/file"
  }
})

or

const body = Body.from({
  fileup: {
    file: await readBinaryFile("/path/to/my/file")
  }
})

What am I missing? Any suggestions what else I could look at?

[igordertigor]

To answer my own question: It seems that contrary to the documentation, the fileName argument is mandatory in the filePart<T> object.

[liudonghua123]

By default it sets the application/x-www-form-urlencoded Content-Type header, but you can set it to multipart/form-data if the Cargo feature http-multipart is enabled.

from the doc.

You should enable the Cargo feature http-multipart and config the multipart file as the example shown.

[jkinggg]

The documentation could be updated to better specify how to update the Cargo.toml file. From the current documentation, I assumed it just meant installing the http-multipart package, but you also have to set up your dependencies as mentioned in this comment.

[dependencies]
tauri = { version = "1.3", features = ["api-all", "http-multipart"] }