bbb / dropzone-redux-form-example Goto Github PK

Hi, Sir, I have tried your code it always returned [object FileList] in the results. May I know how to get the url for it? because I use the react-dropzone to connect with cloudinary API and upload the images to the Cloudinary server. thank you if you know how to do it.

I have cloned the project and when i run in my browser, the console.info('POST', body, data); at line 40 (App.js) just shows a empty FormData. Is that normal?

Thank you for the tutorial. It was helpful for a newbie like me. Is there anyway I can get rid of the dotted border in the dropzone? I tried looking for the style part of it but couldn't find it.

Hi @BBB,
Thanks for your exemple ! Working great.
But i wondering why in my redux store i have only the preview element and not the others elements.

Redux devtools :

The file in the Chrome dev console

Thanks for your help

I used your example but php server does not see the file. Maybe because of incorrect headers

When server get a request it sees that is a string

 files = "[object FileList]" 

$_FILES in php is empty

I have read that you should only use primitives in the redux store and perhaps this is why? any thoughts on this?

Hi @BBB and thanks for this project!
I tried to clone and run it, but at first i get 404 on these:
GET http://localhost:3000/build/vendor.css
GET http://localhost:3000/build/app.css
choosing/dragging a file does nothing, and hitting 'Submit' get me these:

Fetch API cannot load http://example.com/send/. No 'Access-Control-Allow-Origin' header is present on the requested resource.
App.js?a673:33 TypeError: Failed to fetch(…

Maybe i don't understand the purpose of the example, but i don't see any use of form validation/errors regarding dropzone.
I'll be happy to get some guidance about how to use your example.

I'm trying upload a zip file along with form data as you mentioned in your code.But , how to send it to server .Here is my code.

`var formData = new FormData();
 formData.append('modelfile', values.values.modelfile[0]);
 return axios.post('http://127.0.0.1:8000/addProduct',formData, { headers: {'Content-Type': 'multipart/form-data' }} ) 
.then(res=>dispatch({type:'PRODUCT_UPLOADED_SUCCESSFULLY'})) .catch(error=>dispatch({type:'PRODUCT_UPLOADED_FAILED'}))`

Hi, Ollie,
I'm implementing a redux-form with Dropzone and other submission data. I tried your code and when I just tried to render the dropzone component, I got the subject error and in other instances, I'm getting "TypeError: Cannot read property 'value' of undefined at exports.default," which must be pointing to "const files = field.input.value;".

I don't think I'm exporting and importing wrong. Do you know what is wrong with it?

import React, { Component, PropTypes, } from 'react';
import Dropzone from 'react-dropzone';
import { reduxForm, Field } from 'redux-form';


const FILE_FIELD_NAME = 'files';

const renderDropzoneInput = (field) => {
  const files = field.input.value;
  return (
    <div>
      <Dropzone
        name={field.name}
        onDrop={(filesToUpload, e) => field.input.onChange(filesToUpload)}
      >
        <div>Try dropping some files here, or click to select files to upload.</div>
      </Dropzone>
      {field.meta.touched &&
        field.meta.error &&
        <span className="error">{field.meta.error}</span>}
      {files && Array.isArray(files) && (
        <ul>
          { files.map((file, i) => <li key={i}>{file.name}</li>) }
        </ul>
      )}
    </div>
  );
};

export default renderDropzoneInput;

When importing:
import renderDropzoneInput from './images/render_dropzone_input';

My render method:

render() {
    return (
      <div>
        {this.renderFields()}
      <div>
      <label htmlFor={FILE_FIELD_NAME}>Files</label>
       <Field
         name={FILE_FIELD_NAME}
         component={renderDropzoneInput}
       />
      </div>
      </div>
    );
  }
}

Integrating with Rails, I've copied this example as-is, and I'm getting the data, but there's no feedback (progress) or preview displayed. Could you shed any light on why that might be the case?

If I modify the example to add <img src={file.preview} /> when the uploaded file is listed, it shows up, but that's not the expected default behavior, is it?

Not including code only because it's exactly what you have here... except in a Rails context (i.e., the component is served up as a view). I suspect I'm just having a mental disconnect between Dropzone and dropzone.js in terms of configurability.