bbb / dropzone-redux-form-example Goto Github PK
View Code? Open in Web Editor NEWAn example app for integrating dropzone with redux-form
An example app for integrating dropzone with redux-form
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?
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.
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.
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.
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.
The file in the Chrome dev console
Thanks for your help
I have read that you should only use primitives in the redux store and perhaps this is why? any thoughts on this?
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>
);
}
}
When server get a request it sees that is a string
files = "[object FileList]"
$_FILES in php is empty
I used your example but php server does not see the file. Maybe because of incorrect headers
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.
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'}))`
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.