simple-form-data-function v1.0.1
simple-form-data-function
This package provides a utility function simpleFormData for converting a JavaScript object into FormData format, which is especially useful when the content type is "multipart/form-data". This utility can be used directly in the body of a fetch request.
Installation
To install the package, use npm:
npm install simple-form-data-functionUsage
simpleFormData
The simpleFormData function takes an object and converts it into a FormData instance. This is useful when you need to send form data, including nested objects and arrays, using a fetch request.
Parameters
body: The object to be converted intoFormData.formDataWithChild(optional): A boolean indicating whether thebodycontains nested arrays or not. Default isfalse.
Returns
- A
FormDatainstance with the provided key-value pairs.
Simple Example Without Nested Arrays
If your body object does not contain nested arrays, you can use simpleFormData with the default formDataWithChild parameter set to false (or omit it entirely).
import { simpleFormData } from "simple-form-data-function";
const body = {
name: "John Doe",
email: "john.doe@example.com",
profilePicture: new File(["content"], "profile.jpg"),
};
const formData = simpleFormData(body);
fetch("https://example.com/api/update-profile", {
method: "POST", // or any method you want
body: formData,
})
.then((response) => {
// handle response
})
.catch((error) => {
// handle error
});Example (Array with children)
Here's an example of how to use simpleFormData in a fetch request:
import { simpleFormData } from "simple-form-data-function";
const body = {
id: 1,
publicFiles: [
{ fieldId: 1, file: new File(["content"], "example1.txt") },
{ fieldId: 9, file: new File(["content"], "example2.txt") },
],
privateFiles: [
{ fieldId: 12, file: new File(["content"], "example3.txt") },
{ fieldId: 13, file: new File(["content"], "example4.txt") },
],
};
const formData = simpleFormData(body, true);
fetch("https://example.com/api/upload", {
method: "POST", // or any method you want
headers: {
"Content-Type": "multipart/form-data",
// Another headers options
},
body: formData,
})
.then((response) => {
// handle response
})
.catch((error) => {
// handle error
});Changes and Improvements
- No Need to Manually Create
FormData: The function automatically creates aFormDatainstance, removing the need for the user to manually instantiate it. - Simplified Looping: The function uses a single
forloop to iterate through the entries of thebodyobject, and a helper functionappendToFormDatato handle nested objects and arrays. This reduces the complexity and improves readability. - Handles Various Data Types: The function now correctly handles
Fileobjects, nested objects, and other data types, ensuring all types are appended correctly to theFormData.
This highlights the enhancements made to the simpleFormData function, making it more efficient, easier to use, and capable of handling a wider range of data types and structures.
License
This package is licensed under the MIT License. See the LICENSE file for more information.
Please note that this is a basic README.md template, and you may need to modify it further to match your specific package and requirements