Media Files upload using POST request

[Sohailshah20]

In the dashboard, I can upload any media file ( pdfs, word, images. How can I use the POST request to upload any media file?

[reganwolfrom]

Hello @Sohailshah20,

We have some documentation on uploading any size file here: https://docs.formkiq.com/docs/how-tos/api-add-documents#adding-document-greater-than-5-mb

There are two endpoints, a POST to get an S3 signed URL, /documents/uploads, and once you have that URL you then make a PUT call to that URL with the file object.

Here is the JavaScript code we use to get the signed URL: https://github.com/formkiq/formkiq-client-sdk-javascript/blob/master/build/src/api/DocumentsApi.js#L366

Here is the JavaScript code we use to make the PUT to the S3 signed URL: https://github.com/formkiq/formkiq-client-sdk-javascript/blob/master/build/src/ApiClient.js#L89C49-L89C49

Please let me know if this helps. Thanks!

[reganwolfrom]

I also asked ChatGPT to provide a simple JavaScript example:

// Function to get the large file upload URL async function getUploadUrl(apiUrl, authToken, filePath) { const response = await fetch(${apiUrl}/documents/uploads?path=${encodeURIComponent(filePath)}`, {
method: 'GET',
headers: {
'Authorization': authToken
}
});

if (!response.ok) {
throw new Error(HTTP error! status: ${response.status});
}

return response.json(); // This will return the URL and documentId
}

// Function to upload the file to the obtained URL
async function uploadFile(uploadUrl, file, fileContentType) {
const response = await fetch(uploadUrl, {
method: 'PUT',
headers: {
'Content-Type': fileContentType
},
body: file // This is your file object
});

if (!response.ok) {
throw new Error(HTTP error! status: ${response.status});
}

return response.text(); // Or handle the response as needed
}

// Example usage
const HTTP_API_URL = 'https://HTTP_API_URL'; // Replace with your actual API URL
const AUTHORIZATION_TOKEN = 'AUTHORIZATION_TOKEN'; // Replace with your actual token
const filePath = 'sample.pdf';
const file = document.querySelector('input[type=file]').files[0]; // This is your file input on your HTML
const FILE_CONTENT_TYPE = file.type; // This should be the file's MIME type

getUploadUrl(HTTP_API_URL, AUTHORIZATION_TOKEN, filePath)
.then(data => {
// Use the URL from the response to upload the file
uploadFile(data.url, file, FILE_CONTENT_TYPE)
.then(result => {
console.log('File uploaded successfully:', result);
})
.catch(uploadError => {
console.error('Upload failed:', uploadError);
});
})
.catch(urlError => {
console.error('Failed to get upload URL:', urlError);
});
`