How to utilize a file input field on a form in SuiteCommerce
Companies often want a file input field on SuiteCommerce forms that are built for them. Getting the files into NetSuite can be tricky, but the necessary code is included here.
Date
August 18, 2025
Read
4 min
When implementing or further customizing your SuiteCommerce site, you might find yourself wanting to add a file input field on a SuiteCommerce form. However, getting the files into NetSuite can be tricky. The code below walks you through the front-end and back-end code needed to add this file upload field to your SuiteCommerce form.
Front End Code
In your front-end view, add an event listener function for file input fields:
events: {
'change input[type="file"]': "handleFileAdd",
},
/**
* Validate and format the file added.
* @param {Event Object} event
*/
handleFileAdd: function (event) {
//remove an error message attached to the file field if it exists
let fieldError = $(`#my-file-input-error`);
!!fieldError.length && fieldError.remove();
//do nothing if there are no "file(s)" in the event object
if (!(event.target && event.target.files && event.target.files[0])) return;
let file = event.target.files[0];
//ensure the file is smaller than some pre-determined size limit
if (file.size > 1000 * 1000 * 10) {
//add an error message if the file is too big
$(event.target).after(
`
The selected file is too large. The maximum file size is 10 megabytes (MB).
`
);
}
//format the file data for the https request
else {
//declare a file reader object
const reader = new FileReader();
//add listener for the reader
reader.addEventListener(
"load",
() => {
//save the formatted file data (base64 encrypted) to your model
this.model.set("fileData", {
name: file.name,
type: file.type,
data: reader.result.split(",")[1], //this is needed to remove some metadata off the front of the encrypted string
});
},
false
);
//trigger the reader listerer function and pass it the file
reader.readAsDataURL(file);
}
},
The above listener will validate and format your data so that it is ready to send to a backend service file.
Even after doing the above, you will likely need to overwrite the form submission function to ensure your file data is sent correctly to the backend.
Back End Code
Assuming your code correctly passed the file data to your service file, you can convert that data to a file and save it to the file. cabinet as follows:
/**
* Add file to file cabinet.
* @param {Object} fileToAdd: based on an object matching the earlier code snippet
*/
function addFile (fileToAdd) {
try {
// this file type map maps the incoming file type data to the file module
// Type ENUM. The mapping does NOT cover all potential file types.
let fileTypeMap = {
"text/csv": file.Type.CSV,
"application/vnd.ms-excel": file.Type.EXCEL,
"text/javascript": file.Type.JAVASCRIPT,
"image/jpeg": file.Type.JPGIMAGE,
"application/json": file.Type.JSON,
"application/ld+json": file.Type.JSON,
"video/mp4": file.Type.MPEGMOVIE,
"video/mpeg": file.Type.MPEGMOVIE,
"audio/mp3": file.Type.MP3,
"application/pdf": file.Type.PDF,
"text/plain": file.Type.PLAINTEXT,
"image/png": file.Type.PNGIMAGE,
"application/vnd.ms-powerpoint": file.Type.POWERPOINT,
"application/vnd.ms-powerpoint": file.Type.POWERPOINT,
"image/svg+xml": file.Type.SVG,
"image/tiff": file.Type.TIFFIMAGE,
"application/msword": file.Type.WORD,
"application/vnd.openxmlformats-officedocument.wordprocessingml.document":
file.Type.WORD,
"application/xml": file.Type.XMLDOC,
"application/zip": file.Type.ZIP,
"application/x-7z-compressed": file.Type.ZIP,
};
//use the file module to create a file
let fileObj = file.create({
name: fileToAdd.name,
fileType: fileTypeMap[fileToAdd.type],
contents: fileToAdd.data,
description: "Describe your file",
encoding: file.Encoding.UTF8,
folder: -20, //User Documents or whatever folder you want
});
//save your file
let fileId = fileObj.save();
} catch (error) {
log.error("addFile error", error);
}
},
Your file is now saved to the file cabinet and can be attached to records as needed!
We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!
If you have general questions about SuiteCommerce or more specific questions about how our team can support your business as you implement NetSuite or SuiteCommerce, feel free to contact us anytime. Anchor Group is a certified Oracle NetSuite Alliance Partner and Commerce Partner equipped to handle all kinds of NetSuite and SuiteCommerce projects, large or small!
We are a premium SuiteCommerce agency that creates powerful customer portals. Unlike our competitors, we have already solved your problems.
