Dynamic Form File Picker Upload Video Failed

Previously, it was working and now out of sudden the file picker is not working when uploading video as shown in the image. Photo can be uploaded without any problems. This is the error message 413 Request Entity Too Large, may I know how to solve it?

Project name: Durian
Team name: Operations
Environment name: Production
Agent (forest package) name & version: “@forestadmin/agent”: “^1.36.7”,
Database type: PostgreSQL

Hello @Simon_Chen,

Indeed, it seems you just hit the default max payload size. You can change the settings easily in the agent by configuring the maxBodySize parameter.

Let me know if it helps.

Kind regards,
Morgan

I have tried to set the maxBodySize to 100mb it still same cannot upload video

Hey again @Simon_Chen,

What type of file did you try to upload? How did you configure it on the agent side (Action form)?

Kind regards,
Morgan

It is a mp4 file, below is the code snippet.

Snippet

let temp = [{
label: ‘Select Description Type’,
type: ‘String’,
widget: ‘Dropdown’,
search: ‘dynamic’,
options: [‘Text’, ‘Photo’, ‘Video’],
},
// {
// label: ‘12321312321’,
// type: ‘StringList’,
// widget: ‘Dropdown’,
// search: ‘dynamic’,
// options: [‘Text’, ‘Photo’, ‘Video’],
// },
{
label: ‘Description’,
type: ‘String’,
widget: ‘TextInput’,
placeholder: ‘Enter your message here’,
if: context => context.formValues[‘Select Description Type’] == ‘Text’,
},
{
label: ‘Upload File’,
type: ‘File’,
widget: ‘FilePicker’,
description: ‘Upload a product picture’,
extensions: [‘png’, ‘jpg’, ‘mp4’],
maxSizeMb: 20,
if: context => context.formValues[‘Select Description Type’] == ‘Photo’ || context.formValues[‘Select Description Type’] == ‘Video’,
},
{
label: ‘Product’,
type: ‘Collection’,
collectionName: ‘products’,
},
]

collection.addAction(‘添加产品信息’, {
scope: ‘Global’,
form: temp,
execute: async (context, resultBuilder) => {
// Retrieve values entered in the form and columns from the selected record.
// const { amount } = context.formValues;
let result, rowCount

  	console.log(context.formValues);

  	let productDesc = await models.product_desc.findAll({
  		where: {
  			product_id: context.formValues["Product"]
  		},
  		order: [['seq', 'DESC']], // Order by seq in descending order
  		limit: 1, // Limit the result to 1 record
  	})

  	console.log(productDesc);

  	let seq = 0

  	if (productDesc.length > 0) {
  		seq = parseInt((productDesc[0].toJSON())["seq"]) + 1
  	} else {
  		seq = 1
  	}

  	let description = context.formValues?.["Description"]

  	console.log(seq);

  	if (context.formValues.hasOwnProperty('Upload File')) {
  		console.log(context.formValues["Upload File"]["mimeType"]);
  		let fileTypeLast3 = context.formValues["Upload File"]["mimeType"].substring(context.formValues["Upload File"]["mimeType"].length - 3);

  		console.log(fileTypeLast3);
  		console.log(context.formValues["Upload File"]["name"]);

  		let fileName = context.formValues["Upload File"]["name"]?.substring(0, context.formValues["Upload File"]["name"]?.lastIndexOf('.'));

  		let link = (await uploadFile3(context.formValues["Upload File"]["buffer"], context.formValues["Upload File"]["mimeType"], fileTypeLast3, 'durian', fileName ? fileName : ''))["Location"]

  		console.log(link)

  		try {
  			result = await models.product_desc.create({
  				product_id: context.formValues["Product"][0],
  				type: context.formValues["Select Description Type"],
  				value: link,
  				date: Date.now(),
  				seq: seq,
  			})

  			rowCount = 1
  		} catch (error) {
  			console.log(error);
  			rowCount = 0
  		}

  	} else {
  		// let description = context.formValues["Description"]

  		try {
  			result = await models.product_desc.create({
  				product_id: context.formValues["Product"][0],
  				type: context.formValues["Select Description Type"],
  				value: description,
  				date: Date.now(),
  				seq: seq,
  			})

  			rowCount = 1
  		} catch (error) {
  			console.log(error);
  			rowCount = 0
  		}

  		console.log(description);
  	}


  	console.log(rowCount);

  	if (rowCount > 0) {
  		return resultBuilder.success('添加成功!')
  	} else {
  		return resultBuilder.error('添加失败!')
  	}

  },

});

Thank you for sharing the snippet code. :pray:

I don’t see any issue there.

I see that you use an in-app integration, meaning you’ve added forest to an existing application. How did you mount ForestAdmin to expose HTTP endpoints? You can have another middleware mount before forest admin that causes troubles. :eyes:

Kind regards,
Morgan

Thanks for your help, I manage to solve the issue already. It is blocked by nginx.

1 Like

Glad you find out about the issue. Indeed nginx was my last thought.

Have a nice experience.

Kind regards,
Morgan