I'm using antd for upload file, i'm trying to add capture="environment" like this code <input type="file" accept="image/*" capture="filesystem"> to my code. The code is for open camera only when they access in mobile. How can i implement it in antd Upload ? Here is my code
<Upload
name="avatar"
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
accept="image/x-png,image/jpeg"
>
Antd Upload looks like it would pass on the capture prop to rc-upload (https://github.com/ant-design/ant-design/blob/dc4d85583fe6b12c5a3d8b1a1c9de0589752fc3e/components/upload/Upload.tsx#L380), but rc-upload (which antd relies on here) only just recently added support for that. https://github.com/react-component/upload/pull/303
AntD will need to update dependency, but looks like they already have done that in master, So maybe wait a bit and update to latest antD, Otherwise fork the component and include the updated dependency in your own package.json.
<Upload
name="avatar"
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
accept="image/x-png,image/jpeg"
capture="environment"
>
Related
I am using FileBase64 react component for uploading files (images), but I have a problem. When I try to upload the same named image twice in a row the file uploader doesn't even trigger. I also tried to upload an image and then change the name of it and try again and then it worked. So I am guessing that the problem is with the file uploader which is not triggered when you try to upload the same NAMED file more times in a row. I have also the function addImageToBase which is just calling an endpoint to send images to the server. I tried to print something on the first line of that function so I can be sure that the problem is not with the function, and the function wasn't triggered at all, so it is a one hundred percent problem with the file uploader.
<FileBase64
type="file"
name='image'
id="file-upload"
multiple={false}
accept="image/*"
onDone={(e) => { setFieldValue("image", e); addImageToBase(e) }}
/>
I don't think that this code is important, but if it will help, here you go. Can anyone tell me how to fix this problem?
I am using Suneditor in reactjs. Now here i want to mention some user name from database while writing description.But i am not able to find any "mention" plugin using suneditor.Is there any way i can implement it using suneditor? Mentioned username will be marked as blue and underlined.Any reference link would be appereciated using suneditor.
<MentionsInput
className="comments-textarea"
placeholder=""
value={this.state.value}
onChange={this.handleChange}
onSelect={this.handleSelection}
onBlur={this.handleBlur}
markup={this.state.markup}
autoFocus
>
<Mention
className="comment-user"
type="user"
trigger="#"
data={this.state.totalUserList}
/>
</MentionsInput>
I have used react mention plugin previously.Can i use it in suneditor with fullfilling above requirement?
I'm trying to implement data-live-search in a react project and I'm using react-bootstrap.
Code goes here:
<Form.Control as="select" data-live-search="true" htmlSize="5" custom>
{activities.map(i=>{return <option>{i}</option>})}
</Form.Control>
Everything is working as expected but the search bar is not showing up.
After few searches, I got to know that data-live-search is not available in react-bootstrap.
But we can use react-bootstrap-typeahead instead, which works like charm for me.
I have a simple TextField component from Material UI in React (notice the "required")
<TextField
label="Last name"
name="lastName"
required
value={this.state.lastName}
onChange={this.handleChange}
/>
I love the functionality and appearance of the "required" property. It looks like this when it's activated:
Unfortunately, this property is only available on their TextField component and not the RadioGroup or Select components. If I can at least replicate the appearance (and maybe the fact that it scrolls the page to the location of the input), I can apply it to all of my inputs for a consistent UI.
Does anyone know where they are getting the appearance from? It looks like it may be from a different package. Any help in finding it would be appreciated.
If you are referring to the "Please fill out this field" it looks like this might be a browser specific feature rather than a Material feature... Have you checked other browsers to see if this behaviour is reproducible?
Actually is fairly easy to change the styles for the errors that the different browsers show whenever a form is validated. Here your friend is the Constraint API.
There is an invalid event that will be fired before a form is submitted that checks if the elements that have the required attribute satisfy or not its constrains .
What I normally do is to use the onInvalid event handler and pass a callback where you can get a lot of info about the validation.
For example in event.target.validationMessage you'll see the "Please fill out this field" or the event.target.validity.valid will tell you if the element is valid or not. Bear in mind that you have to preventDefault the event.
e.preventDefault();
setInvalid( e.target.validity.valid );
setMessage( e.target.validationMessage );
This is how I've styled the native HTML errors using the <SnackbarContent /> component from material-ui.
Also, just to mention that CSS has a couple of pseudo elements that will help you to style the input. :invalid and :valid but this has nothing to do with the message itself.
Because this styles inconsistency really bugged me a time ago I created a npm plugin that deals with this for you, pretty-form-error it works with React and at least Angular 1.x.x
This is actually a property of input from vanilla html. Textfield is composed of smaller components and Input is one of the components they use. The required property will trigger the dialog to appear.
<html>
<body>
<form>
Username: <input type="text" name="username" required>
<input type="submit">
</form>
</body>
</html>
This snippet will also produce the same message.
I have a weird issue that only occurs when I build my React App and maybe someone can help me to explain what is happening?
I created a form with custom components like this:
<Form>
<Input type="text" name="name" value="">Description</Input>
<Textarea name="name" value="">Message</Textarea>
<Submit>Send Request</Submit>
</Form>
When I run this setup on my localhost, each component have their real name returned when I call child.type.name (like Input, Textarea and Submit), but when I run the exact same structure on my build bundle it returns "t" for each one of them?
UglifyJS via Webpack is taking care of this for you.
If you want to use child.name to identify components, it is better to define displayName and use child.type.displayName
Add this to any React Component via:
static displayName = 'coolComponentName'