React-Dropzone-Uploader не воспроизводится вместе с загрузкой формы в пн go (RDU - React Dropzone Uploader) - PullRequest
Новая
       53

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

1 голос
/ 20 января 2020

(Впервые в stackoverflow, поэтому, пожалуйста, исправьте меня, если я что-то упустил из Co C) (К сожалению, я не смог пометить это в соответствии с 'response-dropzone-uploader', так как у меня нет 1500 + rep points)

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

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

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

И все работает нормально, но мы чувствовали что мы хотели что-то более аккуратное, и нашли React-Dropzone-Uploader , который допускает изящное перетаскивание (и является легким по сравнению с другими), поэтому мы заменили поле ввода с ним (то есть RDU ), но с тех пор мы не можем обрабатывать или просматривать несколько файлов на стороне сервера или в базе данных, и я поиграл с этим для больше часов, чем я готов признать, но безрезультатно.

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

при отправке формы, мы вызываем onSubmit следующим образом: 

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

dispatch (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 вида.

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

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

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

...