Components

File selector

#

A file selector, also known as a file input or file upload component, allows users to choose files from their local device to be uploaded to a server or processed within a web application.

#

Preview

upload_file

Drag and drop a file here or click to select a file

#

Code



"use client"  // for nextJS
import { useState } from 'react';
import { FilePicker } from 'mvk-ui';

const App = () => {
    const [selectedFile, setSelectedFile] = useState<FileList | null>(null);
    const handleFileSelect = (files: FileList | null) => {
        if (files) {
            console.log('Selected file:', files[0].name);
        }
        setSelectedFile(files);
    };

    return (
        <div style={{ margin: '50px' }}>
            <FilePicker 
                onFileSelect={handleFileSelect} 
                textColor="#333" 
                backgroundColor="#f8f9fa" 
                borderColor="#007bff"
                width="200px"
                height="150px"
            />
        </div>
    );
};

export default App;