Write the content of a text file line by line with Svelte

Viewed 947

i wrote this code in svelte that open a txt file, and write it in a html paragraph. This is the code:

<input type='file' multiple bind:files'>

{#if files}
    <h2>Files selected: </h2>
{#each Array.from(files) as file}
<p> IThe imported file is: {file.name}</p>
{#await file.text() then text}
<p>{text}</p>
{/await}
{/each}
{/if}

and the example file is like this:

beans
spam
donut

but it gives me this:

beans spam donut

how can I create a new line (paragraph or <br>) for each line in the text?

1 Answers

How about this? Simply split on the newline and create a new p tag.

<script>
    let files;
</script>

<input type='file' multiple bind:files />

{#if files}
    <h2>Files selected: </h2>
{#each Array.from(files) as file}
<p> IThe imported file is: {file.name}</p>
{#await file.text() then text}
{#each text.split('\n') as line }
<p>{line}</p>
{/each}
{/await}
{/each}
{/if}
Related