How can I cancel the uploading progress of a file in vue.js?
This is my code to upload a file, the problem that I have is that I can't cancel the uploading, what can I do in order to accomplish that?
fileBtn(e, k){
e.preventDefault();
const uploader = document.getElementById('uploader');
let size = 5242880 // equivale a 5MB -> 5242880
let getFile = e.target.files[0];
let file_type = getFile.name.split('.').pop();
let file_name = getFile.name.substr(0, getFile.name.lastIndexOf("."))
let storageRef = firebase.storage().ref('archivos/' + getFile.name);
let task = storageRef.put(getFile);
task.on('state_changed', function progress(snapshot){
// handle progress
}, function error(err){
// handle error
}, function complete(){
// handle success
);
}
I have thought to create a function in the onchange method to render a cancel button to stop de upload transaction, I thought about doing that because when a file is selected to upload, it is automatically uploaded to a database (Firebase). How can I do to avoid this and that when the file is selected, it can be accepted or canceled before the data upload transaction begins?
vue.js
edited Nov 20 '18 at 8:55
mbuechmann
2,89121325
asked Nov 19 '18 at 22:17
Arturo Sebastian Diaz AllcaArturo Sebastian Diaz Allca
1
add a comment |
This is my code to upload a file, the problem that I have is that I can't cancel the uploading, what can I do in order to accomplish that?
fileBtn(e, k){
e.preventDefault();
const uploader = document.getElementById('uploader');
let size = 5242880 // equivale a 5MB -> 5242880
let getFile = e.target.files[0];
let file_type = getFile.name.split('.').pop();
let file_name = getFile.name.substr(0, getFile.name.lastIndexOf("."))
let storageRef = firebase.storage().ref('archivos/' + getFile.name);
let task = storageRef.put(getFile);
task.on('state_changed', function progress(snapshot){
// handle progress
}, function error(err){
// handle error
}, function complete(){
// handle success
);
}
I have thought to create a function in the onchange method to render a cancel button to stop de upload transaction, I thought about doing that because when a file is selected to upload, it is automatically uploaded to a database (Firebase). How can I do to avoid this and that when the file is selected, it can be accepted or canceled before the data upload transaction begins?
vue.js
edited Nov 20 '18 at 8:55
mbuechmann
2,89121325
asked Nov 19 '18 at 22:17
Arturo Sebastian Diaz AllcaArturo Sebastian Diaz Allca
1
If this is vue: Do you provide the function fileBtn via the componentsmethods?
– mbuechmann
Nov 20 '18 at 8:57
add a comment |
This is my code to upload a file, the problem that I have is that I can't cancel the uploading, what can I do in order to accomplish that?
fileBtn(e, k){
e.preventDefault();
const uploader = document.getElementById('uploader');
let size = 5242880 // equivale a 5MB -> 5242880
let getFile = e.target.files[0];
let file_type = getFile.name.split('.').pop();
let file_name = getFile.name.substr(0, getFile.name.lastIndexOf("."))
let storageRef = firebase.storage().ref('archivos/' + getFile.name);
let task = storageRef.put(getFile);
task.on('state_changed', function progress(snapshot){
// handle progress
}, function error(err){
// handle error
}, function complete(){
// handle success
);
}
I have thought to create a function in the onchange method to render a cancel button to stop de upload transaction, I thought about doing that because when a file is selected to upload, it is automatically uploaded to a database (Firebase). How can I do to avoid this and that when the file is selected, it can be accepted or canceled before the data upload transaction begins?
vue.js
edited Nov 20 '18 at 8:55
mbuechmann
2,89121325
asked Nov 19 '18 at 22:17
Arturo Sebastian Diaz AllcaArturo Sebastian Diaz Allca
1
This is my code to upload a file, the problem that I have is that I can't cancel the uploading, what can I do in order to accomplish that?
fileBtn(e, k){
e.preventDefault();
const uploader = document.getElementById('uploader');
let size = 5242880 // equivale a 5MB -> 5242880
let getFile = e.target.files[0];
let file_type = getFile.name.split('.').pop();
let file_name = getFile.name.substr(0, getFile.name.lastIndexOf("."))
let storageRef = firebase.storage().ref('archivos/' + getFile.name);
let task = storageRef.put(getFile);
task.on('state_changed', function progress(snapshot){
// handle progress
}, function error(err){
// handle error
}, function complete(){
// handle success
);
}
I have thought to create a function in the onchange method to render a cancel button to stop de upload transaction, I thought about doing that because when a file is selected to upload, it is automatically uploaded to a database (Firebase). How can I do to avoid this and that when the file is selected, it can be accepted or canceled before the data upload transaction begins?
vue.js
vue.js
edited Nov 20 '18 at 8:55
mbuechmann
2,89121325
asked Nov 19 '18 at 22:17
Arturo Sebastian Diaz AllcaArturo Sebastian Diaz Allca
1
edited Nov 20 '18 at 8:55
mbuechmann
2,89121325
asked Nov 19 '18 at 22:17
Arturo Sebastian Diaz AllcaArturo Sebastian Diaz Allca
1
edited Nov 20 '18 at 8:55
mbuechmann
2,89121325
edited Nov 20 '18 at 8:55
mbuechmann
2,89121325
edited Nov 20 '18 at 8:55
mbuechmann
2,89121325
2,89121325
asked Nov 19 '18 at 22:17
Arturo Sebastian Diaz AllcaArturo Sebastian Diaz Allca
1
asked Nov 19 '18 at 22:17
Arturo Sebastian Diaz AllcaArturo Sebastian Diaz Allca
1
asked Nov 19 '18 at 22:17
Arturo Sebastian Diaz AllcaArturo Sebastian Diaz Allca
1
1
If this is vue: Do you provide the function fileBtn via the componentsmethods?
– mbuechmann
Nov 20 '18 at 8:57
add a comment |
If this is vue: Do you provide the function fileBtn via the componentsmethods?
– mbuechmann
Nov 20 '18 at 8:57
If this is vue: Do you provide the function fileBtn via the components
methods?– mbuechmann
Nov 20 '18 at 8:57
If this is vue: Do you provide the function fileBtn via the components
methods?– mbuechmann
Nov 20 '18 at 8:57
add a comment |
1 Answer
1
active
oldest
votes
storageRef.put returns an UploadTask. This UploadTask has the method cancel, which does what you want. Official docs: https://firebase.google.com/docs/reference/js/firebase.storage.UploadTask#cancel
To access the upload task from another function, you need to store the task in a global variable in fileBtn:
this.task = storageRef.put(getFile); // save it globally in component
Then you need to reset the task in the event handlers (error and complete):
this.task = null
Add a button that calls e.g. cancelBtn and add this function:
cancelBtn() {
if (this.task) {
this.task.cancel()
}
}
answered Nov 20 '18 at 8:51
mbuechmannmbuechmann
2,89121325
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53383452%2fhow-can-i-cancel-the-uploading-progress-of-a-file-in-vue-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
storageRef.put returns an UploadTask. This UploadTask has the method cancel, which does what you want. Official docs: https://firebase.google.com/docs/reference/js/firebase.storage.UploadTask#cancel
To access the upload task from another function, you need to store the task in a global variable in fileBtn:
this.task = storageRef.put(getFile); // save it globally in component
Then you need to reset the task in the event handlers (error and complete):
this.task = null
Add a button that calls e.g. cancelBtn and add this function:
cancelBtn() {
if (this.task) {
this.task.cancel()
}
}
answered Nov 20 '18 at 8:51
mbuechmannmbuechmann
2,89121325
add a comment |
storageRef.put returns an UploadTask. This UploadTask has the method cancel, which does what you want. Official docs: https://firebase.google.com/docs/reference/js/firebase.storage.UploadTask#cancel
To access the upload task from another function, you need to store the task in a global variable in fileBtn:
this.task = storageRef.put(getFile); // save it globally in component
Then you need to reset the task in the event handlers (error and complete):
this.task = null
Add a button that calls e.g. cancelBtn and add this function:
cancelBtn() {
if (this.task) {
this.task.cancel()
}
}
answered Nov 20 '18 at 8:51
mbuechmannmbuechmann
2,89121325
add a comment |
storageRef.put returns an UploadTask. This UploadTask has the method cancel, which does what you want. Official docs: https://firebase.google.com/docs/reference/js/firebase.storage.UploadTask#cancel
To access the upload task from another function, you need to store the task in a global variable in fileBtn:
this.task = storageRef.put(getFile); // save it globally in component
Then you need to reset the task in the event handlers (error and complete):
this.task = null
Add a button that calls e.g. cancelBtn and add this function:
cancelBtn() {
if (this.task) {
this.task.cancel()
}
}
answered Nov 20 '18 at 8:51
mbuechmannmbuechmann
2,89121325
storageRef.put returns an UploadTask. This UploadTask has the method cancel, which does what you want. Official docs: https://firebase.google.com/docs/reference/js/firebase.storage.UploadTask#cancel
To access the upload task from another function, you need to store the task in a global variable in fileBtn:
this.task = storageRef.put(getFile); // save it globally in component
Then you need to reset the task in the event handlers (error and complete):
this.task = null
Add a button that calls e.g. cancelBtn and add this function:
cancelBtn() {
if (this.task) {
this.task.cancel()
}
}
answered Nov 20 '18 at 8:51
mbuechmannmbuechmann
2,89121325
answered Nov 20 '18 at 8:51
mbuechmannmbuechmann
2,89121325
answered Nov 20 '18 at 8:51
mbuechmannmbuechmann
2,89121325
answered Nov 20 '18 at 8:51
mbuechmannmbuechmann
2,89121325
2,89121325
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53383452%2fhow-can-i-cancel-the-uploading-progress-of-a-file-in-vue-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If this is vue: Do you provide the function fileBtn via the components
methods?– mbuechmann
Nov 20 '18 at 8:57