read from input type="file"

[NookieGrey]

Is it any way to read from input type="file" event.target.files[0] ?

[ninaandcam]

Jimp.read() optionally accepts a Buffer instead of a path string as the first parameter. Getting a Buffer seems to be a two-step process:

1. Use FileReader.readAsArrayBuffer(event.target.files[0])
2. Use new Uint8Array(arrayBuffer)

See this SO post for a full example.

[NookieGrey]

great thank, work with 1. step

[avichal-neweradeveloper]

Can you explain 1 and 2 what is FileReader.readAsArrayBuffer, I am new to jimp please tell me how to do it

[NookieGrey]

This is vanilla js https://developer.mozilla.org/docs/Web/API/FileReader/readAsArrayBuffer

[alclimb]

The following typescript works fine in browsers:

/**
 * files: List of files from HTML5 input or drop.
 */
async function read(files: FileList) {
  // Convert to ArrayBuffer format.
  const arrayBuffer = await files[0].arrayBuffer();

  // Read ArrayBuffer with Jimp ("any" to avoid type errors)
  const img = await Jimp.read(arrayBuffer as any);
}