CODEWITHSUNDEEP
reactjsfile-uploadreact-dropzone
Bala vamsi
Bala vamsi

Reputation: 222

How to get the response data from backend to React in React-dropzone-uploader

 const MyUploader = () => {
    
    const getUploadParams = ({ meta,url }) => {          // specify upload params and url for your files
      console.log("uploadParams",meta,url)
      return { url: '/v1/file_uploads/' }
    }
       
    const handleChangeStatus = ({ meta, file }, status) => {     // called every time a file's `status` changes
      console.log("handleStatus",status, meta, file) 
    }
        
    const handleSubmit = (files, allFiles) => {   // receives array of files that are done uploading when submit button is clicked
      console.log(files.map(f => f.meta))
      allFiles.forEach(f => f.remove())
    }
  
    return (
      <Dropzone
        getUploadParams={getUploadParams}
        onChangeStatus={handleChangeStatus}
        onSubmit={handleSubmit}
        accept="image/*"
      />
    )
  }

<MyUploader />

I'm able to save the uploaded file in the Database, when file is saved i am rendering some information

render json: {status: "Success", blob: blob, url: URL }

How can i console log this data which i am rendering in the React ??

The link of the package is : https://github.com/fortana-co/react-dropzone-uploader

Upvotes: 1

Views: 923

Answers (1)

Bala vamsi
Bala vamsi

Reputation: 222

I have solved the problem by passing xhr as a parameter to handleChangeStatus function.

const MyUploader = () => {
    
    const getUploadParams = ({ meta }) => {          // specify upload params and url for your files
      return { url: '/v1/file_uploads/' }
    }  

    const handleChangeStatus = ({ meta, file,xhr }, status) => {     // called every time a file's `status` changes
      console.log("handleStatus",status, meta, file) 
      if(status == "done") { 
        var json = JSON.parse(xhr.response)
        var arr_blob_ids = state.documents_blob_ids.slice()
        console.log("id added",json.blob.id)
        if (json.blob.id){
          arr_blob_ids.push(json.blob.id)
          setState({...state,documents_blob_ids: arr_blob_ids})
        }
       }

      else if(status == "removed") {
        var json = JSON.parse(xhr.response)
        var arr_blob_ids = state.documents_blob_ids.slice()
        console.log("id removed",json.blob.id)
        if (json.blob.id){
          arr_blob_ids =  arr_blob_ids.filter( v => v!= json.blob.id)
          setState({...state,documents_blob_ids: arr_blob_ids})
        }       
      }
     
    }
        
    const handleSubmit = (files, allFiles) => {   // receives array of files that are done uploading when submit button is clicked
      console.log(files.map(f => f.meta))
      allFiles.forEach(f => f.remove())
    }
  
    return (
      <Dropzone
        getUploadParams={getUploadParams}
        onChangeStatus={handleChangeStatus}
        onSubmit={handleSubmit}
        accept="image/*"    
        submitButtonContent = {null}
        SubmitButtonComponent = {null}    
      />
    )
  }

Upvotes: 1

Related Questions