|
I have this upload files button in my app. So far my progress bar works fine but it just shows the loading bar while the file is uploading. So how do I add features to show the status of the upload % completed, also display the upload speed and the real time counter ETA to complete upload? Can it be achieved from front-end alone?
Here's my file-upload.component.html
<pre><input *ngIf="uploader.queue.length < 3" #uploadButton ng2FileSelect (change)="fileUpload()" [uploader]="uploader" id="supporting-doc-type-{{docType}}"
type="file"
class="upload-button"/>
<label for="supporting-doc-type-{{docType}}" class="fake-upload-button">
{{'account.uploadNric.uploadDoc'| translate}}
</label>
<ng-container *ngIf="uploader != undefined && uploader.queue.length">
<div class="row" *ngFor="let item of uploader.queue">
<div class="col-8 text-left">
<ng-container *ngIf="item.isSuccess; else elseBlock1">
<a [attr.href]="getFileDownloadUrlByName(item.file.name)" target="_blank">{{item.file.name}}</a>
</ng-container>
<ng-template #elseBlock1>
{{item.file.name}}
</ng-template>
</div>
<div class="col-2">
<ng-container *ngIf="item.isSuccess; else elseBlock2">
{{getSimplifiedSize(item.file.size)}}
</ng-container>
<ng-template #elseBlock2>
<mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
</ng-template>
</div>
<div class="col-2 text-right">
class="fa fa-trash trash-can-icon">
</div>
</div>
</ng-container>
<div *ngIf="documentFormatInvalid" class="alert alert-danger roboto-condensed-font">
{{'account.uploadNric.uploadFormatInvalid'| translate}}
</div>
<div *ngIf="documentExists" class="alert alert-danger roboto-condensed-font">
{{'account.uploadNric.uploadDocExists'| translate}}
</div>
<div *ngIf="documentGenericError" class="alert alert-danger roboto-condensed-font">
{{'account.uploadNric.uploadError'| translate}}
</div>
<div *ngIf="isExceedDocumentSize" class="alert alert-danger roboto-condensed-font">
{{'account.uploadNric.uploadSizeInvalid'| translate}}
</div>
My upload-file.component.ts
@Component({
selector: 'file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.scss']
})
export class FileUploadComponent {
docType = 'NRIC_FIN_DOCUMENT';
uploader: FileUploader;
fileIdentifier = new Map<string, string>();
@Input()
orderId: string;
@Input()
accountForm: FormGroup;
documentFormatInvalid = false;
documentExists = false;
documentGenericError = false;
isExceedDocumentSize = false;
@ViewChild('uploadButton') uploadButton: ElementRef;
constructor(private uploaderService: UploaderService, private utilService: UtilService,
private novusService: NovusService, private authService: AuthService) {
}
ngOnInit() {
this.utilService.observeData().subscribe(message => {
this.initiateUploader();
}
);
}
fileUpload() {
this.resetErrors();
const fileItem = this.uploader.queue[this.uploader.queue.length - 1];
fileItem.file.name = this.utilService.appendTimeStamp(fileItem.file.name);
this.uploader.queue[this.uploader.queue.length - 1] = fileItem;
const format = fileItem.file.type;
if (!this.uploaderService.validFileSize(fileItem.file.size)) {
this.isExceedDocumentSize = true;
this.uploader.queue.pop();
this.updateForm();
return;
}
if (!this.uploaderService.validFileFormat(format)) {
this.documentFormatInvalid = true;
this.uploader.queue.pop();
this.updateForm();
return;
}
const name = fileItem.file.name;
const orderId = this.orderId;
this.uploader.onBuildItemForm = (fileItem: any, form: any) => {
form.append('name', name);
form.append('orderId', orderId);
form.append('token', this.novusService.getMetaToken());
};
this.uploadButton.nativeElement.value = '';
this.uploader.queue[this.uploader.queue.length - 1].upload();
}
getFileIdentifierByName(fileName: string): string {
return this.fileIdentifier.get(fileName);
}
getFileDownloadUrlByName(fileName: string): string {
return this.uploaderService.getDocumentDownloadUrl(this.getFileIdentifierByName(fileName));
}
getSimplifiedSize(size: string): string {
return this.uploaderService.fileSizeConvertor(parseInt(size));
}
deleteFile(fileIdentifier: string): void {
this.uploaderService.fileRemove(fileIdentifier).subscribe(res => {
});
}
removeFileFromUploader(fileName: string): void {
this.uploader.queue = this.uploader.queue.filter(function(el) {
return el.file.name != fileName;
});
this.updateForm();
}
resetErrors(): void {
this.isExceedDocumentSize = false;
this.documentFormatInvalid = false;
this.documentExists = false;
this.documentGenericError = false;
}
updateForm(): void {
const fileNames = this.uploader.queue.map(res => {
return res.file.name;
});
this.accountForm.controls.fileUpload.markAsTouched();
this.accountForm.controls.fileUpload.setValue(fileNames.join(';'));
}
initiateUploader(): void {
const uploadHeaders = [{
name: 'Accept', value: 'application/json, text/javascript, */*; q=0.01',
}, {
name: 'Authorization',
value: `Bearer ${this.authService.getToken()}`
}];
const options: FileUploaderOptions = {
url: `api/document/upload`,
itemAlias: 'data',
headers: uploadHeaders,
};
this.uploader = new FileUploader(options);
this.uploader.onSuccessItem = (item, response) => {
if (response) {
const resp = JSON.parse(response);
if (resp) {
this.fileIdentifier.set(item.file.name, resp.api_message);
} else if (resp.key === 'FILE_EXISTS') {
this.uploader.queue.pop();
this.documentExists = true;
} else {
this.uploader.queue.pop();
this.documentGenericError = true;
}
}
this.updateForm();
};
this.uploader.onAfterAddingFile = (file) => {
file.withCredentials = false;
};
}
}
And upload-file.component.css
.upload-button {
display: none;
}
.fake-upload-button {
border-radius: 4px;
color: #fff;
background-color: #29b6f6;
padding: 4px 20px;
cursor: pointer;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9 {
padding: 0;
}
.trash-can-icon {
cursor: pointer;
font-size: 18px;
}
|
|
|
|
|
Your asking for lots of features, and it looks like you downloaded a angular package.
Well for a spinner, you have to declare a variable to flag the upload event at the start of upload, then the HTML page would be set to pick up that variable change and show the spinner, when the upload is complete, you toggle the variable and the HTML will hide the spinner.
I have to code to show you. But to write the upload speed and percent, would require you to make a custom component and author it. Not an easy task and very time consuming. There is no quick answer for that.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hi all
Could any body help me to clear the code line : total[language] = total[language] + 1 || 1 in this code block:
const url = 'https://api.github.com/users/john-smilga/repos?per_page=100'
const fetchRepos = async () => {
const response = await fetch(url)
const data = await response.json()
const newData = data.reduce((total, repo) => {
const { language } = repo
if (language) {
total[language] = total[language] + 1 || 1
}
return total
}, {})
console.log(newData)
}
fetchRepos()
thanks a lot
|
|
|
|
|
To "clear" the code line, simply delete the line. That will of course render the surrounding if block irrelevant, and ensure that your reduce method simply returns an empty object, so your fetch request is also irrelevant. The final function would be:
const fetchRepos = () => {
const newData = {};
console.log(newData);
};
NB: If that's not what you're trying to do, then you need to provide a clearer explanation of your requirement.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks for your reply
I still confuse with
total[language]
could you clear to me
thanks alot
|
|
|
|
|
It's an alternative syntax for a property accessor, which is required when the property name is not fixed.
Property accessors - JavaScript | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
thanks alot
i know total[language] shall return to string but here they took total[language] plus with 1 that is point i still confuse.
Could you make it more clear
kidly thanks
|
|
|
|
|
No, language will be a string; total[language] will be a number.
Initially, it will be undefined, which is why there's a || 1 on the end:
undefined + 1 === undefined;undefined || 1 === 1;
Assigning a default value to a variable - JavaScript | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks alot for your deep explaination
But when i console.log(total[language]) it return for me string: javascript, css and html rather number
thanks alot
|
|
|
|
|
Hello! I need some help with my project, it's only html and css, please contact me in private and we can talk there. Thank you very much!
|
|
|
|
|
Sorry, no. This is an open forum for technical discussions and questions. If you want someone to work for you then try freelancers.com.
|
|
|
|
|
i said i need help not for someone to do the project for me 
|
|
|
|
|
|
No private. Ask your questions here and there are lots of people who can answer.
|
|
|
|
|
You can tell here what help you need, i will give you solution as much as possible.
|
|
|
|
|
Hi, i need some help with a project with a responsive gallery, can anyone help me please contact me in private here .  
|
|
|
|
|
I was wondering if anyone would suggest me to remove the unused CSS and whether or not it would do any good to decrease the page loading time.
|
|
|
|
|
How Do You Remove Unused CSS From a Site? | CSS-Tricks[^]
The effect on page loading time will depend on how much you remove. It's unlikely to have as much effect as optimizing your images and Javascript, but you would need to profile your page load time to determine where the bottleneck is.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi,
as light-weight files,
web resources like scripts pages ( htm ; php ; js ... ) , and css files are the costless.
1 video 2 Go
1 UHD picture 8 Mo
1 HD picture 4 Mo
1 CSS file 0 Mo 200 ko
It's really to forget with the aim to increase load speed.
Something usual is to increase code quality, with 'less' code as effect.
It's refactorising.
Html can be skills increased, Css too.
With a better use of tags, and current features.
It's bring the code to a higher quality, with refactorizing.
Then sending the code to a client is faster,
loading, and building the page DOM is faster again,
and so displaying, and interacting
It's a gain.
modified 23-Aug-21 21:01pm.
|
|
|
|
|
We have four possible environments within two possible categories of environments in which to run our web apps (about 15 apps).
Unclassified dev box, dev server, test, QA, and prod
Classified dev box, dev server, test, QA, and prod
Each of these environments also has an environment-specific database server, and several connection strings were required per application.
At one point, we were building a web app deployment package that was category and environment specific, meaning we could potentially be creating 8 different packages depending on the target environment. So, as we progress through the dev/test/acceptance/production life cycle, we'd eventually have to create at least four deployment packages.
Yes. It was a pain in the ass and as you might guess, fraught with danger with regards to deploying essentially untested code (that could even be different from package to package assuming something goes sideways during the creation of the package).
---------------------------------------------------------
We recently transitioned to "the cloud", and the "new way" is to create just one package, and as it transits the dev/test/prod life cycle, the same package is merely deployed to the next environment. While this is by far a better idea, I have concerns.
The connection strings are contained in the web.config file, which means that we can't deploy the "new way", because the deployment package we build has always been environment specific (remember, each environment has its own database).
---------------------------------------------------------
Are my concerns justified? In the interest of full disclosure, we do not use Entity Framework for database access.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013
|
|
|
|
|
I have a simple Test controller:
public class TestController : _ControllerBase
{
[HttpPost]
public void Post([FromBody] TestEntity entity)
{
Repository.AddTest(entity);
}
[HttpDelete]
public void Delete(Guid id)
{
Repository.DeleteTest(id);
}
[HttpGet]
public IEnumerable Get()
{
return Repository.GetTests();
}
[HttpGet]
public TestEntity Get(Guid id)
{
return Repository.GetTest(id);
}
[HttpPut]
public void Put(Guid id, [FromBody] TestEntity entity)
{
Repository.UpdateTest(entity);
}
}
If I call the Get I get back "Bad Request".
If I comment out the second Get (the single entity), the IEnumerable Get fires fine.
My URL is "https://localhost:44355/api/Test/Get"
My RouteConfig looks like this:
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
}
What am I doing wrong here??
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
modified 26-Feb-21 13:59pm.
|
|
|
|
|
I probably just chose the wrong format to store the datetime in the cookie, but it's worth pursuing time someone tells me to change it.
I need help with converting the date, so I can do a compare or diff, or perhaps dumping the date for something else, or just general help with making this work. Help can just be an idea or nudge. Keep in mind that I'm not a PHP 7 expert, and lost my knowledge of PHP back in 2005 or so. I've been working on this for hours and I'm not sure whether to dump it and start again, or do even more research.
public static function setJsonAuthCookie($userName, $userType): void {
date_default_timezone_set('America/Los_Angeles');
$today = new DateTime();
$jsonData = array(
"userName" => $userName,
"userType" => $userType,
"createdOn" => $today,
"expires" => $today->add(new DateInterval('PT4H')),
"token" => "",
"auth0" => ""
);
$jsonEncode = json_encode($jsonData, JSON_FORCE_OBJECT);
setcookie("authJson", $jsonEncode, time()+240);
}
public static function validateUser(): array {
$cookie = clsAuth::getJsonAuthCookie();
if (!isset($cookie)) {
$formAction = "/pcad/unauthorized.phtml";
header("Location: http://".$_SERVER['HTTP_HOST']."$formAction");
} else {
$userName = $cookie['userName'];
$userType = $cookie['userType'];
$createdOn = $cookie['createdOn'];
$expires = $cookie['expires'];
$token = $cookie['token'];
$auth0 = $cookie['auth0'];
date_default_timezone_set('America/Los_Angeles');
$today = new DateTime();
$dateString = $expires['date'];
$timeZone = $expires['timezone'];
echo "<div>validating token</div>";
if ($dateString > $today) {
echo "<div>token declined</div>";
sleep(1);
$formAction = "/pcad/";
} else {
echo "<div>token accepted</div>";
%7B%22userName%22%3A%22jimk%22%2C%22userType%22%3A%22Executive%22%2C%22createdOn%22%3A%7B%22date%22%3A%222021-02-17%2018%3A32%3A54.638030%22%2C%22timezone_type%22%3A3%2C%22timezone%22%3A%22America%5C%2FLos_Angeles%22%7D%2C%22expires%22%3A%7B%22date%22%3A%222021-02-17%2018%3A32%3A54.638030%22%2C%22timezone_type%22%3A3%2C%22timezone%22%3A%22America%5C%2FLos_Angeles%22%7D%2C%22token%22%3A%22%22%2C%22auth0%22%3A%22%22%7D
Then reading the cookie, extracting the json, and trying to compare the date "expires" to $today which is DateTime
Tried to convert the string date in the JSON back to an PHP DateTime object, so I can say is today > expires
I tried for hours, using getDate, strtotime, and reading up on time in seconds since the epoch.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Message Closed
modified 15-Feb-21 12:19pm.
|
|
|
|
|
You can't.
Number of fields in a table: 255
If you need more fields, you'll have to use a different DBMS.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I can make "Programming" in this code work as a link but I want the icon to be the link. I did come up with one solution but it deformed the icon when mousing over it.
<div class="col-lg-3">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
class="icon-playlist m-auto text-primary">
</div>
<a href="#schedule">
<h3>Programming</h3>
</a>
<p class="lead mb-0">Schedule</p>
</div>
</div>
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
