File Upload with dynamic path

[rajkaran]

I have copied code from file-transfer example which is working fine. I want to send path with file from client side.

below is my fileupload

export class FileUploadController {
	constructor(
		@inject(FileUploadBindings.FILE_UPLOAD_SERVICE) private handler: FileUploadHandler,
	) { }

	post('/file-uploads', {
		responses: {
			200: {
				content: {
					'application/json': {
						schema: {
							type: 'object',
						},
					},
				},
				description: 'Files and fields',
			},
		},
	})
	async fileUpload(
		@requestBody.file() request: Request,
		@inject(RestBindings.Http.RESPONSE) response: Response,
	): Promise<object> {
		return new Promise<object>((resolve, reject) => {

			console.log('request body before actual upload', request.body);

			this.handler(request, response, (err: unknown) => {
				if (err) reject(err);
				else {
					console.log('request body after upload', request.body);
					resolve(FileUploadController.getFilesAndFields(request));
				}
			});
		});
	}

	/**
	 * Get files and fields for the request
	 * @param request - Http request
	 */
	private static getFilesAndFields(request: Request) {
		const uploadedFiles = request.files;

		console.log('request.files', request.files);

		const mapper = (f: globalThis.Express.Multer.File) => ({
			fieldname: f.fieldname,
			originalname: f.originalname,
			encoding: f.encoding,
			mimetype: f.mimetype,
			size: f.size,
		});

		let files: object[] = [];

		if (Array.isArray(uploadedFiles)) {
			files = uploadedFiles.map(mapper);
		} else {
			for (const filename in uploadedFiles) {
				files.push(...uploadedFiles[filename].map(mapper));
			}
		}

		return { files, fields: request.body };
	}
}

How can I get fields submitted with file so I can modify fileName and path. request.body before calling this handler is undefined.

[achrinza]

Hi there, @rajkaran!

request.body is undefined as @requestBody.file() informs LoopBack 4 to bypass its internal parsers so that Multer can handle them. Is there any reason why the handler can't be called before retrieving request.body()?

In the example, Multer is set to store the files in memory. Hence, you'll still have control over where to files will eventually get stored.

If you've reconfigured Multer to immediately store the file on disk (e.g. Multer.diskStorage()), you could also consider modifying the FileUploadHandler to be aware of this requirement and parse this by itself.

[rajkaran]

Hi @achrinza

How will I access fields in FileUploadProvider . I have name and folder fields coming from client side.

My plan is to access request.body within filename function in application.ts filename: (req, file, cb)

[achrinza]

Hi @rajkaran, apologies for the delayed reply;

In the case of letting Multer handle file storage, you can change the signature of your FileUploadProvider implementation to accept a new argument for filename.

[rajkaran]

hi @achrinza
I have some more additions to my logic. I need to authenticate user before uploading any file. I might be getting multiple file to upload but I don't want to authenticate/authorize user for every file.

Will you be able to provide me some code snippet to help me out with this?

Thanks

[VishalSingh28]

If I want to upload file in database(For multiple column different file) with model and controller so what we need to change and where need to add logic

[raymondfeng]

You can have a custom storageEngine for multer. See an example at https://github.com/strongloop/loopback-next/blob/master/examples/file-transfer/src/application.ts#L59.

[dvision1979]

Joining late to the party, I have this question:
How can I upload to different directories for different users e.g. /<user_id>
?
Thanks for any suggestion.