React-Dropzone-Uploader не играет вместе с загрузкой формы в mongo (RDU - React Dropzone Uploader)

(Новое в stackru, пожалуйста, поправьте меня, если мне показалось, что я что-то пропустил из CoC) (К сожалению, не смог пометить это в разделе "response-dropzone-uploader", так как у меня нет 1500+ очков повторов)

Я создаю страницу в React имеет форму, которая также принимает несколько файлов, а затем отправляет и добавляет форму (с файлами) в mongo.

Сначала это выглядело так (типичное поле ввода, которое принимает несколько файлов и добавляет их имена как li под):

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

И все это работает нормально, но мы почувствовали, что хотим чего-то более аккуратного, и нашли https://react-dropzone-uploader.js.org/ который позволяет отличное перетаскивание (и является легким по сравнению с другими), поэтому мы заменили им поле ввода (т.е. RDU), но с тех пор мы не можем обрабатывать и не видеть несколько файлов ни на стороне сервера, ни в базе данных, и я играл с ним больше часов, чем я готов признать, но безрезультатно.

Кто-нибудь знает, почему это не работает, и, возможно, немного подтолкнет или намекнет, где мне следует посмотреть, чтобы понять, что я делаю не так? я

в отправке формы мы вызываем onSubmit, например:

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

отправка (addForm) возвращает нас к следующему действию:

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
            })
        })
    }
}

В свою очередь, пост-запрос, который мы делаем для конечной точки серверов, имеет следующий код:

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

Мы передали компоненту Dropzone эти реквизиты:

<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}
/>

Теперь из документации, которая изначально была включена, я удалил onSubmit-хендлер как опора (и функция). Я подумал, что могу просто передать аргумент files в onSubmit-handler формы.

Когда дело доходит до getUploadParams, я не совсем уверен, как с этим справиться, поскольку диспетчер будет выполнять пост-запрос на URL-адрес, я не уверен, нужна ли мне функция с данными URL-адреса, которые она хочет передать?

handleChangeStatus просто console.logs статус загрузки с мета..

Поэтому, пожалуйста, скажите мне, могу ли я предоставить дополнительную информацию, которая поможет мне разобраться. С уважением!

0 ответов

Другие вопросы по тегам