index.html

<input type="file" id="fileInput" multiple>
<input type="text" id="repoInput" placeholder="Enter repo">
<input type="password" id="accessTokenInput" placeholder="Enter access token">
<button onClick="upload()">Upload</button>

<script type="module">
    import { createRepo, uploadFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm";

    async function upload() {
        const fileInput = document.getElementById('fileInput');
        const repoInput = document.getElementById('repoInput');
        const accessTokenInput = document.getElementById('accessTokenInput');
        
        const files = Array.from(fileInput.files); // Convert FileList to an Array
        const repo = repoInput.value;
        const accessToken = accessTokenInput.value;

        // Prompt the user for a unique upload path for each file
        const filesToUpload = await Promise.all(files.map(async (file) => {
            const path = prompt(`Enter the upload path for ${file.name}`);
            return {
                path,
                content: file,
            };
        }));

        await uploadFiles({
            repo,
            credentials: {
                accessToken,
            },
            files: filesToUpload,
        });
    }
</script>