How can I parse form-data in plain Javascript?

Question

I'm trying to create a simple image host in Node.js, but i'm having trouble parsing form-data

The form my test application generates (to upload an image) posts the data in the following format:

----------------------8d8317fa35f1280
Content-Disposition: form-data; name="ImageUploader"; filename="Test.png"
Content-Type: image/png

<binary PNG data...>

----------------------8d8317fa35f1280--

I plan on storing the image data in a key-value database, where the key is an md5 hash of the file, and the value is the raw .png data.

I know that this is very possible with the 'express' javascript framework, but I don't wish to use any frameworks, i'm open to using a library, given that it is fast.

I would like to avoid Regex

How can I parse the filename, and the raw .png data out of this form submission data?

HARDY8118 · Accepted Answer · 2020-07-26 09:09:30Z

1

You need to use a library for parsing such data. formidable is one example, but I would recommend use multer

Example in multer,

const multer = require('multer');
const upload = multer({dest:'temp/'}) // path to a temporary folder where files will be saved

app.post('/upload', upload.single('file'), (req,res)=>{ // use middleware
    // process file here
    // file will be in req.file
})

This one is a very simple example, however multer provides very wide variety of upload methods that you should check.

For getting filename see originalname property of req.file and for reading file you need to read file req.file.path which is the actual file

answered Jul 26, 2020 at 9:09

HARDY8118

7227 silver badges16 bronze badges

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

2 Comments

Fleckenator Over a year ago

Why do you recommend multer over formidable? What are the differences

HARDY8118 Over a year ago

multer provides you with middleware functions which you can and you will get the file object(s) in the request obect itself. Formidable parses the form data that you have passed as input. Middlewares are cleaner and easy to use and maintan. Also multer provides you with options to set the path, filename and other properties before actually saving the file.

Collectives™ on Stack Overflow

How can I parse form-data in plain Javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related