My current challenge involves uploading a file from a phone file system using Nativescript 7. I've experimented with various methods such as nativescript-background-http, nativescript-http-formdata, and even HttpClient imported from @angular/common/http. However, none of these approaches seem to be effective in my case. The server I am working with is powered by RocketChat (API reference here), and interestingly, I have been able to successfully upload files using Insomnia REST Client.
const formData = new FormData();
var file = this._audioFolder.getFile("file.mp3");
formData.append("file", file, "file.mp3");
this.httpClient.post<any>("https://myserver.com/api/...", formData, {
headers: {
"X-Auth-Token": "my_token",
"X-User-Id": "my_id",
"Content-Type": "multipart/form-data; boundary=---011000010111000001101001"
}
}).subscribe((resp) => {
console.log(resp);
}
However, I encountered the error: Argument of type 'File' is not assignable to parameter of type 'string | Blob' when attempting to append file to formData. In an attempt to resolve this, I tried converting the file to a Blob using the following code snippet:
getBase64String(file: fs.File) {
const data = file.readSync();
//data.base64EncodedStringWithOptions(0); iOS
return android.util.Base64.encodeToString(data, android.util.Base64.NO_WRAP);
}
Subsequently, I proceeded with:
const blob = new Blob([base64file], {type: "audio/mp3"});
formData.append("file", blob, "file.mp3");
Although this was accepted by the FormData append method, the response indicated an error:
"error": {
"success": false,
"error": "File required"
}
After researching further, I came across a potential solution on GitHub that caught my attention:
formData.append('file', {
uri: fileInfo.path,
type: fileInfo.type,
name: encodeURI(fileInfo.name) || 'fileMessage'
});
Yet, this resulted in another error: Argument of type '{ uri: string; type: string; name: string; }' is not assignable to parameter of type 'string | Blob'.
It appears that there may be complications arising from the fact that the File class derived from nativescript/file-system is unique and perhaps cannot be directly considered as a Blob object. I also attempted to convert it into a buffer array using the atob function, but unfortunately, the method proved to be undefined in this context.
Subsequently, I decided to install nativescript-background-http and followed an example from the documentation, only to encounter an error:
var task = session.uploadFile(file, request);
The error message indicated that an instance of Observable cannot be invoked without using new. Similarly, when I attempted to utilize nativescript-http-formdata, an issue arose at the instantiation line:
let fd = new TNSHttpFormData();
This situation has left me feeling perplexed, especially considering that the operation is typically quite straightforward, and users of this plugin are generally expected to instantiate the class.
Given this scenario, I am open to exploring alternative solutions or workarounds. While I am unable to modify the backend APIs, I am willing to consider any suggestions you might have for achieving a simple file upload via HTTP POST method.