score:2
there's quite a bit going on your codesandbox example, but by stripping it down its bare bones, i was able to track down the issue...
safari doesn't seem to support input
elements that try to use the oninput
event listener -- the callback is never executed. instead, you can use the onchange
event listener.
for the example below, i faked an api call by setting a promise
with a timeout, but this not needed and is only for demonstration purposes. in addition, i like using objects over multiple individual states, especially when the state needs to be synchronous -- it also is cleaner, easier to read, and functions more like a class
based component.
demo: https://jd13t.csb.app/
source:
components/detailpage.js
import react, { useref, usestate } from "react";
import { circularprogress, icon, fab } from "@material-ui/core";
const initialstate = {
isloading: false,
imagename: "",
imagepreview: null,
imagesize: 0
};
const enterdetailpage = () => {
const [state, setstate] = usestate(initialstate);
const uploadinputel = useref(null);
const handleuploadchange = async ({ target: { files } }) => {
setstate(prevstate => ({ ...prevstate, isloading: true }));
const file = files[0];
await new promise(res => {
settimeout(() => {
res(
setstate(prevstate => ({
...prevstate,
imagename: file.name,
imagepreview: url.createobjecturl(file),
imagesize: file.size,
isloading: false
}))
);
}, 2000);
});
};
const resetupload = () => {
setstate(initialstate);
uploadinputel.current.value = null;
};
const uploadimage = async () => {
if (state.imagepreview)
setstate(prevstate => ({ ...prevstate, isloading: true }));
await new promise(res => {
settimeout(() => {
res(alert(json.stringify(state, null, 4)));
resetupload();
}, 2000);
});
};
const { imagepreview, imagename, imagesize, isloading } = state;
return (
<div style={{ padding: 20 }}>
<div style={{ textalign: "center" }}>
<div>
<input
accept="image/jpeg,image/gif,image/png"
classname="hidden"
id="button-file"
type="file"
ref={uploadinputel}
onchange={handleuploadchange}
/>
<label htmlfor="button-file">
<div>
{imagepreview ? (
<>
<img
src={imagepreview}
alt="avatar"
style={{ margin: "0 auto", maxheight: 150 }}
/>
<p style={{ margin: "10px 0" }}>
({imagename} - {(imagesize / 1024000).tofixed(2)}mb)
</p>
</>
) : (
<icon fontsize="large" color="primary" classname="cloud-icon">
cloud_upload
</icon>
)}
</div>
</label>
<fab
variant="extended"
size="large"
color="primary"
aria-label="add"
classname=""
type="button"
onclick={uploadimage}
>
{isloading ? (
<circularprogress style={{ color: "white" }} />
) : (
"submit"
)}
</fab>
{imagepreview && (
<fab
variant="extended"
size="large"
color="default"
aria-label="add"
classname=""
type="button"
onclick={resetupload}
>
cancel
</fab>
)}
</div>
</div>
</div>
);
};
export default enterdetailpage;
Source: stackoverflow.com
Related Query
- Reactjs app doesn't show image preview in safari
- When I add an image to my app it doesnt show up
- reactjs image doesn't show up
- Image doesn't show up in reactjs when using background: url()
- ReactJS - Importing component doesnt show up in DOM
- Rotating image preview with ReactJS
- Show image with path from an API in ReactJs
- react app doesn't read correct path for assets folder - local images don't show up on localhost, only shows an image icon
- ReactJS - Show a preloader before the image is loaded
- My reactjs app didn't open in incognito tab or new browsers and show this errors
- How can I make an image preview show up on a react project?
- I'm unable to show notifcation in reactjs app I'm using react-redux-notify
- ReactJS images not showing in azure app service, but do show locally
- How to load image from blob and show Image preview
- I can't show the results of search in my movies library app doing by reactjs
- ReactJS app can't load background image
- React app doesnt work in safari browser? SyntaxError
- I want to show all image preview but whenever I upload a new one the old one is gone
- How to show first letters of the firstname and lastname of the user in the list instead of image through json data using reactjs
- show image using reactjs in laravel
- Can't show image in my ReactJs application
- ReactJS / Firebase : Show progress icon when .put image
- Image doesn't show up with props in ReactJS
- Image slider app in Reactjs using two child components
- How to show a loading indicator in React Redux app while fetching the data?
- How to make React app preview on mobile?
- Get image preview before uploading in React
- Display an image from url in ReactJS
- How to display a image selected from input type = file in reactJS
- Show a component on hover in reactjs
More Query from same tag
- 3DS2 BrowserInfo data with React Native and Expo
- How to resize the select component in grommet react js?
- Esri maps with React and Typescript
- Custom Input Field on datepicker
- How do I share a global variable between multiple files?
- Dispatching action on Redux during asynchronus API request using redux thunk
- How to have a try catch wait for response before continuing?
- How to control functions in certain media queries in React using hooks
- React hook form - do not revalidate on submit
- express-session unable to retrieve session variable
- React + Redux: proper way to handle after-dispatch logic
- How to hot-reload ReactJS build with gulp and browserify?
- setState vs replaceState in React.js
- Send IP address from frontend using ReactJS to server NodeJS
- Unable to open downloaded file embedded file link in a webpage because file format or extension is not valid
- JSX mapping element within mapping element, Adjacent JSX elements must be wrapping in enclosing tags
- Cancel only current axios request in React application
- React Matrial Multiselect defaultValue are not selected
- The Graph component in react-graph-vis doesn't reload when the state changes
- State with Local storage doesn't work on saving theme
- Use hook in onClick
- Unable to run React Native Project on simulator after updating to Xcode 12
- react-router-dom: getting props.location from within <BrowserRouter> component
- Bulk Insert in Amplify Datastore
- How to pass prop to Material-UI component using styled-components
- Update only a specific item on button click
- Show only every 4th item from api data in ReactJs
- how to run my node application and react app in the same time with one command?
- Unable to test default values via mount
- Todo React JS App 1