I have a profile page and an event page. I want to upload a profile pic on the profile page and an event flyer on the event page.
This is how my profile page looks like:
const openFileDialog = () => {
(document).getElementById("file-upload").click();
}
const setImage=(_event: document) => {
let f = _event.target.files[0];
const data = new FormData();
const reader = new FileReader();
reader.readAsDataURL(f)
reader.onloadend = () => {
data.append('file', f)
try {
fetch(`https://redacted.com/upload_test/${identity}/`, {
method: "POST",
headers: {
"x-access-token": jwtoken
},
body: data,
})
.then(response => response.json())
.then(data => {
setProfile_Pic(data)
});
} catch (error) {
console.error(error)
}
}
}
<IonAvatar className={ styles.avatar } onClick={openFileDialog}>
<input type="file"
id="file-upload"
accept="image/*"
style={{display: "none"}}
onChange={setImage}
/>
<IonImg onclick={() => console.log('Profile page')} src={profile}/>
</IonAvatar>
<div className={ styles.avatarUpload }>
<IonIcon icon={ cameraOutline } />
When I made that, it works perfectly. Then I wanted to have an event flyer image for an event page.
Similarly, here is what my event page looks like
const openFileBox = () => {
(document).getElementById("file-upload").click();
}
const setFlyer=(_event: document) => {
let f = _event.target.files[0];
const data = new FormData();
const reader = new FileReader();
reader.readAsDataURL(f)
reader.onloadend = () => {
data.append('file', f)
try {
fetch(`https://redacted.com/upload_flyer/${micnum}/`, {
method: "POST",
headers: {
"x-access-token": jwtoken
},
body: data,
})
.then(response => response.json())
.then(data => {
setMicFlyer(data)
});
} catch (error) {
console.error(error)
}
}
}
<IonAvatar className={ styles.avatar } onClick={openFileBox}>
<input type="file"
id="file-upload"
accept="image/*"
style={{display: "none"}}
onChange={setFlyer}
/>
<IonImg onclick={() => console.log('Event profile')} src={profile}/>
</IonAvatar>
<div className={ styles.avatarUpload }>
<IonIcon icon={ cameraOutline } />
When I go into the event page and try to upload an image, for some reason I see it using the fetch to the url from the first page: fetch('https://redacted.com/upload_test/${identity}/'
Why does this happen and how do I have it use the code from the event page like I would expect?