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

--

--

--

Software Engineer (SIH2020 winner | React developer | Flask web framework | Redux | Flutter | Mongodb | REST APIs | ) | Ex Bajaj Finserv health intern

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Creating a Physics Based Character Controller in Unity

Skeleton Screens in Plain JavaScript

Let’s build a control with React, TailwindCSS and Storybook

React Native + OpenCV— Tutorial Setup + Real Time Processing

Function as Parameters in Golang

Sliding Window

Publishing your Node module on NPM

Creating a Stack in JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Arpit Sharma

Arpit Sharma

Software Engineer (SIH2020 winner | React developer | Flask web framework | Redux | Flutter | Mongodb | REST APIs | ) | Ex Bajaj Finserv health intern

More from Medium

Flutter: Enable Web support for an existing app

Add Multi languages to your app using GetX

Thumbnail about this tutorial content

Best Folder Structure For Your Next Project

Route based middleware for shelf_router, backend for Dart

backend with Dart, adding middleware for auth.