File object with custom properties

Question

I want to store files on server with custom File properties. On client side im adding properties:

let file = new File([blob], 'flower.jpg')
file.custom = "another properties"

this gives me

custom:"another properties"
lastModified:1524742832101
lastModifiedDate:Thu Apr 26 2018 13:40:32 GMT+0200 (W. Europe Daylight Time {}
name:"flower.jpg"
size:845941
type:"image/jpeg"
webkitRelativePath:""

When i send this file to my node server the custom property is deleted. Im using formData and multer for file upload.

fieldname: 'images',
originalname: 'flower.jpg',
encoding: '7bit',
mimetype: 'image/jpeg',
destination: 'uploads/',
size: 845941

Is there a way to store the file including custom properties?

Store your custom properties in an other object and send it with your file object to your API. — Striped, Apr 26 '18 at 11:47
thx. Yes this is my next move if custom properties cant be added. But it would be nice to embed custom information within the File object itself. — Bernt Christian Egeland, Apr 26 '18 at 11:52

score 3 · Answer 1 · edited Jun 06 '18 at 00:41

I ran into a similar scenario with multer / express and ended up appending an additional property for each file being uploaded. Then pulled the additional property, matched on file name, from the req.body on the server. Our UI prevents duplicate file names, so this worked well for us.

const data = new FormData();

files.forEach((file) => {
  data.append('form-key', file);
  data.append(file.name, file.identifier);
});

score 1 · Answer 2 · edited Jan 22 '19 at 18:59

1

Use Object.defineProperty() like this

const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});

object1.property1 = 77;
// throws an error in strict mode

console.log(object1.property1);
// expected output: 42

More details here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

edited Jan 22 '19 at 18:59

Vincent D'amour

3,746
1
27
39

answered Jan 22 '19 at 17:29

Oseme Abulu

27
2

1

Not working at all – Kabkee Sep 16 '22 at 05:11
This solution didn't work for me. – Dev May 12 '23 at 08:28

score 0 · Answer 3 · answered May 12 '23 at 08:34

0

In my own case, I just sent the FormData with the additional property as array key-value pairs to the backend, for example:.

let file = new File([blob], 'flower.jpg');
let formData = new FormData();
formData.append("file[property]", file);

answered May 12 '23 at 08:34

Dev

411
3
6

File object with custom properties

3 Answers3

Linked