I created file upload and preview using URL.createObjectURL in the react js. when I try to put another audio, it does not re-change the audio preview. but I try to change the image, it does work
import React, {useState } from 'react';
function FileUpload() {
const [source, SetSource] = useState('');
const handleChange = (event) => {
const file = event.target.files[0];
if(!file) return;
const url = URL.createObjectURL(file);
const fileType = file?.type.split('/')[0];
URL.revokeObjectURL(file); // free memory
SetSource({ fileType, fileUrl: url});
};
return (
<div>
<input type="file" onChange={handleChange}/>
{/* audio */}
{ source.fileType ==="audio" && (<audio controls>
<source src={source.fileUrl} type="audio/mpeg" />
</audio>)}
{/* image */}
{ source.fileType=== "image" && (<img src={source.fileUrl}/>)}
</div>
);
}
export default FileUpload;