How to Upload Files to a Server with Ionic

How to Upload Files to a Server with Ionic

In this Ionic tutorial, we build a server that accepts file uploads in Node/Express as well as a frontend application that uses the FormData API to send files to the server.

In this tutorial, we build a server that accepts file uploads in Node/Express as well as a frontend application that uses the FormData API to send files to the server.

  • 0:00 Introduction
  • 2:24 Node/Express Server
  • 6:17 StencilJS Frontend
  • 8:44 React Frontend
  • 11:11 Angular Frontend
  • 13:09 Conclusion

Handling file uploads from a client side application (e.g. an Ionic application) to a backend server (e.g. Node/Express/NestJS) is quite different to using POST requests to send text data. It may look quite similar on the front end, as a file input looks more or less the same as any other HTML input:

<input type="file" />

You might expect that you could just POST this data using a standard HTTP request to a server and retrieve the file in the same way that you would retrieve any other value from a form.

However, this is not how file uploads works. As you can probably imagine, sending text values to a server like a username or password is quite quick/easy and would be instantly available for the server to access. A file could be arbitrarily large, and if we want to send a 3GB video along with our POST request then it is going to take some time for all of those bytes to be sent over the network.

In this tutorial, we will be using an Ionic application as the front end client, and a Node/Express server as the backend to demonstrate these concepts. I have also published another tutorial that covers using NestJS to handle file uploads on the backend. Although we are using a specific tech stack here, the basic concepts covered apply quite generally in other contexts.

NOTE: This tutorial will be focusing on uploading files through a standard file input on the web. We will be covering handling native file uploads (e.g. from the users Photo gallery in an Ionic application that is running natively on iOS/Android) in another tutorial.

Not interested in the theory? Jump straight to the example. This tutorial will include examples for Ionic/StencilJS, Ionic/Angular, and Ionic/React.

The Role of Multipart Form Data

If you are using a standard HTML form tag to capture input and POST it to a server (which we won’t be doing) then you will need to set its enctype (encoding type) to multipart/form-data:

<form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="photo" />
</form>

This is just one way to encode the form data that is to be sent off to some server. The default encoding type for a form is application/x-www-form-urlencoded but if we want to upload a file using the file input type then we need to set the enctype to multipart/form-data. This encoding type is not as efficient as x-www-form-urlencoded but if we use multipart/form-data then it won’t encode characters which means the files being uploaded won’t have their data corrupted by the encoding process.

Using the Form Data API

As I mentioned, we are not going to be using a standard HTML <form> with an action and enctype. This is common in the context of Ionic/Angular/React/StencilJS applications as we commonly implement our own form logic and handle firing off our own HTTP requests to submit form data (rather than setting the action of the form and having the user click a <input type="submit"> button).

Since we are just using form input elements as a way to capture data, rather than using an HTML form to actually submit the data for us, we need a way to send that captured data along with the HTTP request we trigger at some point. This is easy enough with simple text data, as we can just attach it directly to the body manually, e.g:

const data = {
    comment: 'hello',
    author: 'josh'
};

let response = await fetch("https://someapi.com/comments", {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
        'Content-Type': 'application/json'
    }
});

In this scenario, we could just replace hello and josh with whatever data the user entered into the form inputs (exactly how this is achieved will depend on the framework being used).

If you would like more information on sending POST requests with the Fetch API you can read: HTTP Requests in StencilJS with the Fetch API. This is a good option if you are using StencilJS or React, but if you are using Angular you would be better off using the built-in HttpClient.

But how do we handle adding files to the body of the HTTP request?

We can’t just add files to the body of the request as we would with simple text values. This is where the FormData API comes in. The FormData API allows us to dynamically create form data that we can send via an HTTP request, without actually needing to use an HTML <form>. The best part is that the form data created will be encoded the same way as if we had used a form with an enctype of multipart/form-data which is exactly what we want to upload files.

All you would need to do is listen for a change event on the file input fields, e.g. in StencilJS/React:

<input type="file" onChange={ev => this.onFileChange(ev)}></input>

or Angular:

<input type="file" (change)="onFileChange($event)" />

and then pass that event to some method that will make the data available to whatever is building your form data for submission (either immediately or later). With StencilJS this would look like:

uploadPhoto(fileChangeEvent){
  // Get a reference to the file that has just been added to the input
  const photo = fileChangeEvent.target.files[0];

  // Create a form data object using the FormData API
  let formData = new FormData();

  // Add the file that was just added to the form data
  formData.append("photo", photo, photo.name);

  // POST formData to server using Fetch API
}

or with React:

  const uploadPhoto = (fileChangeEvent) => {

    // Get a reference to the file that has just been added to the input
    const photo = fileChangeEvent.target.files[0];

    // Create a form data object using the FormData API
    let formData = new FormData();

    // Add the file that was just added to the form data
    formData.append("photo", photo, photo.name);

    // POST formData to server using Fetch API 
  };

or with Angular:

  uploadPhoto(fileChangeEvent) {
    // Get a reference to the file that has just been added to the input
    const photo = fileChangeEvent.target.files[0];

    // Create a form data object using the FormData API
    let formData = new FormData();

    // Add the file that was just added to the form data
    formData.append("photo", photo, photo.name);

    // POST formData to server using HttpClient
  }

If you didn’t want to submit the form immediately after detecting the change event, you could store the value of fileChangeEvent.target.files[0] somewhere until you are ready to use it (e.g. in a member variable in Angular or StencilJS, or with a useRef in React). Keep in mind that you do specifically need to store the result of a change/submit event to get a reference to the File, attempting to get the current value of the form control when you need to use it (as you would with other standard <input> fields) won’t work, it will just return:

C:\fakepath\

Which is a security feature implemented by browsers to prevent the filesystem structure of the users machine being exposed through JavaScript.

Using Multer to Handle File Uploads

We have an idea of how to send a file from the front end to a backend server now, but what do we do with it when it gets there? If we were using POST to send standard text data to a Node/Express server we might just set up a POST endpoint and get a reference to the data through the requests body object, e.g:

app.post('/upload', (req, res) => {
  console.log(req.body.photo);
});

This won’t work for our file input.

We need to stream that data over time to our backend, such that there is continuous communication happening between our local client side application and the backend server until the upload is finished. Remember, we might be trying to upload a 3GB video file, and that is going to take a little while.

Exactly how file uploads are handled will depend on what backend you are using, but Express does not handle file uploads by default. Therefore, we need to use some kind of additional library/middleware to handle our multipart/form-data that is being sent from our client side application to the server.

One way to do this is to use busboy which is able to parse incoming multipart/form-data, but it is also somewhat complex. We can simplify things by using multer which basically sits on top of busboy and handles the more complex aspects for us.

Multer will handle the streams of data provided by busboy for us, and automatically upload the file to a specified destination on the server. If you want a buffer stream from multer instead of storing the file on the system, you can also use the memory storage option that multer provides (the uploaded file will be stored in memory for you to do with as you please, rather than being written to a file).

We will be using multer directly in the example for our Node/Express server, but multer is also what NestJS uses behind the scenes to handle file uploads (we will cover that in the NestJS tutorial). We will walk through a complete implementation of this backend in a moment, but this is what the basic usage of multer looks like.

const express = require('express')
const multer  = require('multer')
const upload = multer({ dest: 'uploads/' })

const app = express()

app.post('/upload', upload.single('photo'), (req, res) => {
  console.log(req.file);
});

We just specify a destination folder for where the files should be uploaded, and specify the name of the file field being uploaded in upload.single('photo'). Now when the data is sent via POST request to the /upload route the file will automatically be uploaded into the uploads directory.

You can still send other standard form data (e.g. text inputs) along with your file upload as well, and this will be available in the body of the request, i.e: req.body.

Now let’s walk through building a practical example with Ionic and Node/Express. This walk-through will assume that you have some basic knowledge of both Ionic and Node/Express.

More details and source code in the blog post: https://www.joshmorony.com/handling-file-uploads-in-ionic-web/

ionic node express api web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to create a web API with Node.js and Express [17 of 26]

How to create a web API with Node.js and Express. Express is a popular library for building RESTful web APIs with Node.js. Discover how you can create and configure a web server using Express.

Hire Node.JS Developers | Skenix Infotech

We are providing robust Node.JS Development Services with expert Node.js Developers. Get affordable Node.JS Web Development services from Skenix Infotech.

A Simple Guide to API Development Tools

APIs can be as simple as 1 endpoint for use by 100s of users or as complex as the AWS APIs with 1000s of endpoints and 100s of thousands of users. Building them can mean spending a couple of hours using a low-code platform or months of work using a multitude of tools. Hosting them can be as simple as using one platform that does everything we need or as complex as setting up and managing ingress control, security, caching, failover, metrics, scaling.

How to Maintain API Documentation by Swagger with Express API in Node

Learn how to maintain thorough API documentation by using Swagger with an Express API in Node. We’re going to explore Swagger usage along with an Express API. Swagger is an open source set of tools that enable you to design, build, document, and use RESTful web services.

Creating a RESTful Web API with Node.js and Express.js from scratch

In this article, will show you step by step how to create a RESTful Web API with Node.js and Express.js by building a simple and useful Todo API. This article assumes you have basic javascript knowledge and terminal using capabilities.