File Manager Uploading Large Files Issue

Webix JS
1

one
one1826×839 111 KB

three
three1042×714 37 KB

two
two879×659 21.7 KB

four
four984×324 13.2 KB

Why does he not respond when uploading large files, while uploading slightly smaller files can respond? Are there any restrictions

The backend I am using is the following code:

app.post("/upload", async (req, res, next)=>{
	const busboy = new Busboy({ headers: req.headers });
						
	busboy.on("file", async (field, file, name) => {
		console.log(req.body, name)

		busboy.on('field', async function(field, val) {
			// support folder upload
			let base = req.query.id;
			
			const parts = val.split("/");
			if (parts.length > 1){
				for (let i = 0; i < parts.length - 1; ++i){
					const p = parts[i];
					const exists = await drive.exists(base + "/" + p);
					if (!exists) {
						base = await drive.make(base, p, true);
					} else {
						base = base + "/" + p;
					}
				}
			}

			const target = await drive.make(base, name, false, { preventNameCollision: true });
			res.send(await drive.info(await drive.write(target, file)));
		});
	});

	req.pipe(busboy);
});

The front-end code is as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>File Manager: Initialization as UI</title>
		<!-- Webix Library -->
		<script type="text/javascript" src="../../codebase/webix/webix.js"></script>
		<link
			rel="stylesheet"
			type="text/css"
			href="../../codebase/webix/webix.css"
		/>

		<!-- App -->
		<script type="text/javascript" src="../../codebase/filemanager.js"></script>
		<link
			rel="stylesheet"
			type="text/css"
			href="../../codebase/filemanager.css"
		/>
	</head>
	<body>
		<script>
			webix.ready(function() {
				if (webix.env.mobile) webix.ui.fullScreen();
				webix.CustomScroll.init();

				webix.ui({
					view: "filemanager",
					url: "http://localhost:3200/",
				});
			});
		</script>
	</body>
</html>
2

Hello MikesonZhang,

Unfortunately, Webix does not provide a built-in solution for such task. But you can override the default Upload service and provide your own logic. In the File Manager, file uploading is performed via standard API of Webix Uploader (in the “invisible” mode). The Uploader itself is set via the related service - fileManager.services.Upload.

The original code of this service is shown in the following snippet: Code Snippet.

The actual logic behind uploading files in chunks will have to be set via the Webix Uploader (you can see it being initialized in the initUploader() method in the snippet above). The default API of Webix Uploader sends the file via a single request, so the most probable solution is to cancel the “native” process and use some custom logic with similar handlers. It can be either a third-party solution or native JavaScript methods.

The upload process itself can be cancelled in two main ways:

  • by setting autosend to false (the uploader will still store the file on the client-side);

  • or by cancelling it before the file was even added (returning false from onBeforeFileAdd will prevent any further processing);

Here’s an example for an isolated Uploader (based on the article describing one of the potential solutions): Code Snippet.
The default uploading process is cancelled in the onBeforeFileAdd event handler, where we also provide our own custom logic for file uploading.

3

Yes, in a certain post, I found a similar solution. My backend accepts uploaded code, which is provided in the official documentation of webix. A GitHub project uses Node.js as the backend to receive code. The actual reason for my problem is that there is a bug in the backend case project provided in the official documentation of webix. All I need to do is modify the backend processing logic to solve this problem