Odtnhj

I am trying to upload image one by one with change and delete option(for each image uploaded) in multiple view with react, apollo client. But with this I can't get the clear thought about how to perform this easily and confused a lot..

Please anyone help me to get rid of this...

**updated**

Hi now i am using react-dropzonecomponent so far, but here i did mutiple file upload with delete option only..

Here i can send the files to server(node using mulitpart form data), in DB create the file in server end and store the path in database with path name only... But here i can't show the image files in front end from the path got from Back end...

const initialState = 
 files: ,
 imagePreviewUrl: 
;

class Image extends React.Component 
 constructor(props) 
 super(props); 
 this.state = ...initialState ; 
 

 componentWillMount() 
 let match, data = this.props; 
 const id = match.params.id && match.params.id.slice(1); 
 if (id) 
 let currentProduct = (data && data.getProduct) && data.getProduct.find((data) => 
 return data.id == id; 
 ); 
 this.setState(
 imagePreviewUrl: currentProduct.images
 );
 
 

 handleAdd(file) 
 console.log(file) 
 var allFiles = this.state.files; 
 allFiles = allFiles.concat([file]); 
 this.setState(
 files: allFiles
 ); 
 

 handleRemove(file) 
 let allFiles = this.state.files; 
 this.state.files.forEach((itr, i) => 
 if (itr.upload.uuid == file.upload.uuid) 
 allFiles.splice(i, 1) 
 
 ); 
 this.setState( 
 files: allFiles 
 ); 
 console.log(this.state.files, allFiles, file) 
 


 render() 
 let match, classes, data = this.props; 
 let imagePreviewUrl = this.state; 
 const id = match.params.id && match.params.id.slice(1); 
 var self = this; 
 return ( 
 <GridContainer> 
 <DropzoneComponent 
 config= 
 postUrl: 'no-url', 
 iconFiletypes: ['.jpg', '.png', '.gif'], 
 showFiletypeIcon: true 
 
 eventHandlers= 
 
 addedfile: (file) => this.handleAdd(file), 
 removedfile: (file) => this.handleRemove(file), 
 init: (dropzone) => 
 console.log(dropzone) 
 
 
 djsConfig= 
 autoProcessQueue: false, 
 addRemoveLinks: true, 
 previewTemplate: ReactDOMServer.renderToStaticMarkup( 
 ...<img data-dz-thumbnail="true" /> ...) /> 
 </GridContainer> 
 ); 
 
 

export default withStyles(style)(Image);