I am trying to receive the files uploaded in the ant design upload component using the onCHange event but I keep encountering an error
"Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'files')".
The code:
<Form.Item>
<Form.Item name="dragger" valuePropName="fileList" noStyle>
<Upload.Dragger // onChange={(e)=> handleInputChange("file", e.target.files[0])}
beforeUpload={() => false}
name="files"
accept=".apng,.avif,.gif,.jpg,.jpeg,.jfif,.pjpeg,.pjp,.png,.svg,.webp"
action=""
>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="text-dark">Click or drag file to this area to upload</p>
<p className="text-muted">Support for PNG, JPG, GIF up to 10MB.</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
I intend to manipulate the file in a function. I don't want to use the ant design upload component's upload functionality. I only wanted the drag and drop UI.
The solution:
ant-design doesn't return the usual event object but it's own object. The object has another object called file which would have suited my code.
Therefore, I should have used: e.file instead of e.target.files[0]
That solves the error!
Related
Using ref I am getting only one image uploaded in an input, but I want different images in all input fields.
enter image description here
`<ReactQuill
ref={quillObj}
modules={modules}
value={instructions}
onChange={(e) => setInstructions(e)}
/>
<ReactQuill
ref={quillObj}
modules={modules}
value={quizQuestions.question}
onChange={(e) => quizhandler("question", e, index)}
/>;`
If not using ref then what can be the alternative .
I am creating a form where I need to attach a file. I am using the IonInput component:
<IonList>
<IonItem>
<IonLabel position="stacked">Select application cover photo</IonLabel>
<IonInput
accept="image/*"
type="file"
value={application.cover}
placeholder="Select application cover photo"
name="cover"
onIonChange={e => setApplication({
...application,
cover: e.target.files[0]
})}
/>
</IonItem>
</IonList>
The selected file is correctly displaying inside of the IonInput but when I try to set it to the application state, I get the following error:
e.target.files is undefined
I have tried to log out the target and as I suspected, the files property is not in there. I couldn't find any property where the files are stored.
I tried running the same code but with regular input instead of IonInput and it works as expected.
Here are the versions I am using:
"#ionic/react": "^6.0.0",
"#ionic/react-router": "^6.0.0",
I believe the title is self-explanatory. I have checked the docs and some other threads, but I simply cannot manage to change both texts of the label: nor "Choose file", neither "No file chosen". Below is what I have tried so far. How could I change those texts?
{/* <label htmlFor="test" id="files">Test with classic label</label> */}
<Input
// addonAfter="test1"
// addonBefore="test2"
type="file"
onChange={handleFileSelected}
text="test"
/>
The text of the input's file element is controlled by the browser so you can not directly change that. What you can do is instead creating a customizable button that uses a ref to control the click on the input:
const ref = useRef<HTMLInputElement>(null);
<button onClick={() => ref.current?.click()}>Click Here</button>
<input
type='file'
ref={ref}
onChange={handleFileSelected}
style={{ display: "none" }} />
Ant Design also has Upload component for file uploading which could be styled easily
I'm trying to create a form inside modal using react class component and antd, but i couldn't find a way to get the data submited in the form. i tried to console the event of the onOk in antd modal but i same no data.
i also found an example but it was with function component and hooks Form.useForm()
here is the simple if anyone can help : Simple
any hint will be helpful thanks.
The solution is to hide the footer of the modal and add submit for the form exemple :
<Modal
title={this.props.formTitle}
visible={this.state.modalVisible}
confirmLoading={this.state.confirmLoading}
onCancel={this.handleCancel}
footer={[]}//this to hide the default inputs of the modal
>
<Form
layout="vertical"
name="form_in_modal"
initialValues={{
modifier: 'public',
}}
onFinish={this.handleOk}>
<Form.Item
name="title"
label="Title"
rules={[
{
required: true,
message: 'Please input the title of collection!',
},
]}>
<Input />
</Form.Item>
<Form.Item name="description" label="Description">
<Input type="textarea" />
</Form.Item>
<Form.Item name="modifier" className="collection-create-form_last-form-item">
<Radio.Group>
<Radio value="public">Public</Radio>
<Radio value="private">Private</Radio>
</Radio.Group>
//this is the submit of the form
<Button key="submit" type="primary" loading={this.state.confirmLoading} htmlType="submit">
submit
</Button>
</Form.Item>
</Form>
</Modal>
I tried this out myself with limited TS(JS) knowledge using Antd & React framework.
The steps are as follow.
construct an object e.g:
let obj1 = {
variableA : "",
variableB : ""
}
In your form body get the value using
<Form.Item ... onChange={(event)=>obj1.variableA=event.target.value}/>
In this case, the event keyword will return the final input value to instances (e.g variableA) within obj1 with given input from different form, which you can operate on after the form submission finish in a quasi-java style.
You can test it by creating alert(obj1.variableA) or console.log function to see if that's the desired value, in my case it works well with string and numeric input.
As I am not doing front end, so I might make mistakes and do feel free to point it out.
How can I serialize a form whose data structute is different to it's name.
For example, I have following form, which is getting numberofItems from inventory object and displaying in a TextArea.
<Form
enableReinitialize={true}
initialValues={{
numberofItems: inventories.numberofItems
}}
onSubmit={handleSubmit}
>
<FormItem
name={'numberofItems'}
label={'Current Stock'}
maxLength={32000}
>
{inputProps => <TextArea {...inputProps} />}
</FormItem>
</Form>
This works fine when rendering the form. But when I try to post the form, the expected property is null. Because, the service expects inventories.numberofItems where as I am sending numberofItems , as per it's name.
I can avoid this by doing passing the object to form and extracting each field to control.
<Form
enableReinitialize={true}
initialValues={{
inventories: inventories
}}
onSubmit={handleSubmit}
>
<FormItem
name={'inventories.numberofItems'}
label={'Current Stock'}
maxLength={32000}
>
{inputProps => <TextArea {...inputProps} />}
</FormItem>
</Form>
But is there a way I can serialize a control, with a different key from it's name.
In my case, I want to serialize the form with inventories.numberofItems while keeping the name of the control as numberofItems.
<FormItem
name={'numberofItems'}
label={'Current Stock'}
maxLength={32000}
>
{inputProps => <TextArea {...inputProps} />}
</FormItem>
What you can do in order to successfully submit the form (I don't know if it fits your needs though, this is what I do in similar cases in my code where I have JAX-RS backend which cannot map to unknown properties of object) is set the required property and delete the one that cannot be submitted.
function handleSubmit(myFormObject) {
myFormObject.inventories = {numberofItems: myFormObject.numberofItems}
delete myFormObject.numberofItems
.
.
.
}
redux-form supports such cases though. You can define a Field with property name being a "compound" one and it will properly map to your form object being submitted.
Check this sample codesandbox
<Field name="test.notes" component="textarea" />