Skip to content

Commit

Permalink
feat: file upload support added
Browse files Browse the repository at this point in the history 
Fixes eFishery#21
  • Loading branch information
@yigitcukuren
yigitcukuren committed Oct 2, 2020
1 parent 71a012b commit 93a4228
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 7 deletions.
19 changes: 19 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,18 @@ We use react-select for rendering input type select and its options. By default
- **options**: array
> The options is array of object that consists at least `label` and `value`. Label will be displayed in options, while value is the one that will be returned later.
### File --> `return FileList`
- **type**: file
- **required**: true | false
- **disabled**: true | false
- **multiple**: true | false
- **accept**: string
> Specifies supported formats for the file upload field.
> example: `.png, .jpg`.
- **label**: string
> Label of the file upload field. It will be replaced when a file selected.
### Submit
The key you provided to the model will become text inside this submit button.
Expand Down Expand Up @@ -170,6 +182,13 @@ export default {
}
],
},
"Upload": {
"type": "file",
"required": true,
"multiple": true,
"accept": ".png,.jpg",
"label": "Choose an image file"
},
"Save": { // button submit
"type": "submit",
}
Expand Down
39 changes: 39 additions & 0 deletions dist/json-reactform.cjs.dev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,14 @@ var index = (function (_ref2) {
setState(_extends({}, state, {}, changedObject));
};

var onChangeFile = function onChangeFile(key, _ref3, model) {
var files = _ref3.target.files;
var changedObject = {};
var selectedFiles = !model.multiple ? files[0] : files;
changedObject[key] = selectedFiles;
setState(_extends({}, state, {}, changedObject));
};

Object.keys(model).forEach(function (key) {
if (model[key].type === 'date') {
formItems.push(React.createElement(reactstrap.FormGroup, {
Expand Down Expand Up @@ -321,6 +329,37 @@ var index = (function (_ref2) {
placeholder: model[key].placeholder,
autoComplete: "off"
}))));
} else if (model[key].type === 'file') {
var label = !model[key].multiple && state[key] ? state[key].name : model[key].label;

if (model[key].multiple && state[key]) {
label = Array.from(state[key]).map(function (file) {
return file.name;
}).join(', ');
}

formItems.push(React.createElement(reactstrap.FormGroup, {
key: key,
row: true,
className: "mb-4"
}, React.createElement(reactstrap.Label, {
"for": key,
sm: 4
}, key, " ", model[key].required ? '*' : null), React.createElement(reactstrap.Col, {
sm: 8,
className: "d-flex flex-column"
}, React.createElement(reactstrap.CustomInput, {
type: "file",
id: key,
name: key,
label: label,
onChange: function onChange(e) {
return onChangeFile(key, e, model[key]);
},
required: model[key].required,
multiple: model[key].multiple,
accept: model[key].accept
}))));
} else if (model[key].type === 'submit') {
formItems.push(React.createElement(reactstrap.Row, {
key: key,
Expand Down
43 changes: 36 additions & 7 deletions dist/json-reactform.cjs.prod.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,7 @@ var index = function(_ref2) {
currencyObject[name] = numberToCurrency(value), setCurrency(_extends({}, currency, {}, currencyObject));
};
return Object.keys(model).forEach((function(key) {
var SelectComponent;
"date" === model[key].type ? formItems.push(React.createElement(reactstrap.FormGroup, {
if ("date" === model[key].type) formItems.push(React.createElement(reactstrap.FormGroup, {
key: key,
row: !0,
className: "mb-4"
Expand All @@ -110,7 +109,7 @@ var index = function(_ref2) {
disabled: model[key].disabled,
placeholderText: model[key].placeholder,
required: model[key].required
})))) : "select" === model[key].type ? formItems.push(React.createElement(reactstrap.FormGroup, {
})))); else if ("select" === model[key].type) formItems.push(React.createElement(reactstrap.FormGroup, {
key: key,
row: !0,
className: "mb-4"
Expand Down Expand Up @@ -153,7 +152,7 @@ var index = function(_ref2) {
onChange: function(e) {
return e.preventDefault();
}
})) : React.createElement(reactstrap.Spinner, null))))) : "checkbox" === model[key].type ? formItems.push(React.createElement(reactstrap.FormGroup, {
})) : React.createElement(reactstrap.Spinner, null))))); else if ("checkbox" === model[key].type) formItems.push(React.createElement(reactstrap.FormGroup, {
key: key,
row: !0,
className: "mb-4"
Expand Down Expand Up @@ -183,7 +182,7 @@ var index = function(_ref2) {
}(key, e.target.value);
}
});
}))))) : "radio" === model[key].type ? formItems.push(React.createElement(reactstrap.FormGroup, {
}))))); else if ("radio" === model[key].type) formItems.push(React.createElement(reactstrap.FormGroup, {
key: key,
row: !0,
className: "mb-4"
Expand All @@ -206,7 +205,7 @@ var index = function(_ref2) {
disabled: model[key].disabled,
onChange: onChangeState
});
}))))) : "currency" === model[key].type ? formItems.push(React.createElement(reactstrap.FormGroup, {
}))))); else if ("currency" === model[key].type) formItems.push(React.createElement(reactstrap.FormGroup, {
key: key,
row: !0,
className: "mb-4"
Expand All @@ -226,7 +225,36 @@ var index = function(_ref2) {
disabled: model[key].disabled,
placeholder: model[key].placeholder,
autoComplete: "off"
})))) : "submit" === model[key].type ? formItems.push(React.createElement(reactstrap.Row, {
})))); else if ("file" === model[key].type) {
var label = !model[key].multiple && state[key] ? state[key].name : model[key].label;
model[key].multiple && state[key] && (label = Array.from(state[key]).map((function(file) {
return file.name;
})).join(", ")), formItems.push(React.createElement(reactstrap.FormGroup, {
key: key,
row: !0,
className: "mb-4"
}, React.createElement(reactstrap.Label, {
for: key,
sm: 4
}, key, " ", model[key].required ? "*" : null), React.createElement(reactstrap.Col, {
sm: 8,
className: "d-flex flex-column"
}, React.createElement(reactstrap.CustomInput, {
type: "file",
id: key,
name: key,
label: label,
onChange: function(e) {
return function(key, _ref3, model) {
var files = _ref3.target.files, changedObject = {}, selectedFiles = model.multiple ? files : files[0];
changedObject[key] = selectedFiles, setState(_extends({}, state, {}, changedObject));
}(key, e, model[key]);
},
required: model[key].required,
multiple: model[key].multiple,
accept: model[key].accept
}))));
} else "submit" === model[key].type ? formItems.push(React.createElement(reactstrap.Row, {
key: key,
className: "mb-4"
}, React.createElement(reactstrap.Col, {
Expand Down Expand Up @@ -258,6 +286,7 @@ var index = function(_ref2) {
placeholder: model[key].placeholder,
autoComplete: model[key].autoComplete ? "" : "off"
}))));
var SelectComponent;
})), React.useEffect((function() {
if (onChange) {
var changedObject = [];
Expand Down
39 changes: 39 additions & 0 deletions dist/json-reactform.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,14 @@ var index = (function (_ref2) {
setState(_extends({}, state, {}, changedObject));
};

var onChangeFile = function onChangeFile(key, _ref3, model) {
var files = _ref3.target.files;
var changedObject = {};
var selectedFiles = !model.multiple ? files[0] : files;
changedObject[key] = selectedFiles;
setState(_extends({}, state, {}, changedObject));
};

Object.keys(model).forEach(function (key) {
if (model[key].type === 'date') {
formItems.push(React.createElement(FormGroup, {
Expand Down Expand Up @@ -315,6 +323,37 @@ var index = (function (_ref2) {
placeholder: model[key].placeholder,
autoComplete: "off"
}))));
} else if (model[key].type === 'file') {
var label = !model[key].multiple && state[key] ? state[key].name : model[key].label;

if (model[key].multiple && state[key]) {
label = Array.from(state[key]).map(function (file) {
return file.name;
}).join(', ');
}

formItems.push(React.createElement(FormGroup, {
key: key,
row: true,
className: "mb-4"
}, React.createElement(Label, {
"for": key,
sm: 4
}, key, " ", model[key].required ? '*' : null), React.createElement(Col, {
sm: 8,
className: "d-flex flex-column"
}, React.createElement(CustomInput, {
type: "file",
id: key,
name: key,
label: label,
onChange: function onChange(e) {
return onChangeFile(key, e, model[key]);
},
required: model[key].required,
multiple: model[key].multiple,
accept: model[key].accept
}))));
} else if (model[key].type === 'submit') {
formItems.push(React.createElement(Row, {
key: key,
Expand Down
38 changes: 38 additions & 0 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,16 @@ export default ({ model, onSubmit, onChange }) => {
});
};

const onChangeFile = (key, { target: { files } }, model) => {
const changedObject = {};
const selectedFiles = !model.multiple ? files[0] : files;
changedObject[key] = selectedFiles;
setState({
...state,
...changedObject,
});
};

Object.keys(model).forEach(key => {
if (model[key].type === 'date') {
formItems.push(
Expand Down Expand Up @@ -315,6 +325,34 @@ export default ({ model, onSubmit, onChange }) => {
</Col>
</FormGroup>
);
} else if (model[key].type === 'file') {
let label =
!model[key].multiple && state[key] ? state[key].name : model[key].label;
if (model[key].multiple && state[key]) {
label = Array.from(state[key])
.map(file => file.name)
.join(', ');
}
formItems.push(
<FormGroup key={key} row className="mb-4">
<Label for={key} sm={4}>
{key} {model[key].required ? '*' : null}
</Label>
<Col sm={8} className="d-flex flex-column">
<CustomInput
type="file"
id={key}
name={key}
label={label}
onChange={e => onChangeFile(key, e, model[key])}
required={model[key].required}
multiple={model[key].multiple}
accept={model[key].accept}
disabled={model[key].disabled}
/>
</Col>
</FormGroup>
);
} else if (model[key].type === 'submit') {
formItems.push(
<Row key={key} className="mb-4">
Expand Down

0 comments on commit 93a4228

Please sign in to comment.