{ setFiles((currentFiles) => [...currentFiles, ...newFiles]); }} > {files.map(({ state, file, validation }, index) => { let label = undefined; let labelType = undefined; let demoState = state; const lasterOpp = boolKnob("Laster opp"); const isUploading = lasterOpp || state === "UPLOADING"; const valideringsfeil = boolKnob("Med valideringsfeil"); const lastetOpp = boolKnob("Lastet opp"); const medFeil = boolKnob("Med feil"); if (valideringsfeil || validation?.type === "WRONG_TYPE") { labelType = "warning"; label = `Filtypen ${file.name?.split(".")[1] || ""} støttes ikke`; } else if (lastetOpp || state === "UPLOAD_SUCCESS") { labelType = "success"; label = "Lastet opp"; demoState = "UPLOAD_SUCCESS"; } else if (medFeil || state === "UPLOAD_ERROR") { labelType = "error"; label = "Filen lot seg ikke laste opp"; demoState = "UPLOAD_ERROR"; } else if (validation?.type === "TOO_LARGE") { labelType = "error"; label = `Filen er større enn ${formatBytes( maxSizeBytes )} og kan ikke lastes opp`; } else if (isUploading) { label = "Laster opp…"; demoState = "UPLOADING"; } return ( { setFiles([ ...files.slice(0, index), ...files.slice(index + 1), ]); } : undefined } > {isUploading && } ); })} { const toUpload = files.filter( (fileState) => fileState.state === "SELECTED" && typeof fileState.validation === "undefined" ); const promises = toUpload.map( (fileState, i) => new Promise((resolve) => { const timeout = 2_000; setTimeout(() => { setFiles((currentState) => { return [ ...currentState.slice(0, i), { ...currentState[i], state: "UPLOAD_SUCCESS" }, ...currentState.slice(i + 1), ]; }); resolve(); }, timeout); }) ); const newFiles = files.map((file) => toUpload.includes(file) ? { ...file, state: "UPLOADING" } : file ); setFiles(newFiles); await Promise.all(promises); }} > Last opp

); }; render();

Progress­Bar

Live demo

ProgressBar