Skip to content

Instantly share code, notes, and snippets.

@benhysell
Created July 23, 2018 19:55
Show Gist options
  • Save benhysell/f2285f934c9f2d666c569e770ba340d9 to your computer and use it in GitHub Desktop.
Save benhysell/f2285f934c9f2d666c569e770ba340d9 to your computer and use it in GitHub Desktop.
React-DropZone file upload with redux-form and remove file after added
import * as React from 'react';
import { Alert, Checkbox, FormGroup } from 'react-bootstrap';
import Dropzone from 'react-dropzone';
import * as _ from 'lodash';
// tslint:disable-next-line:typedef
public static dropZoneFileInput(field) {
const files = field.input.value;
return (
<div>
<h5>{field.title}</h5>
{/* hide the upload drop zone if only a single file */}
<div hidden={!field.multipleFiles && Array.isArray(files) && files.length > 0}>
<Dropzone
disabled={field.disabled}
name={field.name}
multiple={field.multipleFiles}
onDrop={(filesToUpload, e) => {
let newFiles = filesToUpload;
if (Array.isArray(field.input.value)) {
newFiles = _.concat(field.input.value, newFiles);
}
field.input.onChange(newFiles);
}
}
>
<div>{field.placeHolder}</div>
</Dropzone>
</div>
{field.meta.touched &&
field.meta.error &&
<span className="error">{field.meta.error}</span>}
{files && Array.isArray(files) && (
<div style={{padding: '5px'}}>
<ul className="list-group">
{
files.map((file, i) => <li className="list-group-item" key={i}>
<button
className="btn btn-xs btn-danger pull-right"
disabled={field.disabled}
type="button"
onClick={(e) => {
let y = field.input.value;
let remainingFiles = _.filter(y, (o) => o.name !== file.name);
field.input.onChange(remainingFiles);
}}
>
<span className="glyphicon glyphicon-remove-sign" />
</button> {file.name} <div className="pull-right" style={{paddingRight: '5px'}}>{Math.round(file.size / Math.pow(2, 10)).toLocaleString()} KB</div> </li>)}
</ul>
</div>
)}
<br />
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment