Comments (17)
Same problem here. I cannot send certain params to the server using this:
djsConfig = {
addRemoveLinks: true,
params: {
param1: "I'm a parameter!",
param2: "hello"
}
};
And on the server the request.payload
only contains file
as parameter. I've looked into request.body
, request.data
but none contains those parameters.
Any help?
[UPDATE]
The problem was that I was declaring djsConfig
on componentDidMount
, after moving it to componentWillMount
it works.
Is there a way to dynamically upload those params variables?
from react-dropzone-component.
Sure! Do you have a link or a description of what you were trying to do? If I'm making an example, I might as well make the thing you're trying to do ;-)
from react-dropzone-component.
Below the simplified working client side code. On the server side Node/Express/blueimp.
Upload works fine in manual or auto Process mode. I'm just unable to pass extra params. I tried
-
adding some parameters to dzComponentConfig or dzConfig like
dzConfig = {
...
params: {
param1 : 'param1'
}
...
} -
append some data to a Sending callback
var dzSending = function(file, xhr, data) {
console.log('sending', dzConfig.uploadId, file, xhr, data);
data.append("uploadId", dzConfig.uploadId);
}; -
add some params to url pr postUrl like
url = '/uploading?param1=param1¶m2=param2'
import React from 'react';
import _ from 'lodash';
import DropzoneComponent from "react-dropzone-component";
var dzComponentConfig = {
allowedFiletypes: [
'.doc', '.jpg', '.mp3', '.pdf', '.txt'
],
showFiletypeIcon: true,
postUrl: '/uploading'
};
var dzConfig = {
autoProcessQueue:true,
addRemoveLinks: true,
uploadMultiple: true,
maxFileSize:10,
maxFiles:10
};
var dropzone;
var dzInit = function(DzObject) {
dropzone = DzObject;
};
var dzEventHandlers = {
init: dzInit
};
export default class InputDropzone extends React.Component {
constructor(props) {
super(props);
this.state = {
className: '',
iconName: '',
errorMessage: ''
};
}
render() {
return (
<div className={'form-group '+this.state.className}>
<label className="control-label" htmlFor={this.props.name.toLowerCase()}>{this.props.label}</label>
<span className='text-warning pull-right'>{this.state.errorMessage}</span>
<DropzoneComponent
name={this.props.name.toLowerCase()}
config={dzComponentConfig}
djsConfig={dzConfig}
eventHandlers={dzEventHandlers}
{...this.props}
/>
<span className={this.state.iconName}></span>
</div>
)
}
};
from react-dropzone-component.
+1
from react-dropzone-component.
Hey! I just added a small example that you can run with grunt params
, but here's the short version:
- Custom
params
can be added to the Dropzone.js configuration object (which is passed through to Dropzone.js asdjsConfig
) - On the server side, those parameters will be available in the body of the request
Code
var djsConfig = {
addRemoveLinks: true,
params: {
myParam: 'Hello from a parameter!',
anotherParam: 43
}
};
var componentConfig = {
showFiletypeIcon: false,
postUrl: '/uploadHandler'
};
// Render
React.render(<DropzoneComponent config={componentConfig} djsConfig={djsConfig} />, document.getElementById('content'));
app.post('/uploadHandler', function (req, res) {
// Params will be in the body of the request
if (req.body) {
console.dir(req.body);
}
res.sendStatus(200);
});
@appshore @mattapperson: Hope that helps - feel free to star the project if you appreciate the support here ;-)
from react-dropzone-component.
Thanks Felix,
Still no luck with it.
The server side works fine. When I run a Curl command line I have the expected parameters in the body.
curl --header "X-Requested-With: XMLHttpRequest" --data "param1=value1¶m2=value2" http://localhost:3000/uploading
...
writeHead: [Function: writeHead] },
body: { param1: 'value1', param2: 'value2' },
_body: true,
...
As a workaround I can use the query params in the url which works contrary to what I said in my example.
var dzComponentConfig = {
allowedFiletypes: [
'.doc', '.jpg', '.mp3', '.pdf', '.txt'
],
showFiletypeIcon: true,
postUrl: '/uploading?param1=param1'
};
...
router.get('/uploading', function(req, res) {
console.log('uploader get', req.body, req.query); // query = { param1: 'param1' }
uploader.get(req, res, function(err, obj) {
res.sendStatus(200);
});
});
from react-dropzone-component.
When you use your client code with the example server, do the params arrive?
from react-dropzone-component.
I didn't use the example server code, I'm using node/express/blueimp. All work fine but the retrieval of the params.
// server.js
import express from 'express';
import compression from 'compression';
import bodyParser from 'body-parser';
const app = express();
// enable gzip compression
app.use(compression());
// add bodyParser
app.use(bodyParser.urlencoded({ extended: false }));
// view engine setup
app.set('views', __dirname + '/../public');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
// set static folder
app.use(express.static(__dirname + '/../public'));
// import routes
app.use('/', require('./routes'));
/// error handlers
// development error handler will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
console.log( 'dev', err);
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
next();
});
} else {
// production error handler no stacktraces leaked to user
app.use(function(err, req, res, next) {
console.log( 'prod', err);
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
next();
});
}
var server = app.listen(3000, function() {
var host = server.address().address;
var port = server.address().port;
console.log('listening at http://%s:%s', host, port);
});
// upload.js
import fs from 'fs-extra';
import _ from 'lodash';
import moment from 'moment';
module.exports = (router) => {
var uploader;
var uploaderOptions = {};
var timestamp;
router.all('/upload', (req, res, next) => {
console.log('uploader all', req.xhr, req.method);
if ( _.contains(['POST', 'DELETE'], req.method) && (req.xhr || req.headers.accept.indexOf('json') > -1) ) {
timestamp = moment(parseInt(req.query.uploadTimestamp || req.body.uploadTimestamp)).utc().format('YYYY/MM/DD/HHmmss.SSS');
uploaderOptions = {
tmpDir: '/tmp',
storage: {
type: 'local'
},
uploadDir: __dirname + '/../../public/uploaded/'+timestamp,
uploadUrl: '/uploaded/'+timestamp+'/'
};
uploader = require('blueimp-file-upload-expressjs')(uploaderOptions);
next();
} else {
res.render('index');
}
});
router.post('/upload', (req, res) => {
fs.mkdirs( uploaderOptions.uploadDir+'/thumbnail', () => {
console.log('uploader post timestamp:', timestamp, 'query:', req.query || '', 'body:', req.body || '');
uploader.post(req, res, (err, obj, redirect) => {
console.log('uploader post body:', req.body, 'query:', req.query, 'err:', err, 'obj:', obj, 'redirect:', redirect);
res.send(JSON.stringify( { ok: 'File added' }));
});
});
});
.....
return router;
};
from react-dropzone-component.
Pass param is working, but my token is at headers, not body, how to add token in my header?
from react-dropzone-component.
@eldyvoon Did you find out a way to add params in header for react dropzone component ?
from react-dropzone-component.
@Ankita35 I gave up using this component.
from react-dropzone-component.
Hey @eldyvoon Do you have any idea how a file can be passed to dispatcher using redux form? I'm trying to implement the same using Dropzone.
from react-dropzone-component.
@Ankita35 does passing a dispatcher has anything to do passing params in header? I think your dispatcher should be triggered in the callback function once user appended a file.
from react-dropzone-component.
@eldyvoon I was wondering to post my header params using post in dispatcher as couldn't find any way out using dropzone-component. Any thoughts around putting to AWS S3 directly using the react-dropzone-component?
from react-dropzone-component.
@Ankita35 Nope.
from react-dropzone-component.
while debugging react-dropzone.js file .
on line number 1480 : the loop should appends key value to formdata, however even after execution of loop the formdata remains empty..
i think that is the issue here ..
i havent solved yet..
ill update here if found solution
from react-dropzone-component.
You can use: this.dropzone.options.params = {...} before processQueue call
from react-dropzone-component.
Related Issues (20)
- How to restrict image upload size to 5MB
- Allow to upload only pdf files works on desktop but doesn't work on mobile phone's?
- What is the correct latest version? HOT 2
- React 16 migration (lifecycle methods) HOT 3
- Params do not works HOT 2
- How do I append file(s) to formData? HOT 1
- I need to set withCredentials property to true. How can I do that using provided API?
- How can we updated group permissions using PNP HOT 5
- Trigger success indicator (checkmark) appear when using 'no-url' option
- how get upload progress value in djsConfig
- findDOMNode is deprecated in StrictMode.
- Unable to set dynamic acceptedFiles in react-dropzone-component HOT 2
- next/image is not working with react-dropzone-component
- Pass more parameters in useDropzone
- how to set inital files HOT 2
- Upload .pptx file using Dropzone
- 'DropzoneComponent' does not have any construct or call signatures HOT 2
- Inappropriate file formats are attached on the android phone HOT 1
- Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- Issue with disabling drag and drop functionality
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-dropzone-component.