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",
Related
Currently, in my project, I am using ant-design upload as follows.
<ImageUploaderWrapper
name="images"
rules={[
{
required: true,
},
]}
valuePropName="fileList"
getValueFromEvent={normFile}
initialValue={editPost && [...editPostImages]}
>
<Upload.Dragger
name="image"
multiple
listType="picture"
onChange={onChangeImages}
beforeUpload={onBeforeUpload}
onPreview={onImagePreview}
>
<ImageUploaderText className='bold'>
{editPost ? 'Drag edit files here or' : 'Drag files here OR'}
</ImageUploaderText>
<Button type='primary' size='large' icon={<UploadOutlined />}>Upload</Button>
</Upload.Dragger>
</ImageUploaderWrapper>
I am studying in Korea and often upload file names in Korean.
At this time, if you upload an image file in Korean, it is changed to special characters as follows.
// Upload file name
다운로드.jfif
// Uploaded file name
ë¤ì´ë¡ë_.jfif
I would appreciate it if you could let me know what method I should use to solve this problem.
The code is working fine in a browser, but when I build the native project in xcode, once I start dragging the item it just freezes, and showing an error:
**------ STARTUP JS ERROR ------**
**⚡️ TypeError: e.selectionStart is not a function. (In 'e.selectionStart()', 'e.selectionStart' is undefined)**
**⚡️ URL: capacitor://localhost/static/js/5726.e89fffc0.chunk.js**
**⚡️ 5726.e89fffc0.chunk.js:1:1937**
**⚡️ See above for help with debugging blank-screen issues**
I looked for the file but I really couldn’t figure out what to do to fix this. I googled selectionStart but nothing is related to IonReorder.
And here is my code:
<IonReorderGroup disabled={false}
onIonItemReorder={(event) =>{
console.log('dragged');
event.detail.complete();
}}
>
<IonItem lines='none'>
<IonText className='text-small'>Item 1</IonText>
<IonReorder slot='end'>
</IonReorder>
</IonItem>
<IonItem lines='none'>
<IonText className='text-small'>Item 2</IonText>
<IonReorder slot='end'>
</IonReorder>
</IonItem>
<IonItem lines='none'>
<IonText className='text-small'>Item 3</IonText>
<IonReorder slot='end'>
</IonReorder>
</IonItem>
</IonReorderGroup>
The code is working fine in a browser but not in iOS.
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!
migrating react-bootstrap-typeahead from 3.2.4 to ^5.1.2, facing option element alignment issues, when i use 3.2.4 the dropdown works fine, just as expected
but with v5.1.2 instead of normal way, it looks like this
wanted it to look like below
like
abc
123
def
i have tried using this, but it doesn't give the look as before
renderMenuItemChildren={option => (
<div key={option.id}>
<span>{option.text}</span>
</div>
)}
using the below of reference
"bootstrap": "^4.5.3",
"react-bootstrap": "^1.4.0",
"react-bootstrap-typeahead": "^5.1.2"
js
import { Typeahead } from 'react-bootstrap-typeahead'
import 'react-bootstrap-typeahead/css/Typeahead.css'
<Typeahead
id="id"
onChange={this.handleTypeChange}
options={options}
valueKey="id"
/>
<Form.Item
name="upload"
label="Upload"
valuePropName="fileList"
getValueFromEvent={normFile}
multiple="false"
>
<Upload accept=".csv" name="logo" multiple="false" action="/upload.do" listType="picture">
<Button icon={<UploadOutlined />}>Click to upload</Button>
</Upload>
</Form.Item>
I wan't to allow user to input only one file.
Also how to read that csv file after uploading and send to the backend (just the params)?
mutiple files are allowed as below
The solution to your first question is very simple. The Ant Design Upload component API (now?) contains maxCount, which limits/controls the number of uploaded files.
Set it to 1 and that will limit the amount of files uploaded to just 1. If a user picks up another file, it will replace the one selected before.
So, you should have something like this in the end:
<Form.Item
name="upload"
label="Upload"
valuePropName="fileList"
getValueFromEvent={normFile}
multiple="false">
<Upload
accept=".csv"
name="logo"
multiple="false"
action="/upload.do"
listType="picture"
maxCount={1} //this is what limits the number of files uploaded
>
<Button icon={<UploadOutlined />}>
Click to upload
</Button>
</Upload>
</Form.Item>
I handle this problem by Css, Check my list array length, if true define a className to the upload button which prevent to click.
const [list, setList] = useState(null);
<Dragger //its one of antd upload components
{...settings}
className={list?.length ? 'blocked' : undefined}
>
.blocked {
pointer-events: none;
opacity: 0.5;
}