so I have created a form that previews the image before uploading, below is how I created it
<div class="w-full mt-1 ml-2">
<div class="w-full flex left_flex gap-3">
<div class="overflow-hidden w-10 h-10 shrink-0 rounded-full center_flex bg-gray-100 shadow-sm ring-1 ring-slate-200">
<span class="material-symbols-outlined text-slate-300" id="dummy_img">account_circle</span>
<img src="" alt="" class="w-full h-full object-cover hidden" id="display_photo">
</div>
<button type="button" id="choose_photo" class="p-1 shrink-0 hover:bg-green2 hover:text-blue-text rounded ring-1 text-sm ring-slate-300 hover:ring-green2">Choose photo</button>
<span class="text-sm max-w-[20rem] Oneline" id="display_filename"></span>
</div>
<input type="file" accept="image/*" name="user__photo" id="user__photo" class="hidden" onchange="user__photo(event)">
</div>
and my user__photo function is:
const user__photo = (event) => {
document.getElementById('dummy_img').classList.add('hidden');
var display = document.getElementById('display_photo');
display.classList.remove('hidden')
display.src = URL.createObjectURL(event.target.files[0]);
display.onload = function() {
URL.revokeObjectURL(display.src)
}
}
but the console says user__photo is not a function...
can anyone tell me why?
Change const user__photo = (event) => { to function user__photo (event) {
It's working here: https://jsbin.com/mamodafibe/2/edit
function user__photo (event) {
console.log('file changed')
console.log(event)
}<div class="w-full mt-1 ml-2">
<div class="w-full flex left_flex gap-3">
<div class="overflow-hidden w-10 h-10 shrink-0 rounded-full center_flex bg-gray-100 shadow-sm ring-1 ring-slate-200">
<span class="material-symbols-outlined text-slate-300" id="dummy_img">account_circle</span>
<img src="" alt="" class="w-full h-full object-cover hidden" id="display_photo">
</div>
<button type="button" id="choose_photo" class="p-1 shrink-0 hover:bg-green2 hover:text-blue-text rounded ring-1 text-sm ring-slate-300 hover:ring-green2">Choose photo</button>
<span class="text-sm max-w-[20rem] Oneline" id="display_filename"></span>
</div>
<input type="file" accept="image/*" name="user__photo" id="user__photo" class="hidden" onchange="user__photo(event)">
</div>const user__photo = (event) => {
alert('file changed')
}<div class="w-full mt-1 ml-2">
<div class="w-full flex left_flex gap-3">
<div class="overflow-hidden w-10 h-10 shrink-0 rounded-full center_flex bg-gray-100 shadow-sm ring-1 ring-slate-200">
<span class="material-symbols-outlined text-slate-300" id="dummy_img">account_circle</span>
<img src="" alt="" class="w-full h-full object-cover hidden" id="display_photo">
</div>
<button type="button" id="choose_photo" class="p-1 shrink-0 hover:bg-green2 hover:text-blue-text rounded ring-1 text-sm ring-slate-300 hover:ring-green2">Choose photo</button>
<span class="text-sm max-w-[20rem] Oneline" id="display_filename"></span>
</div>
<input type="file" accept="image/*" name="user__photo" id="user__photo" class="hidden" onchange="user__photo(event)">
</div>