I am trying to integrate Wix with another system and need help transferring files from Wix, which come from an upload button, to an external API. I have set up both frontend and backend code, but when I upload a file, I get an error message saying, ‘I am trying to integrate Wix with another system and need help transferring files from Wix, which come from an upload button, to an external API.’ How can I resolve this issue?
Regards,
Pratik.
Uploading files to a third party is typically done with the fetch() function, so the specific implementation depends on your third party APIs requirements.
Can you explain the flow you are interested in implementing for the file upload?
For example:
- User uploads file using Upload Button element
- File is uploaded to media manager
- File is transferred to third party API
Can you also post a snippet of the code that is causing the issue?
These questions will help me suggest potential APIs that can be used as a solution.
Basically I am trying to integrate WIX with ERPNext(Frappe).
According to my previous message, here is my actual need: With the help of WIX, I created a Job Applicant Page. In this, I used custom input fields to design the job application form. So, I created a custom form with the help of input fields. When I try to send all the data to an external API without an attached file, the API call works. However, when I try to send the same data to the external API with proper authorization, I am facing above error issue in console.
Code snippet : -
For frontend -
import { postJobApplicant } from ‘backend/dataFetcher.web’;
import { uploadFileToERPNext } from ‘backend/uploadFile’; // Ensure the path is correct
var finalUrl = “”;
export function uploadButton1_change(event) {
console.log("inside onchange");
const fileInput = $w('#uploadButton1');
console.log(fileInput)
const file = fileInput.value[0]; // Access the first selected file
// console.log(file)
if (!file) {
console.error('No file selected');
return;
}
finalUrl = "*****" + file.name;
console.log(finalUrl)
console.log("File selected inside if:", file.name);
// Use an async function to handle the file upload
(async () => {
try {
const fileUrl = await uploadFileToERPNext(file); // Ensure `uploadFileToERPNext` is an async function
console.log("File uploaded, URL:", fileUrl);
$w('#text91').text = 'File uploaded successfully!';
$w('#text91').show();
} catch (error) {
console.error('Error uploading file from frontend:', error);
$w('#text91').text = 'Error uploading file. Please try again.';
$w('#text91').show();
}
})();
}
For backend -
import { fetch } from ‘wix-fetch’;
import FormData from ‘form-data’;
import { Permissions } from “wix-web-module”;
export async function uploadFileToERPNext(file) {
Permissions.Anyone,
console.log("inside upload file to erp backend Function");
console.log(file);
const url = 'https://site_name.frappe.cloud/api/method/upload_file';
const authCode = '******';
const form = new FormData();
form.append('file', file);
form.append('is_private', '1');
form.append('folder', 'Home');
form.append('doctype', 'File');
form.append('docname', 'File');
form.append('file_name', file.name);
try {
const response = await fetch(url, {
method: 'POST',
headers: {
'Authorization': authCode
},
body: form
});
if (!response.ok) {
throw new Error(`Failed to upload file: ${response.statusText}`);
}
const result = await response.json();
console.log(result);
return result.data.file_url; // Adjust according to the actual response structure
} catch (error) {
console.error('Error uploading file:', error);
throw new Error('File upload failed');
}
}
As per this File from front end not going to backend, And facing issue.
Additionally - My API endpoint and key are correct. I tested it using Postman, and it’s working fine.
const file = fileInput.value[0];
...
const fileUrl = await uploadFileToERPNext(file);
I noticed you are passing the $w('#uploadButton1').value[0] to your backend function. This stores metadata related to the user’s file (such as name, size, valid, validationMessage) but not the actual file data itself.
Additionally, by passing it to a backend function you are utilizing information about a user’s local file on a serverless function that does not have access to the user’s local file system.
Check with the third party API provider to see what request data type their upload function expects. From there you can implement it to upload locally (frontend) or after the file is uploaded onto the Wix Media Manager (backend).
On a side note, I recommend using the Secrets API to securely reference authorization keys in your backend functions.