

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

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

[code]

    const eleHandle = await page.$('fileInput');
    eleHandle.uploadFile('uploadFile');
    
[/code]

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

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

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


CC BY-SA 4.0
2018-09-07T10:34:47.910
48184
2018-11-16T07:55:59.560
2018-09-07T14:28:20.130
19110
30026
question
javascript puppeteer
dropzoneで実装されているファイルアップロードをpuppeteerから登録する方法


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

[code]

    // 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)
    
[/code]


CC BY-SA 4.0
2018-11-16T07:55:59.560
50377
2018-11-16T07:55:59.560
31025
48184
answer