Use my own backend

CoolMonk17

I would like to intercept the api call and execute my own code which call my backend api to upload files to azure, but I am a bit confused how to get the file content when a file is uploaded. I managed to get the file details but not sure how to get the file content.

{
    "file": {
        "name": "download.pdf",
        "size": 20634,
        "date": "2025-04-03T12:05:03.214Z",
        "file": {}
    },
    "parent": "/",
    "newId": "/download.pdf"
}

  const init = (api) => {
        api.on("create-file", (ev) => {
            console.log("Create file event:", ev);
            // Get file contents and call backend API to store file to database
        });
      }
</script>
<div>
  {#if rawData.length > 0}
      <Filemanager {init}
        data={rawData}
      />
    {/if}
</div>

tasha

Hello CoolMonk17

To intercept the api call while uploading a file please use inercept method:

 function init(api) {
    api.intercept("create-file", (data) => {
        // Get file contents and call backend API to store file to database
       
        //return false;
    });
  }

return false here blocks the build-in action (file-creation). So you can, for example, process this file creation and depending on the backend answere block it if some error occures.

Please also take a look at this answere: https://forum.svar.dev/d/98-bug-tasks-loaded-from-firebase-are-not-editable-draggable-or-linkable/2
Here I explain the best way to integrate the server-side with the help of RestDataProvider and its methods.
If you decide to use RestDataProvider you can intercept file creation this way:

 function init(api) {
    api.intercept("create-file", (data}) => {
        // Get file contents and call backend API to store file to database
       restDataProvider.send("your path to the server", "POST", obj, customHeaders).then(data => {
        //do something with the recieved data;

    });
        //return false;
    });
  }

CoolMonk17

Hi Tasha,
Thanks a lot for your reply, helped me to solve the above issue by using api.intercept

I am not able to use restDataProvider since I am using Typescript and I have client generated files which provides a wrapper to call my backend api

But I had to convert the file object suitable for my backend

	const reconstructFile = (fw: any): File => {
		console.log("Reconstructing file:", fw);
		return new File([fw.file.file], fw.file.name, { type: fw.file?.type || "application/octet-stream" });
	};

	function arrayBufferToFile(buffer: ArrayBuffer, filename: string, mimeType: string): File {
		const blob = new Blob([buffer], { type: mimeType });
		return new File([blob], filename, { type: mimeType });
	}

	const init = (api: any) => {
		api.intercept("create-file", (fileWrapper: any) => {
			const file = reconstructFile(fileWrapper);
			console.log("File object:", file);
			if (!(file instanceof File)) {
				console.error("Invalid File object:", file);
				return;
			}

			const reader = new FileReader();

			reader.onload = async () => {
				const arrayBuffer = reader.result as ArrayBuffer;

				const attachmentId = crypto.randomUUID();
				const uploadData = {
					id: attachmentId,
					name: file.name,
					file: arrayBufferToFile(arrayBuffer, file.name, file.type)
				};

				try {
					const response = await commandApi.file.uploadFile(uploadData);
					if (response?.data?.data) {
						console.log("File uploaded successfully", response.data.data);
					}
				} catch (err) {
					console.error("File upload failed", err);
				}
			};

			reader.readAsArrayBuffer(file);
		});

is there any better way to do this ?

tasha

As I can see from your code the approach you outlined for converting file objects and uploading them efficiently is appropriate.