Utilize "Occasion" alongside a different variable

Trying to pass the id received by the uploadFile function to the progressHandler function, while still needing the "event" to work. Struggling to make it happen, can someone provide assistance?

function uploadFile(arquivo, id) {

    alert(id)
    //FLUIGC.loading('#painel_inclusao_planilha').show();

    var file = _(id).files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append(id, file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    //ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", ""); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
    //use file_upload_parser.php from above url
    ajax.send(formdata); }

function progressHandler(event) {
    //_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;    
    var percent = (event.loaded / event.total) * 100;
    console.log('percent ---> ' + percent)
    if (percent === 100) {
        console.log('Upload concluído')
        ativarBotaoUpload()
        FLUIGC.loading('#painel_inclusao_planilha').hide();
    }
    //_("progressBar").value = Math.round(percent);
    //_("status").innerHTML = Math.round(percent) + "% concluído... por favor, aguarde"; }

Answer №1

If you want to achieve this task, consider using an anonymous callback function:

function uploadFile(file, id) {

    alert(id)
    //FLUIGC.loading('#painel_inclusao_planilha').show();

    var file = _(id).files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append(id, file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", function(event) {progressHandler(event, id)}, false);
    //ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", ""); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
    //use file_upload_parser.php from above url
    ajax.send(formdata); }

function progressHandler(event, id) {
    //_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;    
    var percent = (event.loaded / event.total) * 100;
    console.log('percent ---> ' + percent)
    if (percent === 100) {
        console.log('Upload completed')
        activateUploadButton()
        FLUIGC.loading('#painel_inclusao_planilha').hide();
    }
    //_("progressBar").value = Math.round(percent);
    //_("status").innerHTML = Math.round(percent) + "% completed... please wait"; }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to enable visitors to share the current page on blogger, similar to the functionality of Facebook's

I'm looking to integrate a button on my website similar to Facebook's like button that allows users to share my site on Blogger. However, after checking Blogger's developer site, it appears that there is no equivalent JavaScript code availab ...

What is the reason behind Chrome's automatic scrolling to ensure the clicked element is fully contained?

Recently, I have observed that when performing ajax page updates (specifically appends to a block, like in "Show more comments" scenarios) Chrome seems to automatically scroll in order to keep the clicked element in view. What is causing this behavior? Wh ...

ASP.NET "Data" Error: Trouble Parsing JSON Data on the Front-End

I am currently facing an issue with the configurations on my asmx page. The code is set up like this: using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; using System.Web.Script.Serialization; using Syst ...

Enhance vuelidate by incorporating personalized validation functions

I am currently working on expanding the Vuelidate object within my Vue application. Here is the current setup in my Vue Component: import {required} from "vuelidate/lib/validators"; export default { validations: { ... } } In order to a ...

Do we really need to create our own action creators in Redux Toolkit?

As I delve into implementing the redux toolkit in my react projects, I've come up with a structure for writing slices using redux-thunk to handle API requests. import { createSlice } from "@reduxjs/toolkit"; import axios from "axios&quo ...

showcasing real-time webcam information within an HTML web application

I have successfully integrated my webcam data live into my web application using the following code snippet. The live feed from my webcam is now visible on the webpage. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

What is the functionality of ng-repeat in AngularJS when used outside the "jump" table?

Currently, I am in the process of constructing a layout using a table with nested ng-repeat. <div ng-controller="PresetManageController"> <table> <in-preset ng-repeat="preset in presetManage.presets"></in-preset> </table ...

Discover the magic of triggering events that dynamically alter CSS styles

I am trying to implement an eventBus in the App.vue component that allows me to change a modal's CSS based on a payload object. For example, if I pass { type: 'success' }, the border of the modal should turn green, and if I pass { type: &apo ...

Simulating a PubSub publish functionality

I have been trying to follow the instructions provided in this guide on mocking new Function() with Jest to mock PubSub, but unfortunately I am facing some issues. jest.mock('@google-cloud/pubsub', () => jest.fn()) ... const topic = jest.fn( ...

Sending HTML content to viewChild in Angular 5

I'm struggling to figure out how to pass HTML to a ViewChild in order for it to be added to its own component's HTML. I've been searching for a solution with no luck so far. As a newcomer to Angular, many of the explanations I find online ar ...

Updating the content of a div dynamically by fetching and rendering JSON data with the help of Jquery and Ajax

Currently, I am attempting to dynamically load content into a response div using Ajax. There are four different divs available, and I would like to update the content of the response div based on the click of one of these divs. Can anyone provide guidanc ...

Is there a method in Kalendae js that automatically triggers the closing of the calendar after a date has been selected?

Currently, I am using Kalendae from https://github.com/ChiperSoft/Kalendae and I have to say it is fantastic. The best part is that I don't have to worry about dependencies. By default, the calendar pops up when a text box is selected and updates the ...

Tips for effectively implementing Ajax functionality within a table grid

As someone who is fairly new to programming, I have a question regarding implementing basic operations in a grid table. Should I use AJAX for these operations or can I achieve them without it? In the grid, each record has operations such as view, edit, up ...

"When using ajax, make sure to set async to true and work with deferred

After struggling for 3 hours trying to fix an issue, I turned to the internet for help. Can someone please assist me with the following challenge: How can I create a loop of AJAX requests that continues to run until the data received from the AJAX call i ...

Can someone help me adjust the height and width of my website for mobile in react js?

I'm still getting the hang of React JS and recently built a simple website. While it looks fine on a web browser, the mobile version is not quite right. The height on mobile appears to be double what it should be, resulting in a large scrollbar that s ...

Error encountered when attempting to have multiple chrome.runtime.onMessage listeners - port disconnection issue

I am currently developing a chrome-extension that utilizes the Dexie indexedDB Wrapper, various jQuery Libraries, and syncfusion's eGrid to manage and display data. While I know this issue has been addressed multiple times in the past, I have encounte ...

There is a table equipped with two buttons. When using jQuery-ajax, rather than replacing the <tbody> of the <table>, it redirects the browser to the specified ajax URL

I initially simplified my code to troubleshoot, but I now realize I need to show the unsimplified code to pinpoint the issue. I am replacing the HTML and JavaScript with the "full version" and have updated my description with more details. I have a table ...

Trouble installing NPM packages from Artifactory on Windows 10

Problem Description: I am utilizing Artifactory for my NPM packages. When attempting to install them on "Windows - 7", everything is functioning correctly. However, on "Windows - 10" an error is being displayed and the packages are not installing. Error M ...

The documentation for the 4-11.4 version of Material UI cannot be found anywhere

After the release of MUI v5.0.0-rc.1, it appears that all documentation pages for version 4, except for v4.12.3, have vanished. https://mui.com/versions/ Furthermore, (currently not accessible) Is there a way to access previous versions' document ...

What is the reason for the successful insertion into the database without including "http://" but encountering errors when including "http

How can I insert a site title, site address (URL), site description, and site category into my database using jQuery/JSON on the front-end? When I enter "http://" in the site address input field, the data is not inserted into the database. Here is the cod ...