gubsey Posts - Answer Overflow

gubsey

•Created by gubsey on 7/1/2023 in #support

Any way to get the status of a multipart/form-data file upload?

I would like to be able to give the user some indication of how much of their file has completed uploading. As per the title, the form is of type "multipart/form-data". Is there any way to do this? Maybe some way to count the number of bytes sent?

2 replies

SSolidJS

•Created by gubsey on 6/23/2023 in #support

Signals not updating in <For> tag

I have code that looks like this:

const [grid, updateGrid] = createSignal(new Array(10).fill([]).map(_ => new Array(10).fill(false).map(_ => Math.random() * 10 < 5)))

const flip = (x: number, y: number) => {
  let val = grid();
  val[y][x] = !val[y][x]
  updateGrid(val)
}

return (
  <table>
    <tbody>
      <For each={grid()}>{(row, y) => (
        <tr>
          <For each={row}>{(cell, x) => (
            <td
              class={`${cell ? "bg-green-500" : 'bg-red-500'} w-8 h-8 border border-separate`}
              onclick={_ => flip(x(), y())}></td>
          )}</For>
         </tr>
      )}</For>
    </tbody>
  </table>
);

const [grid, updateGrid] = createSignal(new Array(10).fill([]).map(_ => new Array(10).fill(false).map(_ => Math.random() * 10 < 5)))

const flip = (x: number, y: number) => {
  let val = grid();
  val[y][x] = !val[y][x]
  updateGrid(val)
}

return (
  <table>
    <tbody>
      <For each={grid()}>{(row, y) => (
        <tr>
          <For each={row}>{(cell, x) => (
            <td
              class={`${cell ? "bg-green-500" : 'bg-red-500'} w-8 h-8 border border-separate`}
              onclick={_ => flip(x(), y())}></td>
          )}</For>
         </tr>
      )}</For>
    </tbody>
  </table>
);

This creates a random grid of red ang green squares. I want to be able to click any square and have the color flip. With logging, I found that the grid signal is updating, but the colors aren't changing. Am I completely misunderstanding signals here?

47 replies

SSolidJS

•Created by gubsey on 6/19/2023 in #support

Content Security Policy Issues

When attempting to deploy with docker I get these errors in the console Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). and

Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:4173/favicon.ico (“default-src”).

I am running with npm run serve --host I can't find anything solid specific about this anywhere.

1 replies

SSolidJS

•Created by gubsey on 6/16/2023 in #support

How to create a signal for a webkitdirectory input

I have an app which looks like this:

import { createSignal, type Component } from 'solid-js';

const App: Component = () => {
  const [files, setFiles] = createSignal(/* What do I put here? */)
  return (
    <main>
      <form onsubmit={(ev) => ev.preventDefault()}>
        {/* @ts-expect-error */}
        <input type="file" id='files' webkitdirectory directory multiple />
        <input type='submit' value="Submit" />
      </form>
    </main>
  );
};

export default App;

import { createSignal, type Component } from 'solid-js';

const App: Component = () => {
  const [files, setFiles] = createSignal(/* What do I put here? */)
  return (
    <main>
      <form onsubmit={(ev) => ev.preventDefault()}>
        {/* @ts-expect-error */}
        <input type="file" id='files' webkitdirectory directory multiple />
        <input type='submit' value="Submit" />
      </form>
    </main>
  );
};

export default App;

How do I extract the list of files from that input?

5 replies

Gaming

Programming