diff --git a/UI/Component/Form.js b/UI/Component/Form.js index 1f34dbe..d6a046e 100644 --- a/UI/Component/Form.js +++ b/UI/Component/Form.js @@ -4,8 +4,8 @@ import { NotificationMessage } from '../../Message/Notification/NotificationMess import { NotificationType } from '../../Message/Notification/NotificationType.js'; import { Request } from '../../Message/Request/Request.js'; import { RequestMethod } from '../../Message/Request/RequestMethod.js'; +import { RequestType } from '../../Message/Request/RequestType.js'; import { Response } from '../../Message/Response/Response.js'; -import { ResponseType } from '../../Message/Response/ResponseType.js'; import { FormView } from '../../Views/FormView.js'; /** @@ -333,10 +333,9 @@ export class Form self = this; request.setData(form.getData()); - request.setType(ResponseType.JSON); + request.setType(RequestType.FORM_DATA); request.setUri(action ? action : form.getAction()); request.setMethod(form.getMethod()); - request.setRequestHeader('Content-Type', 'application/json'); request.setSuccess(function (xhr) { console.log(xhr.response); diff --git a/Views/FormView.js b/Views/FormView.js index f3b65f6..e135fe5 100644 --- a/Views/FormView.js +++ b/Views/FormView.js @@ -359,21 +359,33 @@ export class FormView /** * Get form data * - * @return {Object} + * @return {FormData} * * @since 1.0.0 */ getData () { const data = {}, + formData = new FormData(), elements = this.getFormElements(), length = elements.length; let value = null; for (let i = 0; i < length; ++i) { + const id = FormView.getElementId(elements[i]); + if (id === null) { + continue; + } + if (elements[i].tagName.toLowerCase() === 'canvas') { value = elements[i].toDataURL('image/png'); + } else if (elements[i].tagName.toLowerCase() === 'input' && elements[i].type === 'file') { + const filesLength = elements[i].files.length; + + for (let j = 0; j < filesLength; ++j) { + formData.append(id + j, elements[i].files[j]); + } } else { if (typeof elements[i].value !== 'undefined') { value = elements[i].value; @@ -382,11 +394,6 @@ export class FormView } } - const id = FormView.getElementId(elements[i]); - if (id === null) { - continue; - } - // handle array data (e.g. table rows with same name) if (data.hasOwnProperty(id)) { if (data[id].constructor !== Array) { @@ -399,26 +406,13 @@ export class FormView } } - // Create FormData - /** - * @todo Orange-Management/Modules#202 - * Consider to use FormData - * Form data is currently submitted in two steps if it contains media files. - * 1. Upload media data - * 2. Submit form data - * Consider to use `FormData` in order to submit media files and form data at the same time. - */ - /* - const formData = new FormData(), - dataLength = data.length; - for (let key in data) { if (data.hasOwnProperty(key)) { formData.append(key, data[key].constructor === Array ? JSON.stringify(data[key]) : data[key]); } - } */ + } - return data; + return formData; }; /**