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 статус загрузки с мета..
Поэтому, пожалуйста, скажите мне, могу ли я предоставить дополнительную информацию, которая поможет мне разобраться. С уважением!