Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

array items grow as form is resubmitted & fields always an array? #979

Closed
trymeouteh opened this issue Sep 29, 2024 · 2 comments
Closed
Labels

Comments

@trymeouteh
Copy link

trymeouteh commented Sep 29, 2024

Support plan

  • Which support plan is this issue covered by? (Community, Sponsor, Enterprise): Community
  • Currently blocking your project/work? (yes/no): No
  • Affecting a production system? (yes/no): No

Context

  • Node.js version: 20.17.0
  • Release Line of Formidable (Legacy, Current, Next): Next
  • Formidable exact version: 3.5.1
  • Environment (node, browser, native, OS): Linux Mint & Firefox
  • Used with (popular names of modules): None

What are you trying to achieve or the steps to reproduce?

When I submit the form twice, three times, etc. I get duplicated form field data. Here is the console output of the form data after every submissions.

Also all the field values are always an array, even if the input field for that value is a text input field? Not sure if this is another issue or not.

Here is my code. Only one JS file and one HTML file...

import fs from 'fs';
import http from 'http';

import { formidable as formidablePackage } from 'formidable';

const port = 8080;

//Will create horizontal line that will fit the width of the terminal window
const horizontalLine = '='.repeat(process.stdout.columns);

const formidable = formidablePackage({
	allowEmptyFiles: true,
	minFileSize: 0,
});

http
	.createServer(async (request, response) => {
		if (request.method === 'POST') {
			let [formFieldData, formFileData] = await formidable.parse(request);

			console.log(formFieldData);
		}

		response.setHeader('Content-Type', 'text/html');

		fs.createReadStream('form.html').pipe(response);
	})
	.listen(port);
<form method="post" enctype="multipart/form-data">
	<input name="myText" />
	<br />
	<input type="checkbox" name="myCheckboxGroupA" />
	<input type="checkbox" name="myCheckboxGroupA" />
	<input type="checkbox" name="myCheckboxGroupA" />
	<br />
	<input type="file" name="myFileA" />
	<br />
	<input type="file" name="myFileB" multiple />
	<br />
	<input type="file" name="myFileC" multiple directory webkitdirectory />
	<br />
	<input type="submit" />
</form>

What was the result you got?

These are the console logs

$ node form.js
{ myText: [ 'hello world' ], myCheckboxGroupA: [ 'on' ] }
{
  myText: [ 'hello world', 'hello world' ],
  myCheckboxGroupA: [ 'on', 'on' ]
}
{
  myText: [ 'hello world', 'hello world', 'hello world' ],
  myCheckboxGroupA: [ 'on', 'on', 'on' ]
}
{
  myText: [ 'hello world', 'hello world', 'hello world', 'hello world' ],
  myCheckboxGroupA: [ 'on', 'on', 'on', 'on' ]
}

What result did you expect?

These are the console logs I expected

$ node form.js
{ myText:  'hello world' , myCheckboxGroupA: [ 'on' ] }
{ myText:  'hello world' , myCheckboxGroupA: [ 'on' ] }
{ myText:  'hello world' , myCheckboxGroupA: [ 'on' ] }
{ myText:  'hello world' , myCheckboxGroupA: [ 'on' ] }
@trymeouteh trymeouteh added the bug label Sep 29, 2024
@ghost

This comment was marked as outdated.

@GrosSacASac
Copy link
Contributor

You should create a new formidable instance on each request.
remove the formidable constant before http.createServer and use the code like the following


http
	.createServer(async (request, response) => {
		if (request.method === 'POST') {
			const formidable = formidablePackage({
                		allowEmptyFiles: true,
                		minFileSize: 0,
            		});
			let [formFieldData, formFileData] = await formidable.parse(request);

			console.log(formFieldData);
		}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants