ionic react input 2

Some browsers have a security feature that prevents JavaScript from knowing your file's local full path. It makes sense - as a client, you don't want the server to know your local machine's filesystem. It would be nice if all browsers did this.

Just post the form: the browser will take care of the upload. Your web site doesn't need to know the full path back on the client. 

use multipart/form-data when your form includes any <input type="file"> elements

text, number, and picture are received by server

//tab1.tsx

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonChip, IonAvatar,
  IonGrid, IonRow, IonCol, IonInput
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab1.css';
import { pin, heart, closeCircle, close } from 'ionicons/icons';

const Tab1: React.FC = () => {
  const [text, setText] = useState<string>();
  const [number, setNumber] = useState<number>();
  const [path, setPath] = useState<string>()

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>IonInput Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <form action='http://ptsv2.com/t/wq6e8-1586646697/post' method='post'
          encType='multipart/form-data'>

          <IonList>

            <IonItem>
              <IonLabel position="stacked">Text</IonLabel>
              <IonInput value={text} placeholder="Text" name='text'
                onIonChange={e => setText(e.detail.value!)} clearInput></IonInput>
            </IonItem>

            <IonItem>
              <IonLabel position="stacked">Number</IonLabel>
              <IonInput type="number" value={number} placeholder="Number" name='num'
                onIonChange={e => {
                  const n = parseFloat(e.detail.value!)
                  isNaN(n) ? setNumber(1) : setNumber(n)
                  console.log(number)
                }}></IonInput>
            </IonItem>

            <IonItem>
              <IonLabel position="stacked">Picture {path}</IonLabel>
              <input type="file" name='pic' id="pic"
                onChange={e => setPath(e.target.value)}
                style={{ marginTop: 10, marginBottom: 10 }} />
            </IonItem>

            <IonItem>
              <IonButton type='submit'>Submit</IonButton>
            </IonItem>

          </IonList>
        </form>
      </IonContent>
    </IonPage>
  );
};

export default Tab1;

reference:

https://stackoverflow.com/questions/4851595/how-to-resolve-the-c-fakepath
https://stackoverflow.com/questions/4526273/what-does-enctype-multipart-form-data-mean

Post Test Server
http://ptsv2.com/