Passing extra parameters about react-dropzone-component HOT 17 CLOSED

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

1. adding some parameters to dzComponentConfig or dzConfig like
   dzConfig = {
   ...
   params: {
   param1 : 'param1'
   }
   ...
   }

2. 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);
   };

3. add some params to url pr postUrl like
   url = '/uploading?param1=param1&param2=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 as djsConfig)
• 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&param2=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.