Marcelle  Smith

Marcelle Smith

1602574679

Handling File Uploads in Ionic (Web)

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.

#ionic #programming #developer #web-development

What is GEEK

Buddha Community

Handling File Uploads in Ionic (Web)

I am Developer

1597559012

Multiple File Upload in Laravel 7, 6

in this post, i will show you easy steps for multiple file upload in laravel 7, 6.

As well as how to validate file type, size before uploading to database in laravel.

Laravel 7/6 Multiple File Upload

You can easily upload multiple file with validation in laravel application using the following steps:

  1. Download Laravel Fresh New Setup
  2. Setup Database Credentials
  3. Generate Migration & Model For File
  4. Make Route For File uploading
  5. Create File Controller & Methods
  6. Create Multiple File Blade View
  7. Run Development Server

https://www.tutsmake.com/laravel-6-multiple-file-upload-with-validation-example/

#laravel multiple file upload validation #multiple file upload in laravel 7 #multiple file upload in laravel 6 #upload multiple files laravel 7 #upload multiple files in laravel 6 #upload multiple files php laravel

I am Developer

1591071011

Laravel 7 File Upload Example

Here i will show you how to upload files in laravel 7, 6, 5 version. And simply upload file like pdf, image, xlx, zip etc in laravel app.

Laravel 7 file upload example

Checkout this laravel 7 file upload example:- https://www.tutsmake.com/laravel-6-file-upload-with-validation-tutorial/

#laravel file upload example #file upload in laravel 6 #file upload in laravel 7 #laravel file upload

I am Developer

1595240610

Laravel 7 File Upload Via API Example From Scratch

Laravel 7 file/image upload via API using postman example tutorial. Here, you will learn how to upload files/images via API using postman in laravel app.

As well as you can upload images via API using postman in laravel apps and also you can upload images via api using ajax in laravel apps.

If you work with laravel apis and want to upload files or images using postman or ajax. And also want to validate files or images before uploading to server via API or ajax in laravel.

So this tutorial will guide you step by step on how to upload file vie API using postman and ajax in laravel with validation.

Laravel Image Upload Via API Using Postman Example

File

Follow the below given following steps and upload file vie apis using postman with validation in laravel apps:

  • Step 1: Install Laravel New App
  • Step 2: Add Database Credentials
  • Step 3: Generate Migration & Model
  • Step 4: Create Routes For File
  • Step 5: Generate Controller by Artisan
  • Step 6: Run Development Server
  • Step 7: Laravel Upload File Via Api Using PostMan

Checkout Full Article here https://www.tutsmake.com/laravel-file-upload-via-api-example-from-scratch/

#uploading files via laravel api #laravel file upload api using postman #laravel image upload via api #upload image using laravel api #image upload api in laravel validation #laravel send file to api

I am Developer

1597472466

Ajax File Upload with Progress Bar in Laravel 7

Here, i will show you ajax file upload with progress bar in laravel.

Sometimes, you need to show progress bar while uploading files in laravel using ajax into database and folder.

Laravel - Ajax File Upload with Progress Bar

Uploading files with progress bar with jQuery ajax in laravel by using below steps:

Step 1: Install Laravel App For Progress Bar
Step 2: Add Database Details
Step 3: Create Migration & Model
Step 4: Add Routes
Step 5: Create Controller by Artisan
Step 6: Create Blade View
Step 7: Run Development Server
Step 8: Live Demo

https://www.tutsmake.com/laravel-ajax-file-upload-with-progress-bar/

#laravel ajax file upload with progress bar #laravel file upload with progress bar #ajax file upload with progress bar #laravel file upload using ajax with progress bar

Einar  Hintz

Einar Hintz

1594631472

Pros and Cons of Ionic Development

Entrepreneurs around the world want a top-notch mobile application for their business in both Android and iOS platforms. Most of them get stuck mid-way where they struggle to pick the best technology suitable for their business. From questions such as native mobile development or cross-platform development? Flutter or Ionic or React Native?. Each technology and development approach has its own Pros and Cons from which you will need to choose the right one for your business. If you think Ionic is the right cross-platform application development, here are a few pros and cons of Ionic development. 

What is Ionic Framework?

Being an open-source SDK for building Hybrid mobile applications in both Android and iOS platforms, Ionic is the best choice for building top of the line mobile applications. This Ionic framework is completely based on Apache Cordova and Angular. More precisely, Ionic is an npm module that requires the installation of Node JS to function.

One can build a full functioning mobile application in both platforms using their Javascript, HTML, and CSS knowledge without requiring the basics of Kotlin or Java. More than 5 Million mobile applications are built using this Ionic framework by leveraging its platform-specific UI elements, innumerable libraries, and more exciting features.

The applications that are built using the Ionic framework are cross-platform, web-based, and have access to native device’s APIs.

Ionic Applications are

  • Cross-platform – Single code base for both platforms (except native components)
  • Web-based – Built using web-views and can be displayed in a browser like PWAs.
  • Access to native API components – They can access native device’s camera, files, and others.

Advantages of Ionic Development

Quick Development and Time To Market

For entrepreneurs and business owners, ionic development can be beneficial if they want to develop a mobile application in both platforms in a short period of time while comparing to native applications. Building native applications specifically for each platform can be time-consuming which can imply a delay in time to market and development cost of native applications are generally expensive.

#mobile app development #ionic 4 advantages #ionic 4 best practices #ionic 5 #ionic appflow #ionic capacitor pros and cons #ionic vs react native #react native pros and cons #what is ionic app development