Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 138163

React Dropzone Uploader not playing along with form upload to mongo

$
0
0

(New to stackoverflow so please correct me if I've seemed to miss something from CoC) (Unfortunately wasn't able to tag this under 'react-dropzone-uploader', since I don't have 1500+ rep points)

I'm building a page in React has a form that also takes in multiple files, and then dispatches and adds the form (with the files) to mongo.

At first we had it looking like this (a typical input field that takes multiple files and appends their names as li's under):

<input type='file'
    id='test-input'
    aria-describedby='test'
    name='multiple_files' multiple
    onChange={onChangeFiles} /> 

And that all works fine, but we felt that we wanted something neater, and found the React-Dropzone-Uploader that allows nifty drag-n-drop (and is lightweight in comparison to other), so we replaced the input field with it (i.e RDU), but since then we aren't able to handle, nor see, the multiple files on the server-side, nor in the db, and I've played around with it for more hours than I'm willing to admit, but to no avail.

Anybody have an idea on why this is isn't working and maybe give a little push or a hint as to where I should look to realize what I'm doing wrong? I

on the form's submit, we call the onSubmit, like so:

const onSubmit = (data, files) => {
    let myForm = document.getElementById('myForm');
    const formData = new FormData(myForm);
    dispatch(addForm(formData))
}

the dispatch(addForm) takes us to the following action:

export const addForm = form => {
    return async (dispatch) => {
        axios({
            method: 'post',
            url: 'http://localhost:5555/add',
            data: form
        })
        .then(success => {
            console.log('form added successfully', success)
            dispatch({
                type: 'ADD_FORM',
                form,
                form_id: success.data.id
            })
        })
        .catch(error => {
            console.log('Unfortunately the form couldn\'t be added', error.message)
            dispatch({
                type: 'ERROR_ADDING',
                error: error.message
            })
        })
    }
}

In turn, the post-request that we are doing to the servers endpoint has the following code:

report
    .post('/add', upload.array('multiple_files'), (request, response) => {
        if (request.fileValidationError) {
            return response.status(400).json({ 'File upload Error': request.fileValidationError });
        }
        else if (!request.files) {
            console.log({ error: 'Please select an image to upload' });
        }
        let data = request.body;
        let addForm = new Forms(data);

        addForm
            .save()
            .then(result => {
                console.log('form added ', result);
                return response.status(200).json({ 'id': result._id });
            })
            .catch(error => {
                console.log('form NOT added ', error);
                return response.status(400).json({ 'Error': error });
            })
    })

We have passed the Dropzone-component these props:

<Dropzone
    name='attachment'
    accept='image/*, audio/*, video/*, .xlsx,.xls,.doc, .docx,.ppt, .pptx,.txt,.pdf'
    SubmitButtonComponent={null}
    inputContent={'Drag and drop your files here, or click/tap to attach files'}
    inputWithFilesContent={'Add more...'}
    getUploadParams={getUploadParams}
    onChangeStatus={handleChangeStatus}
/>

Now, from the documentation that originally had it included, I have removed the onSubmit-handler as a prop (and the funciton). I thought I could just pass the "files"-argument into the onSubmit-handler of the form.

When it comes to getUploadParams I'm not entirely sure how to handle it, since the dispatch is going to do the post-request to the url I'm not sure if I need the function with the url data it wants to be fed?

handleChangeStatus just console.logs the status of the upload with the meta..

So please tell me if I can provide any more info to help you help me get unstuck. Kind regards!


Viewing all articles
Browse latest Browse all 138163

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>