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
– Striped, Commented Apr 26, 2018 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
– Bernt Christian Egeland, Commented Apr 26, 2018 at 11:52

Stephen Rauch · Accepted Answer · 2018-06-06 00:41:42Z

3

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);
});

edited Jun 6, 2018 at 0:41

Stephen Rauch♦

50.1k32 gold badges118 silver badges143 bronze badges

answered Jun 6, 2018 at 0:16

John Hampton

312 bronze badges

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

Comments

Vincent D'amour · Accepted Answer · 2019-01-22 18:59:07Z

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, 2019 at 18:59

Vincent D'amour

3,9131 gold badge30 silver badges40 bronze badges

answered Jan 22, 2019 at 17:29

Oseme Abulu

272 bronze badges

2 Comments

Kabkee Over a year ago

Not working at all

Dev Over a year ago

This solution didn't work for me.

Dev · Accepted Answer · 2023-05-12 08:34:54Z

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, 2023 at 8:34

Dev

4514 silver badges7 bronze badges

Collectives™ on Stack Overflow

File object with custom properties

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related