Hinzufügen eines Feldes zum Hochladen mehrerer Bilder in ver 6.0 rc.3 von redux-form

Question

Ich experimentiere die redux-form v6.0.0 rc.3 und versuche, ein Feld zum Hochladen mehrerer Bilder hinzuzufügen.

Idee 1: fügen Sie ein Feld mit type = "file"

attachImages(images) { 
     console.info('images received: ', images); 
    } 

<Field 
         name="pics" 
         component={renderInput} 
         placeholder="Pictures" 
         onDrop={this.attachImages} 
         type="file" /> 

Idee 2: die Drittanbieter-Dropzone-Komponente verwenden:

onDrop(files, evt) { 
     console.log('received files: ', files); 
     evt.preventDefault(); 
    } 

<Dropzone 
        onDrop={ this.dropFile } 
       > 
        <div>Try dropping some files here, or click to select files to upload.</div> 
       </Dropzone> 

ich beide versucht haben, Ideen, aber die erste kann nicht die OnDrop-Funktion überhaupt auslösen, und die zweite Idee scheint vielversprechender, aber ich weiß nicht, wie ein Feld mit der API für ver 6.0.0 rc.3 hinzufügen. Jeder weiß es?

Answer 1

Nach viel Mühe, machte ich meine zweite Idee arbeiten, indem Sie die onDrop Rückruf für die Komponente ein wenig ändern. Die Änderung umfasst die Verwendung der dispatch-Funktion der reduxForm-Wrapper-Komponente mit dem Aktionstyp redux-form/CHANGE.

onDrop(files, evt) { 
     console.log('received files: ', files); 
     evt.preventDefault(); 
     this.props.dispatch({ 
      type: 'redux-form/CHANGE', 
      field: 'images', 
      value: files, // files is an array of File 
     }); 
    } 

Dann in den Druckminderer, sehe ich für den Aktionstyp redux-form/CHANGE und die Dateien für das Hochladen extrahieren. Dies kann ein wenig zu hacky sein, aber es funktioniert mit der aktuellen ver 6 RC3 API.