1

puppeteerからページにアクセスし、formを自動入力して登録する機能を実装しているのですが、dropzoneで実装されているファイルアップロードに対してどのように画像を登録すればよいか、悩んでいます。

ファイルのアップロードの仕方自体は

const eleHandle = await page.$('fileInput');
eleHandle.uploadFile('uploadFile');

といった形で実装できるのは知っているのですが、dropzoneで実装されたFormにはfileフォームが無い状態です。

画像をアップロードする方法としては、dropzone領域をクリックしてファイルダイヤログから選択するか、画像をdropzone領域までドラッグ&ドロップする方法がありますが、puppeteerではこれらにアプローチして画像をアップロードするのは難しいのかなと思っています。

良い解決案がありましたら、教えていただけると助かります。

1

1 件の回答 1

1

もう解決されたかもしれないですが、自分のケースではinput[type=file]要素をその場で追加してuploadFileを実行し、changeイベントをDropzoneへのdropイベントに変換してやることで無理やり解決できました。

// input[type=file]を追加
await page.evaluate(() => {
  let fileInput = document.createElement('input')
  fileInput.id = 'dummy-file-input'
  fileInput.type = 'file'

  // changeイベントをDropzoneへのdropイベントに変換する
  fileInput.onchange = (e) => {
    // FileListをArrayに変換しておかないとDropzone内部でmap適用に失敗する
    let files = []
    for (var i = 0; i < e.target.files.length; i++) { files.push(e.target.files[i]) }

    let dropEvent = document.createEvent('UIEvents')
    dropEvent.initUIEvent('drop', false, false)
    dropEvent.dataTransfer = { files: files }

    let dropZone = document.querySelector('.dropzone.dz-clickable')
    dropZone.dispatchEvent(dropEvent)
  }
  document.body.appendChild(fileInput)
})

// 追加されたinput[type=file]に対してファイルを設定する.
let fileInput = await page.$('#dummy-file-input')
await fileInput.uploadFile(filePath)

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。