J’ai travaillé sur un plugin pour Obsidian et j’ai eu beaucoup de mal à faire fonctionner le téléchargement d’images. Voici ce que j’ai jusqu’à présent :
async uploadImages(imageReferences: string[]): Promise<string[]> {
const imageUrls = [];
for (const ref of imageReferences) {
const filePath = this.app.metadataCache.getFirstLinkpathDest(ref, this.activeFile.name)?.path;
if (filePath) {
const file = this.app.vault.getAbstractFileByPath(filePath) as TFile;
if (file) {
try {
const arrayBuffer = await this.app.vault.readBinary(file);
const blob = new Blob([arrayBuffer]);
const boundary = '----WebKitFormBoundary7MA4YWxkTrZu0gW';
let body = '';
body += `--${boundary}\r\n`;
body += `Content-Disposition: form-data; name=\"type\"\r\n\r\n`;
body += "composer\r\n";
body += `--${boundary}\r\n`;
body += `Content-Disposition: form-data; name=\"synchronous\"\r\n\r\n`;
body += "true\r\n";
body += `--${boundary}\r\n`;
body += `Content-Disposition: form-data; name=\"files[]\"; filename=\"${file.name}\"\r\n`;
body += `Content-Type: image/jpg\r\n\r\n`
body += blob + '\r\n';
body += `--${boundary}--\r\n`;
console.log(body)
const formData = new TextEncoder().encode(body)
const url = `${this.settings.baseUrl}/uploads.json`;
const headers = {
"Api-Key": this.settings.apiKey,
"Api-Username": this.settings.disUser,
"Content-Type": `multipart/form-data; boundary=${boundary}`
};
const response = await requestUrl({
url: url,
method: "POST",
body: formData,
throw: false,
headers: headers,
});
//const response = await fetch(url, {
// method: "POST",
// body: formData,
// headers: new Headers(headers),
//});
console.log(`Upload Image response: ${response.status}`);
//if (response.ok) {
if (response.status == 200) {
const jsonResponse = response.json();
console.log(`Upload Image jsonResponse: ${JSON.stringify(jsonResponse)}`);
imageUrls.push(jsonResponse.url);
} else {
new NotifyUser(this.app, `Error uploading image: ${response.status}`).open();
console.error(`Error uploading image: ${JSON.stringify(response.json)}`);
//console.error("Error uploading image:", response.status, await response.text());
}
} catch (error) {
new NotifyUser(this.app, `Exception while uploading image: ${error}`).open();
console.error("Exception while uploading image:", error);
}
} else {
new NotifyUser(this.app, `File not found in vault: ${ref}`).open();
console.error(`File not found in vault: ${ref}`);
}
} else {
new NotifyUser(this.app, `Unable to resolve file path for: ${ref}`).open();
console.error(`Unable to resolve file path for: ${ref}`);
}
}
return imageUrls;
}
Je construis un multipart/form-data car requestURL() ne peut pas accepter un formData() comme paramètre. Seuls string ou arrayBuffer sont acceptés. Je ne peux pas utiliser fetch() car j’obtiens une erreur CORS. Avec ce code (et de nombreux ajustements mineurs au body), j’obtiens l’erreur suivante :
Error uploading image: {“errors”:[“You supplied invalid parameters to the request: Discourse::InvalidParameters”],“error_type”:“invalid_parameters”}
