File upload through flutter web and Nodejs, multer….

As everyone knows flutter web file path comes null when a file is being selected.

file.name
file.bytes
file.size
file.extension
file.path = null

To upload the file first lets create multer supported Nodejs backend to save file inside system.

Packages used

Multer

Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of busboy for maximum efficiency https://www.npmjs.com/package/multer

base64-to-image

Decode base64 to image and save the image to disk. https://www.npmjs.com/package/base64-to-image

Flutter File Picker

A package that allows you to use the native file explorer to pick single or multiple files, with extensions filtering support. https://pub.dev/packages/file_picker

Flutter Http

This package contains a set of high-level functions and classes that make it easy to consume HTTP resources. It’s multi-platform, and supports mobile, desktop, and the browser. https://pub.dev/packages/http

Flutter code to pick and make API call

Backend Nodejs code for accepting file

Json format req should send
{
       "filename":"arpit",
       "userId":"abcd1234",
       "base64url": "/9j/4AAQSkZJRgABAQEAYABgAAD/4TDKRXhpZgAATU0AKg
       AAAAgABAExAAIAAAALAAAQSodpAAQAAAABAAAQVoglAAQAAAABAAAgouocAAc
       AABAMAAAAPgAAAAAc6gAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA    ........."
}
*base64 url is to big to display

I hope this helps you……
Github Repository : https://github.com/ArpitSharma2800/Flutter-Provider-With-http-package