Develop Reference

how to handle file input from an HTML form using py-script?

I am using pyscript implement Python3 code into HTML files. I am currently trying to have a user submit a form and then I will run an algorithm on the data that is inside the form, ideally a .txt file.
Here is my table
<div class="container border big" style="display: block" id="formDiv">
<iframe name="k" style="display: none"></iframe>
<form target="k">
<label for="numberOfTables">Number of Tables</label>
<input
type="number"
class="form-control"
id="numberOfTables"
aria-describedby="numberOfTables"
placeholder="Number of Tables as an integer"
/>
<label for="studentList">
List of Students with name, sex, group number (example file here)
</label>
<input
type="file"
class="form-control"
id="studentList"
aria-describedby="studentList"
placeholder="Student list as a .txt file"
/>
<br />
<div id="fileInput"></div>
<input
type="submit"
id="button"
class="btn btn-primary"
py-click="test()"
value="Display Tables"
/>
</form>
</div>
I am able to access "numberOfTables" once the form is submitted through the following code:
<py-script>
def test():
number = Element("numberOfTables").value
</py-script>
But how would I access the information in the file? If I try to just do Element(studentList).value, then i get the string C:\fakepath\filename.txt.

How to replace an avatar image from a form with an url input?

how can i change the avatar image of my page when i fill the form? i'm still new with js so i don't know a lot of stuff, i'm studying it
<div class="profile__avatar-overlay">
<img class="profile__avatar" src="my-img" alt="Аvatar">
<button type="submit" class="profile__edit-button"></button>
</div>
<form class="form" id="form-avatar">
<button type="button" class="popup__close"></button>
<p class="form__text">Edit Profile</p>
<label class="form__field">
<input type="url" placeholder="New image url" id='url-avatar' class="form__input" value="" required>
<span id="url-avatar-error" class="form__input-error"></span>
</label>
<button type="submit" class="form__submit">Save</button>
</form>
I was trying this function but nothing happen in the page. I tried
function changeAvatar() {
const inputAvatarValue = formAvatarInput.value;
profileAvatar.src = inputAvatarValue;
return changeAvatar;
};
formUpdateAvatar.addEventListener('submit', changeAvatar);

How to close only current popup in Javascript and Jquery?

I have a form as a popup and I want to add a cancel button to close current popup. I tried many ways to do it but it is not closing
<form id="overlay_form_uploadGenFile" action="/crm/saveGeneralFile" method="POST" class="overlay_form" style="display:none" enctype="multipart/form-data">
<h1 style="font-size: 2em">Edit uploaded file</h1>
<input type="hidden" name="fileId" value="0"/>
<input type="hidden" name="userId" value="{{userId}}"/>
<span>Category:</span><span id="file-filter-by">Filter by:</span> <select name="fileCategoryTagId" onchange="populatePopupCategories(this);"></select>
<div id="file-category-select"><select name="fileCategoryId" onchange="getShareWithIntegrationServicesForPopup(this.options[this.selectedIndex].value);"></select></div><br/>
Current File: <input type="text" name="filename" class="currentFile"/> (change it to rename the file)<br/><br/>
To replace <input type="file" name="fileData" class="replaceFile" /><br/><br/>
<input type="checkbox" name="editableByHR" class="editableHR"/> Editable by HR
<input type="checkbox" name="sharedWithEmployee" /> Shared With Employee <br/>
Notes <textarea name="notes" class="fileUpdateNotes"></textarea><br/><br/>
<br/>
<div class="integrationServicesContainerHolder">
</div>
<br/>
<div style="display: inline-block;width: 100%">
<div align="left" style="float: left">
<input type="submit" value="Save" align="left" class="submitFileUpdateButton"/>
<input type="button" value="Cancel" onclick="closeFunction" align="left" class="submitFileUpdateButton"/>
</div>
<div align="right" style="float: right">
<input type="submit" value="Delete" align="right" class="submitFileUpdateButton"/>
</div>
</div>
</form>
and the function side is
function closeFunction() {
$('#overlay_form_uploadGenFile').hide();
}
I have tried .dialog('hide') and .modal('hide') as well but still not working. If I try self.closeAll then it is closing all tab. How can I close only this form dialog popup ?
edit: ok I put $('#overlay_form_uploadGenFile').fadeOut(100); and problem is solved almost... I need immediate close because fadeOut is blocking me for calling other functions due to asynchronous calls.

My suggestion would be to use the break function. That will exit the current loop.

ngf-thumbnail not working in safari latest using Angular.js

I am using ng-file-upload to upload the images using Angular.js. I am displaying image after upload using ngf-thumbnail but it's not working in safari and win-7.Its sometimes throwing the below error.
'undefined' is not a function (evaluating 'FileAPI.readAsDataURL(file, listener)')
I am providing my code below:
<div>
<div ng-class="{'myError': billdata.upload_{{$index}}.$touched && billdata.upload_{{$index}}.$invalid }">
<input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}" ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-select="onFileSelect1($index);">
<input type="text" class="form-control" name="comment" id="comment" placeholder="Comment" ng-model="mul.comment">
<div style="clear:both;"></div>
</div>
</div>
<span class="input-group-btn" ng-show="mulImage.length>0">
<img ngf-thumbnail="mul.image" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="mul.image !=null"><img ng-src="upload/{{mul.filename}}" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="mul.filename!=''">
<input type="button" class="btn btn-success" name="plus" id="plus" value="+" ng-click="addNewImageRow(mulImage);" ng-show="$last"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-" ng-show="mulImage.length>1" ng-click="deleteNewImageRow(mulImage,$index);">
</span>
It's working in all other browser but not working in this environment.

How to display image when image will get selected using Angular.js

I need one help.I want to display image inside image tag when image will be selected.I am explaining my code below.
<div class="col-md-6 bannerimagefile" ng-controller="imgController">
<form name="form">
<label for="bannerimage" accesskey="B"><span class="required">*</span> Banner Image</label>
<input type="file" class="filestyle" data-size="lg" name="bannerimage" id="bannerimage" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}">
<label for="bannerimage" accesskey="B" ><span class="required">*</span> View Image</label>
<div style="padding-bottom:10px;">
<img ng-src="{{attachImage}}" border="0" name="bannerimage" style="width:70px; height:70px;">
</div>
<div><input type="button" id="btn" ng-click="submitImage();" value="Upload" /></div>
<div class="clear"></div>
</form>
</div>
My controller file is given below.
var app=angular.module('testImage',['ngFileUpload']);
app.controller('imgController',function($scope,$http){
$scope.submitImage=function(){
console.log('image',$scope.file);
}
});
Here my requirement is when user will select the image it will display inside the image tag which is given in my code using Angular.js.Please help me.