How to create a file object with a path in NodeJS?

Question

I want to know if it is possible to create a File object (name, size, data, ...) in NodeJS with the path of an existing file? I know that it is possible client side but I see nothing for NodeJS.

In others words, I want the same function as this that works in NodeJS :

function srcToFile(src, fileName, mimeType){
    return (fetch(src)
        .then(function(res){return res.arrayBuffer();})
        .then(function(buf){return new File([buf], fileName, {type:mimeType});})
    );
}

srcToFile('/images/logo.png', 'logo.png', 'image/png')
.then(function(file){
    console.log(file);
});

And output would be like:

File {name: "logo.png", lastModified: 1491465000541, lastModifiedDate: Thu Apr 06 2017 09:50:00 GMT+0200 (Paris, Madrid (heure d’été)), webkitRelativePath: "", size: 49029, type:"image/png"…}

You're looking for fs.stat, though if you want the data inside the file you'll need to merge it with fs.readFile. — Ben Fortune
– Ben Fortune, Commented Apr 5, 2017 at 12:48

abr · Accepted Answer · 2021-02-18 15:33:01Z

4

For those that are looking for a solution to this problem, I created an npm package to make it easier to retrieve files using Node's file system and convert them to JS File objects:

https://www.npmjs.com/package/get-file-object-from-local-path

This solves the lack of interoperability between Node's fs file system (which the browser doesn't have access to), and the browser's File object type, which Node cannot create.

3 steps are required:

Get the file data in the Node instance and construct a LocalFileData object from it
Send the created LocalFileData object to the client
Convert the LocalFileData object to a File object in the browser.

// Within node.js
const fileData = new LocalFileData('path/to/file.txt')

// Within browser code
const file = constructFileFromLocalFileData(fileData)

answered Feb 18, 2021 at 15:33

abr

731 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

icc97 Over a year ago

This is a truly awesome final piece of a puzzle for being able to expose files directly in your electron web app without having to use the file picker.

icc97 · Accepted Answer · 2023-04-28 08:23:48Z

2

I searched for File Systems examples and other possibilities and found nothing.

So I decide to create my own File object with JSON.

  var imagePath = path.join('/images/logo.png', 'logo.png');
    
  if (fs.statSync(imagePath)) {
     var bitmap = fs.readFileSync(imagePath);
     var bufferImage = new Buffer(bitmap);
    
     Magic = mmm.Magic;
     var magic = new Magic(mmm.MAGIC_MIME_TYPE);
     magic.detectFile(imagePath, function(err, result) {
          if (err) throw err;
          datas = [{"buffer": bufferImage, "mimetype": result, "originalname": path.basename(imagePath)}];
          var JsonDatas= JSON.parse(JSON.stringify(datas));
          log.notice(JsonDatas);
     });
 }

The output :

{ 
  buffer:
  { 
    type: 'Buffer',
    data:
    [ 
      255,
      216,
      255
      ... 24908 more items,
      [length]: 25008 
    ] 
  },
  mimetype: 'image/png',
  originalname: 'logo.png' 
}

I think is probably not the best solution, but it give me what I want. If you have a better solution, you are welcome to suggest it.

edited Apr 28, 2023 at 8:23

icc97

13.1k9 gold badges84 silver badges99 bronze badges

answered Apr 6, 2017 at 14:48

Pouchopa

2931 gold badge3 silver badges11 bronze badges

2 Comments

icc97 Over a year ago

mmmagic appears to be very out of date now. I got errors when trying to use mmmagic (in 2023), see mmmagic issues #168. There's a few others with similar problems. I would suggest trying mime-types or file-type instead.

icc97 Over a year ago

I don't understand why you do var JsonDatas= JSON.parse(JSON.stringify(datas));. datas is already a javascript object, you then convert it to text and back to the same object.

icc97 · Accepted Answer · 2023-04-28 09:05:34Z

My use case for this was in my Electron app. The files here are based on the Electron Quick Start.

I want to have a File object similar to what I would get after selecting a file via <input type="file" /> or via the Drop event, but I want to use the extra power of electron and it's Node direct file access without needing to request file access permissions as with the File System Access API.

Thanks to @abr's answer I have a complete solution now:

main.js

const { app, BrowserWindow, ipcMain } = require('electron')
const fs = require('fs')
const path = require('path')
const { LocalFileData } = require('get-file-object-from-local-path')

let win

const createWindow = () => {
    win = new BrowserWindow({
        width: 1920,
        height: 1080,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
        },
    })

    ipcMain.handle('get-file', async (event, filePath) => {
        try {
            const data = new LocalFileData(filePath)
            return [data]
        } catch (e) {
            return [null, e]
        }
    })
    win.loadFile(path.join(__dirname, 'index.html'))
}

app.whenReady().then(() => {
    createWindow()
})

preload.js:

const { ipcRenderer, contextBridge } = require('electron')
const { constructFileFromLocalFileData } = require('get-file-object-from-local-path')

contextBridge.exposeInMainWorld('electronAPI', {
    getFile: async (filePath) => {
        const [data, error] = await ipcRenderer.invoke('get-file', filePath)
        if (!data) {
            return [data, error]
        }
        return [constructFileFromLocalFileData(data), error]
    },
})

renderer.js:

const filePath = '/path/to/my/file.jpg'
const [file] = await window.electronAPI.getFile(filePath)
console.log(file)

You could arguably do the constructFileFromLocalFileData in renderer.js to keep any logic out of preload.js.

However it seems more sensible that the renderer.js can treat getFile as something similar to a file picker and so get a standard File object back. Since preload runs in the renderer environment but with also access to Node modules it seems like a sensible place to do it.

Rahil Lakhani · Accepted Answer · 2017-04-05 12:45:56Z

-4

You can use arrayBuffer (thats what i did to make a downloadable pdf) or createReadStream / createWriteStream under fs(FileSystem objects)

answered Apr 5, 2017 at 12:45

Rahil Lakhani

4184 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to create a file object with a path in NodeJS?

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related