How to load a binary file from the server filesystem into Vite/Vue3?

[three-vue-noob]

I would like to load (and process) data that is stored in a binary file on the server.

Vue.app

<script setup>
import * as fs from 'fs'
const content = fs.readFile('./filename')
</script>

<template>
</template>

<style>
</style>

... results in:

Uncaught TypeError: fs.readFile is not a function

What is the way?

[Shyam-Chen]

Use File API in the browser.

[three-vue-noob]

But the file I want to access is located on the server's filesystem. If I understand the File API documentation correctly, the File API is intended to only access files on the user's / client's filesystem.

[Shyam-Chen]

Use Fetch API.

[three-vue-noob]

The file is intentionally not accessible from the web. So it seems the Fetch API isn't suited for the job either.

[likui628]

Client-side render mechanism means it cannot load server-side files directly.

Maybe you can load it as an asset:
https://vitejs.dev/guide/assets.html#importing-asset-as-url

import content from './filename'

[three-vue-noob]

Thank you, likui628, for hinting at the render mechanism. I wasn't aware that Vue is doing client-side rendering by default - I presumed that the rendering is done server-side.

I tried to import the binary file as you suggested but it didn't work out. Here's the error message:

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

It seems that non-JavaScript / JSON imports are not allowed.

[mbokil]

The simple answer is you can't load binary file data into a web app directly via JavaScript since the security data model in browsers will block you. File I/O is very restricted otherwise a site/app could attempt to grab files on a user's system.

If the data file is text/json you can import the file like so:
import * as mockData from '@/mockdata/myFile.json'

To process a binary file you would need to setup a small app server. You could do this in JavaScript using Node/Express or in Python I would probably use FastAPI module. Then you can use fetch() to call your REST endpoint to process the file and return a status such as success or failure or extract some data and return it as part of the REST response. If it is a real production app you need to take into consideration security and protect your endpoint using something like JWT tokens otherwise the endpoint is exposed to the public and anyone can call it and manipulate the user's files.

[three-vue-noob]

As I said in the other comment I wasn't aware that Vue is client-side by default. But I see in the docs that there is the possibility to run Vue in server-side mode as well. Is there no middle ground where I can preprocess the binary file on the server-side within Vue e.g. convert the binary data into a JavaScript data structure before the data gets shipped out to the client? I have troubles wrapping my mind around why it's possible with JSON files but not with any other file types.

The solution you propose seems super complicated (from my noob perspective) for an operation that is supposed to be a one-liner in many programming languages - it feels like I have to jump through some burning loops to finally land in a can of worms ;). I'm really astonished how complicated such a supposedly simple operation can turn out to be. I hope with a deeper understanding of JavaScript / ECMA I get over this shock.

Thank you, mbokil, for elaborating and plotting a possible path out of my pickle!

[mbokil]

If you write up a more details use case and attach it I will do my best to point out some solutions. What I have described I have done. It is not too difficult. For Windows systems you can package up a Python server and run it as a service on a user's computer. They have to install it like any other Windows app. Python has some tools to do that like Py2exe which can generate a Windows service from your Python scripts. If you could get away with running Vite locally on the user's system you could use Vite and fs module to load and process the file and pass the data to Vue. But the user would need all the dev tools installed which is cumbersome.

[three-vue-noob]

Thank you, mbokil, that's a super nice offer but I think I'm good for now. Also thanks to you I got a much better idea about how to approach stuff for client-side rendering - much appreciated!

[qin-guan]

Hi, I am assuming you have created a new Vue3 project, which uses Vite.

In which case, you are able to make use of the Asset API to load your binary file.

The previous answers are right in saying there's not a quick and easy way to access the server file system from a Vue component/web page, since the Vue3 Vite template makes use of purely client side rendering (example: your site is built into static HTML/CSS/JS files). Therefore, the most optimal solution would be to instruct the bundler to include your binary file, using the Asset API mentioned above.

Hope this helps, I'll attach a demo when I get to my computer. 😃

Update: demo link https://codesandbox.io/p/sandbox/naughty-pine-j2zw59

[three-vue-noob]

Ah... interesting... importing works after all! But am I right to assume that the binary data would be processed on the client-side? Thank you for your demo! I think your suggestion comes very close to my original question. Cool, qin-guan!

[qin-guan]

Yes, it would be processed on client side. If you would like to process on server side, you would need to run a server. For Vue/Vite, you can check out Nuxt or vite-plugin-ssr