i have upload button inside create form, on button click handler i will upload image to cloud and on upload success i get image url. i need to pass this image url to rest api. this is my sample code.
When i submit my form i need to send image url as parameter.
Can anyone help me.
Here is my code:
<SimpleForm label="Create Artist">
<TextInput source="name" label="Name" />
<FlatButton style={styles.button} label="Upload Image" primary onClick={this.handleClick} />
</SimpleForm>
this.handleClick = () => {
cloudinary.openUploadWidget({
cloud_name: 'demo',
upload_preset: 'sh3432',
cropping: 'server'
}, function(error, result) {
return result;
});
};
You'll have to implement a custom input for that.
Something like (haven't tested it):
class UploadPictureInput extends Component {
handleClick = () => {
cloudinary.openUploadWidget({
cloud_name: 'demo',
upload_preset: 'sh3432',
cropping: 'server'
}, (error, result) => {
this.props.input.onChange(result);
});
}
render() {
return (
<FlatButton
style={styles.button}
label="Upload Image"
primary
onClick={this.handleClick}
/>
);
}
}
And use this input in your form.
Related
I currently have the following setup an onboarding stack component:
export default function OnboardingStack(props) {
const { auth, activeUser } = useContext(FirebaseContext);
return (
<Stack.Navigator mode="card" headerMode="none">
<Stack.Screen
name="Login"
component={Login}
option={{
headerTransparent: true
}}
/>
<Stack.Screen name="App" component={AppStack} />
</Stack.Navigator>
);
}
Then I can call a component called MemberList which contains a touchable opacity:
<TouchableOpacity style={styles.touchableRow} onPress={ () => navigateMember(item) }>
the method navigateMember I navigate to "Add Member"
const navigateMember = (item) => {
navigation.navigate("Add Member", {
screen: "Member",
params: {
uid: item,
}
}
);
}
Here item is different each time I click it but when I get into the "Member" screen it retains the first original passed uid. Member component contains:
useEffect(() => {
navigation.addListener('focus', () => {
// console.log(navigation);
console.log('this member route');
console.log(route);
})
navigation.addListener('blur', () => {
console.log('leaving blur');
navigation.setParams({
key: route.key,
params: { uid: 'og' },
})
})
}, [])
Each time the uid remains the same. I've tried to reset it when it blurs but it always retains the same params. Any idea what I'm doing wrong?
The solution was to use push as opposed to navigate.
onPress={() => navigation.push('Member')}
More details found in the documentation
I'm trying to upload images from a Vue frontend via Illuminate/Http/Request to WinterCMS.
Vue finds the file and i can console.log the File object, but I'm unsure how to get this over the api. for example I've tried
public function saveImage(Request $req){
$images = $req->files('images');
}
which doesn't work, nor does
public function saveImage(Request $req){
$images = $req['images'];
}
I'm using a controller to handle my routes eg:
Route::post('/saveImage', 'Author\Project\Controllers\ProductControl#saveImage');
I've added an attachOne relation to the plugin as usual and my form has enctype="multipart/form-data"
I've had this problem before and got around it by converting images to base64 but this project will have quite a few images and I don't want to go down that route again.
Any suggestions greatly appreciated
You can send images as regular post and use regular $request->file('images') method in your Laravel controller.
You can use Javascript FormData object. For example;
<div>
<input type="file" #change="handleImages" multiple>
<button #click="uploadImages">Upload!</button>
</div>
data: () => ({
images: []
}),
methods: {
handleImages (event) {
this.images = event.target.files
},
uploadImages () {
const formData = new FormData();
for (const i of Object.keys(this.images)) {
formData.append('images', this.images[i])
}
axios.post('/saveImage', formData, {
}).then((res) => {
console.log(res)
})
}
}
I want to test the response in the console log. I am using the google inspect tool. I can't see any response in Network>>XHR. But I have seen that "Form submission canceled because the form is not connected" in console. The sample screen inspect tool screen I can't trace the problem actually where. I am following a course video about laravel and vue. Thanks in advance for your time.
Form
<form v-if="editing" #submit.prevent="update">
<div class="form-group">
<textarea rows="10" v-model="body" class="form-control"></textarea>
</div>
<button #click="editing = false">Update</button>
<button #click="editing = false">Cancel</button>
</form>
in Controller
if ($request->expectsJson()) {
return response()->json([
'message' => 'Answer updated!',
'body_html'
]);
}
Vue.JS
<script>
export default {
props: ['answer'],
data () {
return {
editing: false,
body: this.answer.body,
bodyHtml: this.answer.body_html,
id: this.answer.id,
questionId: this.answer.question_id
}
},
methods: {
update () {
axios.patch(`/questions/${this.questionId}/answers/${this.id}`, {
body: this.body
})
.then(res => {
console.log(res);
this.editing = false;
})
.catch(err => {
console.log("something went wrong");
});
}
}
}
</script>
The form is by default hidden. It appears only when clicking on the Edit button. The only problem is to submit the form. ErrorMessage: Form submission canceled because the form is not connected
You have v-if="editing" in your form set to false. It should be true, because form has to exist on submit. You are removing your form from DOM. Also move this.editing to finally() block in axios call.
I am following these 2 samples:
Webchat with react
Programmatic post activity
My bot is working ok. I can send and process activities via directline. My test helpButton logs ok, but there is no actual 'help' message sent when I click the button like in the sample.
var mainBotConnection;
const { createStore, ReactWebChat } = window.WebChat;
const { createProvider } = window.ReactRedux;
const Provider = createProvider('webchat');
const Store = createStore();
// get a token
const RequestToken = async (user) => {
...
};
(async function () {
RequestToken(agent)
.then(token => {
//init main chat bot
mainBotConnection = window.WebChat.createDirectLine({token: token});
...
//grab mainbot placeholder and put it on screen
window.ReactDOM.render(
<Provider store={Store}>
<ReactWebChat
directLine={mainBotConnection}
storeKey='webchat'
userID={user.id}
username={user.name}
styleOptions={mainBotStyleOptions}
/>
</Provider>,
document.getElementById('webchat'));
// this message does not appear
Store.dispatch({
type: 'WEB_CHAT/SEND_MESSAGE',
payload: { text: 'StartUp hello!' }
});
});
// test button
document.querySelector('#helpButton').addEventListener('click', () => {
// this is successfully logged
console.log(`help button clicked`);
// 'help' text does not appear in bot
Store.dispatch({
type: 'WEB_CHAT/SEND_MESSAGE',
payload: { text: 'help' }
});
// this is also successfully logged
console.log(Store);
});
document.querySelector('#webchat').focus();
})().catch(err => console.error(err));
You need to add store={Store} to your ReactWebChat component:
[...]
<Provider store={Store}>
<ReactWebChat
directLine={mainBotConnection}
storeKey='webchat'
userID={user.id}
username={user.name}
styleOptions={mainBotStyleOptions}
store={Store} // ADD THIS PART
/>
</Provider>,
[...]
That being said, without the rest of your code, I wasn't able to test this exactly. Instead, I started up the React with Redux Sample. If I removed store={Store}, it didn't work, but if I left it in there, it worked just fine and sent both the welcome and help messages. You may also need: <Provider store={ store } key='webchat'>, but like I said, I wasn't able to test your exact code.
I have written code, which uses a Modal dialog to display a form.
My react app is rendered at "root"
index.html
<div id="root"></div>
App.js
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<ExampleBasic/>
</Provider>
, document.getElementById('root'));
ExmpleBasic.js
Please ignore state management in component here. this is just for example.
import React, { PureComponent } from 'react';
import Lorem from 'react-lorem-component';
import Modal from '#atlaskit/modal-dialog';
import Button from '#atlaskit/button';
export default class ExampleBasic extends PureComponent {
state = { isOpen: false }
open = () => this.setState({ isOpen: true })
close = () => this.setState({ isOpen: false })
secondaryAction = ({ target }) => console.log(target.innerText)
render() {
const { isOpen } = this.state;
const actions = [
{ text: 'Close', onClick: this.close },
{ text: 'Secondary Action', onClick: this.secondaryAction },
];
return (
<div>
<Button onClick={this.open}>Open Modal</Button>
{isOpen && (
<Modal
actions={actions}
onClose={this.close}
heading="Modal Title"
>
<BasicFormContainer />
</Modal>
)}
</div>
);
}
}
BasicFormContainer.js
const mapStateToProps = state => ({
addDesignation: state.designations.addDesignation,
});
const mapDispatchToProps = dispatch => ({
});
export default connect(mapStateToProps, mapDispatchToProps)(BasicForm);
BasicForm.js
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
class BasicForm extends Component {
constructor(props) {
super(props);
this.submit = this.submit.bind(this);
}
submit(values) {
console.log(values);
}
render() {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.submit)}>
<Field
name="designationName"
component="input"
placeholder="Name"
label="Enter name"
autoFocus
/>
</form>
);
}
}
export default reduxForm({
form: 'BasicForm',
enableReinitialize: true,
})(BasicForm);
However modal is rendered using portal, outside current DOM.
As modal is rendered outside the scope of redux context, it is not getting the
store. and i am getting an error "Uncaught Error: Field must be inside a component decorated with reduxForm()"
Below is link to same kind of problem, where redux form within portal is not working.
Redux Form Wrapped Inside Custom Portal Component?
in React 16 it is handled by portals, but version before then that you can try something like as follow.
export default class ExampleBasic extends PureComponent {
...
static contextTypes = { store: React.PropTypes.object };
render() {
const { isOpen } = this.state;
const actions = [
{ text: 'Close', onClick: this.close },
{ text: 'Secondary Action', onClick: this.secondaryAction },
];
return (
<div>
<Button onClick={this.open}>Open Modal</Button>
{isOpen && (
<Modal
actions={actions}
onClose={this.close}
heading="Modal Title"
>
<Provider store={this.context.store}>
<BasicFormContainer />
</Provider>
</Modal>
)}
</div>
);
}
}
You need to pass in the values of BasicForm.js to the Redux store and dispatch an action from there itself and not from the BasicFormContainer.js. This way, the Modal remains inside of the scope of your root element and thus there is no need to access the store outside of the Provider.
Then update the Redux store based on the values entered in the form. Once, the store is updated, you can then access it from anywhere in your application such as Modal in your case.
I downgraded to version 2.1.0 to solve the problem.