Add a by file remove handler

CalderaWP · Oct 26, 2018 · 19283f6 · 19283f6
1 parent 539c3fc
commit 19283f6
Showing 1 changed file with 45 additions and 31 deletions.
diff --git a/clients/render/components/Fields/FileInput.js b/clients/render/components/Fields/FileInput.js
@@ -22,7 +22,17 @@ export class FileInput extends React.Component {
         files: [...prevState.files, file]
       }))
 		})
-
+
+	}
+
+	removeFile(file) {
+
+		let tmpFiles = [...this.state.files];
+		const index = tmpFiles.indexOf(file);
+		tmpFiles.splice(index, 1);
+
+		this.setState({files: tmpFiles});
+
 	}
 
 	render() {
@@ -42,36 +52,40 @@ export class FileInput extends React.Component {
     } = field;
 
 		return(
-
-			<Dropzone
-				id={fieldIdAttr}
-				onDrop={this.onDrop.bind(this)}
-				style={style}
-				className={className}
-				accept={accept}
-				disabled={shouldDisable}
-				inputProps={inputProps}
-				disableClick={shouldDisable}
-				multiple={multiple}
-			>
-				<button type="button" className="btn btn-block">
-					{multiUploadText}
-				</button>
-
-				<ul>
-					{
-						files.map(
-							(file, index) =>
-								<li key={index} className="file-listed">
-									<img width="120" height="120" src={file.preview} alt={file.name} />
-									<br/>
-										{file.type} - {file.size} bytes
-								</li>
-						)
-					}
-				</ul>
-
-			</Dropzone>
+			<div className="dropzone">
+				<Dropzone
+					id={fieldIdAttr}
+					onDrop={this.onDrop.bind(this)}
+					style={style}
+					className={className}
+					accept={accept}
+					disabled={shouldDisable}
+					inputProps={inputProps}
+					disableClick={shouldDisable}
+					multiple={multiple}
+					value={files}
+				>
+					<button type="button" className="btn btn-block" >
+						{multiUploadText}
+					</button>
+
+				</Dropzone>
+				<aside>
+					<ul>
+							{
+								files.map(
+								(file, index) =>
+									<li key={index} className="file-listed">
+										<img width="120" height="120" src={file.preview} alt={file.name} />
+										<br/>
+										{file.type} - {file.size} bytes - <button onClick={this.removeFile.bind(this)} >Remove</button>
+
+									</li>
+								)
+							}
+					</ul>
+				</aside>
+			</div>
 
 		)