question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Accept File upload!

See original GitHub issue

How do I use h3 to get files from client/browser for file upload? I am coming from ExpressJs, where I can install a package called express-fileupload. Link: Express Fileupload

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();
app.use(fileUpload())
Then 
app.post ('/someApi' , (req, res) =>{
   console.log(req.files)
})

How do I achieve this?

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:15 (4 by maintainers)

github_iconTop GitHub Comments

9reactions
thingsneverchangecommented, Mar 16, 2022

The last comment was left back 4 months ago, but @bfg-coding this happened to me too today. What I noticed in the document from Fromdable was they wrapped the form parse function in the promises.

Without it, that’s what I encountered

 ERROR  [proxy] write EPIPE                                                                                                                                                                                                                                                                                                                                                                                                                                    

  at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:98:16)

So the final code should be :


export default async (req, res) => {

  const form = formidable({ multiples: true });

    await new Promise((resolve, reject) => {
      form.parse(req, (err, fields, files) => {
        console.log(files]
      });
    });

    return {}

}

And I get this:

{
  image: [
    PersistentFile {
      _events: [Object: null prototype],
      _eventsCount: 1,
      _maxListeners: undefined,
      lastModifiedDate: 2022-03-16T14:56:34.284Z,
      filepath: '/var/folders/93/m7bwg2ds5gzf4w35bctsb1k40000gn/T/eff7ead095d57e3ed63a44900',
      newFilename: 'eff7ead095d57e3ed63a44900',
      originalFilename: '1.jpeg',
      mimetype: 'image/jpeg',
      hashAlgorithm: false,
      size: 317210,
      _writeStream: [WriteStream],
      hash: null,
      [Symbol(kCapture)]: false
    }
  ]
}

Hope this helps some newbies like me guide to the backend world of node frameworks.

4reactions
wobsorianocommented, Oct 18, 2021

Idk maybe multer or formidable would work

import * as formidable from 'formidable'
import { createApp } from 'h3'

const form = formidable({ multiples: true })

app.use('/upload', async (req, res) => {
    form.parse(req, (err, fields, files) => {
        // do something
    })
   
   // return
});
Read more comments on GitHub >

github_iconTop Results From Across the Web

HTML attribute: accept - HTML: HyperText Markup Language
The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which ......
Read more >
HTML input accept Attribute - W3Schools
The accept attribute specifies a filter for what file types the user can pick from the file input dialog box. Note: The accept...
Read more >
html - File input 'accept' attribute - is it useful? - Stack Overflow
The accept attribute is incredibly useful. It is a hint to browsers to only show files that are allowed for the current input...
Read more >
Using the "accept" attribute on File Inputs - HTML Tutorial
In today's video I'll be taking you through how to use the " accept " attribute which can be used on file input...
Read more >
HTML | DOM Input FileUpload accept Property - GeeksforGeeks
The DOM Input FileUpload accept Property in HTML DOM is used to set or return the value of the accept attribute of the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found