Necesito emular un archivo que cae del sistema de archivos a una página. Así que uso este ejemplo: https://charliedigital.com/2021/12/20/simulate-drag-and-drop-of-files-with-playwright/
let fileBuffer = await fs.readFileSync(itemFilePath) const dataTransfer = await buildTabPage.page.evaluateHandle((fileBuffer) => { const dt = new DataTransfer(); console.log(JSON.stringify(fileBuffer)) const file = new File([fileBuffer.toString('hex')], '140185A.zip', { type: 'application/octet-stream' }); dt.items.add(file); return dt ; }, fileBuffer); await buildTabPage.page.dispatchEvent('.file-dropzone', 'drop', { dataTransfer });Funciona, se activa el evento de caída y veo que el archivo llega al backend.
El problema es que dentro de la función, cada elemento de la cadena de búfer parece un objeto en lugar de un simple número.
Después de leer el archivo, fileBuffer coincide con el búfer que llega al backend cuando coloco un archivo manualmente. Si lo imprimo, parece una cadena de valores:
[ 80, 75, 3, 4 ... ] Pero dentro de la evaluateHandle cada elemento del búfer parece un objeto:
{ k: '0', v: { n: 80 } } En lugar de solo 80 .
Por lo que veo, esto sucede en node_modules\playwright-core\lib\protocol\serializers.js -> function serializeValue(value, handleSerializer, visited)
Entonces, cuando llamo a fileBuffer.toString('hex') no proporciona el contenido del archivo. en su lugar, proporciona la salida [object Object] .
Y no puedo volver a convertirlo en búfer allí, ya que el Buffer no está definido en ese contexto.
¿Cómo pasar correctamente un búfer al contexto de la página?
La solución es pasar no todo el búfer sino la única cadena de elementos del búfer a la función evaluateHandle (o pasar la cadena hexadecimal en lugar del búfer).
let fileBuffer = await fs.readFileSync(itemFilePath) const dataTransfer = await buildTabPage.page.evaluateHandle((fileBuffer) => { const dt = new DataTransfer(); const file = new File([new Uint8Array(fileBuffer)], '140185A.zip', { type: 'application/octet-stream' }); dt.items.add(file); return dt; }, fileBuffer.toJSON().data); // or fileBuffer.toString('hex')