[MUI Tips][Button] アップロードボタンを作成する

この記事はこんな人におすすめ

• アップロードボタンを作成して、ユーザーにファイルを選択させたい
• アップロードボタンで選択可能なファイルの種類を限定したい

アップロードボタンの例

環境

React: 17.0.2
MUI: 5.5.2

アップロードボタンを作成する

ボタンをアップロードボタンにする

通常のボタンは、<Label> と <Input> タグと組み合わせることでアップロードボタンにすることができます。

書式は以下の通りです。

<Input> タグがありますが、画面に表示する必要はありません。そこで、1〜3行目で非表示属性を作成しておきます。Button がクリックされると、Mac の場合は Finder が、WIndows の場合はエクスプローラーが表示されます。このとき、選択可能なファイルは <Input> タグの accept 属性で設定します。

const Input = styled('input')({
    display: 'none',
});

<label htmlFor="contained-button-file">
    <Input accept="選択可能なファイルの種類" id="contained-button-file" multiple type="file" />
    <Button variant="contained" component="span">
        ボタン表面に表示する文字列
    </Button>
</label>

以下にアップロードボタンの例を示します。この例では <Input> タグの accept 属性に”image/*” を指定しているので画像を選択することができます。

import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';

const Input = styled('input')({
    display: 'none',
});
  
///
/// Button アップロードボタンを作成する
///
export default function ButtonSample7() {
    return (
        <label htmlFor="contained-button-file">
            <Input accept="image/*" id="contained-button-file" multiple type="file" />
            <Button variant="contained" component="span">
            アップロード
            </Button>
        </label>
    );
}

アップロードボタンの例

アイコンをアップロードボタンにする

アイコンをアップロードボタンにする場合の書式は以下の通りです。

<Input> タグがありますが、先ほど同様に画面に表示する必要はありません。<Button>タグの内側には表示したいアイコンタグを配置します。

const Input = styled('input')({
    display: 'none',
});

<label htmlFor="contained-button-file">
    <Input accept="選択可能なファイルの種類" id="contained-button-file" multiple type="file" />
    <Button variant="contained" component="span">
        ボタン表面に表示するアイコンのタグ
    </Button>
</label>

以下に例を示します。カメラアイコンを表示し、クリックされると画像ファイルを選択することができます。

import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';

const Input = styled('input')({
    display: 'none',
});
  
export default function ButtonSample7() {
    return (
        <label htmlFor="icon-button-file">
            <Input accept="image/*" id="icon-button-file" type="file" />
            <IconButton color="primary" aria-label="upload picture" component="span">
                <PhotoCamera />
            </IconButton>
        </label>
    );
}

アップロードボタンの例

選択可能なファイルの種類の例

<Input> タグの accept 属性には、ユーザーに選択をさせたいファイルの種類を設定することができます。

以下に例を示します。

MUI Tips 一覧

その他の MUI Tips 一覧はコチラを参照してください。

Please follow and like us: