#Front end uploading, backend saving

1 messages · Page 1 of 1 (latest)

runic portal

I have a video file that I am uploading to a file input on the front end. I am then communicating that Base64 String to my backend API.

All of it gets sent, the whole Base64 String is sent. I have the video preview on the website, it is successfully displaying the file upload.
On the backend, when I try to save the file with the base 64 string, it is corrupted and I am not able to open it.
However, the file is saved correctly with the correct name and file type, just not able to open the file at all, it says the file is not compatible, and when trying to encode the file, it says it is not encodeable. So I am thinking it is just corrupted.

OS: Mac
Frontend Code:

    const fileChange = (e) => {
        let fileUpload =e.target.files[0];
        let reader = new FileReader();
        reader.readAsDataURL(fileUpload);
        reader.onload = (e) => {
            evidence = e.target.result;
        }```
Backend Code:
```ts
        attachment = attachment.replace(/^data:video\/(mp4);base64,/, '');
        const fileBuffer = Buffer.from(attachment, 'base64');
        const directoryPath = './dist/evidence/';
        const fileName = `${new Date().toISOString()}.mp4`;
        const filePath = path.join(directoryPath, fileName);
        
        if (!fs.existsSync(directoryPath)) {
          fs.mkdirSync(directoryPath, { recursive: true });
        }
        
        fs.writeFile(filePath, fileBuffer, (error) => {
          if (error) {
            console.error('An error occurred while saving the video file:', error);
          } else {
            console.log(`Video file saved at ${filePath}`);
          }
        });```

I apologize for any inconvenience or confusion I have with future help. Thank you!