Home / Blog / How to create a File upload screen

How to create a File upload screen

05 Jul 2024 · 6 min read

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The File Upload screen is essential for applications that involve user-generated content, document submissions, or any scenario where users need to share files with the application. Key elements of an effective File Upload screen include an intuitive file selection mechanism, progress indicators during the upload process, and feedback confirming the successful completion of the upload. Additionally, there might be features to manage or preview uploaded files.

This article offers a comprehensive guide, equipping designers and developers to seamlessly integrate a user-centric File upload screen into their applications. This effortless integration is made possible by leveraging design components from the Ionic Kit, built on the robust foundation of the extensive library within the Ionic framework.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start file-upload-screen blank --type=react

3. Get inside the project directory

cd file-upload-screen

4. Create page Upload.tsx inside src/pages and add code

import { IonPage } from '@ionic/react';

const Upload: React.FC = () => {
  return <IonPage></IonPage>;
};

export default Upload;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Add header code inside the Page

For convenience, we will be using the layout structure recommended by Ionic for our screen. This allows us to add header code, content, and footer code inside the <IonPage></IonPage>.

<IonPage>
  <IonHeader></IonHeader>
  <IonContent></IonContent>
  <IonFooter></IonFooter>
</IonPage>

6. Add the toolbar component

Inside the IonHeader component, add the IonToolbar component to fix buttons at the top of the content.

<IonHeader>
  <IonToolbar></IonToolbar>
</IonHeader>

7. Add the button at the beginning of the toolbar

Inside the IonToolbar component, add the IonButtons component and set the slot to start. This positions the button at the beginning of the toolbar.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'></IonButtons>
  </IonToolbar>
</IonHeader>

8. Place the Back button

Within the IonButtons component, include the IonBackButton component, setting the properties defaultHref='#' and text='', to create a back button that navigates back in the app's history upon being clicked.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
  </IonToolbar>
</IonHeader>

9. Place the title on the page

After the IonButtons component, place the IonTitle with the text 'Logotype' to add a title for this page.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
    <IonTitle>Logotype</IonTitle>
  </IonToolbar>
</IonHeader>

10. Add the button at the end of the toolbar

After the IonTitle component, include another IonButtons component and set the slot to end. This positions the buttons at the end of the toolbar.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
    <IonTitle>Logotype</IonTitle>
    <IonButtons slot='end'></IonButtons>
  </IonToolbar>
</IonHeader>

11. Within the IonButtons add the IonButton component

12. Place the icon inside the button component

Inside the IonButton component, place the IonIcon component with the properties slot='icon-only' and icon={close} to define that this component should be used as an icon in an option that has no text, using the icon from Ionic icons.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
    <IonTitle>Logotype</IonTitle>
    <IonButtons slot='end'></IonButtons>
  </IonToolbar>
</IonHeader>

13. Add the content component after the header

Next, following the IonHeader component, add the IonContent component and apply the ion-padding class to style the content within.

<IonHeader>
...
</IonHeader>
<IonContent className='ion-padding'>
</IonContent>

14. Place the text component inside the content

Inside the IonContent component, add the <br /> tag to create a line break, and place the IonText component with the class ion-text-center. Within the IonContent add the h1 tag with the class ion-padding-top to style the text inside. Set the text 'Upload files' inside this tag.

<IonContent className='ion-padding'>
  <br />
  <IonText className='ion-text-center'>
    <h1 className='ion-padding-top'>Upload files</h1>
  </IonText>
</IonContent>

15. Add one more text component

Add another IonText component with the property color='medium' and the class ion-text-center. Inside this component place the p tag with the class ion-padding-vertical the text 'Select the files you want to upload'.

<IonContent className='ion-padding'>
  ...
  <IonText color='medium' className='ion-text-center'>
    <p className='ion-padding-vertical'>Select the files you want to upload</p>
  </IonText>
</IonContent>

16. Add the Choose file button

Add the <br /> tag to create a line break, and place the IonButton component with the properties expand='block' and fill='outline' to style the button. Set the text 'Choose file' inside this button.

<IonContent className='ion-padding'>
  ...
  <br />
  <IonButton expand='block' fill='outline'>
    Choose file
  </IonButton>
</IonContent>

17. Place the h4

Add another <br /> tag and place the IonText component with the h4 tag inside. Set the class ion-padding-top and the text 'Files' for this tag.

<IonContent className='ion-padding'>
  ...
  <br />
  <IonText>
    <h4 className='ion-padding-top'>Files</h4>
  </IonText>
</IonContent>

18. Add the List component

Add the IonList component with the property lines='none' to style the items inside.

<IonContent className='ion-padding'>
  ...
  <IonList lines='none'></IonList>
</IonContent>

19. Place Item within the List component

Inside the IonList add the IonItem component with the class ion-no-padding.

<IonList lines='none'>
  <IonItem className='ion-no-padding'></IonItem>
</IonList>

20. Label the item

Inside the IonItem add the IonLabel component with the text 'table.xlsx'.

<IonItem className='ion-no-padding'>
  <IonLabel>table.xlsx</IonLabel>
</IonItem>

21. Add the Note component

After the IonLabel add the IonNote component with the property slot='end' to style this component position. Add the text '47%' inside.

<IonItem className='ion-no-padding'>
  <IonLabel>table.xlsx</IonLabel>
  <IonNote slot='end'>47%</IonNote>
</IonItem>

22. Add one more item

Add another IonItem component with the class ion-no-padding.

<IonList lines='none'>
  <IonItem className='ion-no-padding'>
    <IonLabel>table.xlsx</IonLabel>
    <IonNote slot='end'>47%</IonNote>
  </IonItem>
  <IonItem className='ion-no-padding'></IonItem>
</IonList>

23. Place an icon within the item

Within the IonItem add the IonIcon component with the properties slot='start' icon={documentOutline}. Remember to import this icon from ionicons/icons.

<IonItem className='ion-no-padding'>
  <IonIcon slot='start' icon={documentOutline}></IonIcon>
</IonItem>

24. Add the label

Add the IonLabel component with the text 'read_me.pdf'.

<IonItem className='ion-no-padding'>
  <IonIcon slot='start' icon={documentOutline}></IonIcon>
  <IonLabel>read_me.pdf</IonLabel>
</IonItem>

25. Add one more icon

Add another IonIcon component with the properties slot='end' icon={close}.

<IonItem className='ion-no-padding'>
  <IonIcon slot='start' icon={documentOutline}></IonIcon>
  <IonLabel>read_me.pdf</IonLabel>
  <IonIcon slot='end' icon={close}></IonIcon>
</IonItem>

26. Repeat steps 22 to 25 to add another IonItem

Set the text 'image.jpeg' inside the IonLabel component.

Following the IonContent component, add the IonFooter component and apply the ion-padding class to style the content within.

<IonContent className='ion-padding'>
   ...
</IonContent>
<IonFooter className='ion-padding'>
</IonFooter>

Inside the IonFooter add the IonButton component with the property expand='block'. Set the text 'Upload files' inside.

<IonFooter className='ion-padding'>
  <IonButton expand='block'>Upload files</IonButton>
</IonFooter>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!

Looking for Ionic kit for you platform?
Ionic Sketch
Ionic Figma
Ionic XD
Made in New Zealand 🇳🇿 at  Sliday