Conditional fileInput uploader to count number of files in Shiny
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
I have the following shiny app
require(shiny)
ui <- fluidPage(
numericInput("num", "num:", 10, min = 1, max = 100),
fileInput(inputId = "upl", multiple = T, label = "upl")
)
server <- function(input, output) {
}
shinyApp(ui, server)
I would like the fileInput uploader to only upload the files if its the amount of files specified in the numericInput. Otherwise it should give a message the amount of files is wrong.
I tried to use shinyjs for this
//remove existing listener
document.getElementById('upl').outerHTML = document.getElementById('upl').outerHTML;
document.getElementById('upl').addEventListener('change', function() {
if(document.getElementById('upl').files.length == document.getElementById('num').value) {
// something that uploads the files
// I tried to copy the function from the already existing listener, but its anonymous and has no reference so its impossible to copy
} else {
alert('wrong number of files');
}
})
I haven't figured out a way to stop or initiate the upload based on the conditional, because the input element already has an event listener on it with an anonymous function which I am unable to copy.
There might be an easier way which I'm unaware of, any idea how to build a conditional uploader in shiny?
r shiny shinyjs
asked Jan 4 at 13:23
Mehdi NellenMehdi Nellen
4,70842241
add a comment |
1
I have the following shiny app
require(shiny)
ui <- fluidPage(
numericInput("num", "num:", 10, min = 1, max = 100),
fileInput(inputId = "upl", multiple = T, label = "upl")
)
server <- function(input, output) {
}
shinyApp(ui, server)
I would like the fileInput uploader to only upload the files if its the amount of files specified in the numericInput. Otherwise it should give a message the amount of files is wrong.
I tried to use shinyjs for this
//remove existing listener
document.getElementById('upl').outerHTML = document.getElementById('upl').outerHTML;
document.getElementById('upl').addEventListener('change', function() {
if(document.getElementById('upl').files.length == document.getElementById('num').value) {
// something that uploads the files
// I tried to copy the function from the already existing listener, but its anonymous and has no reference so its impossible to copy
} else {
alert('wrong number of files');
}
})
I haven't figured out a way to stop or initiate the upload based on the conditional, because the input element already has an event listener on it with an anonymous function which I am unable to copy.
There might be an easier way which I'm unaware of, any idea how to build a conditional uploader in shiny?
r shiny shinyjs
asked Jan 4 at 13:23
Mehdi NellenMehdi Nellen
4,70842241
add a comment |
1
1
1
I have the following shiny app
require(shiny)
ui <- fluidPage(
numericInput("num", "num:", 10, min = 1, max = 100),
fileInput(inputId = "upl", multiple = T, label = "upl")
)
server <- function(input, output) {
}
shinyApp(ui, server)
I would like the fileInput uploader to only upload the files if its the amount of files specified in the numericInput. Otherwise it should give a message the amount of files is wrong.
I tried to use shinyjs for this
//remove existing listener
document.getElementById('upl').outerHTML = document.getElementById('upl').outerHTML;
document.getElementById('upl').addEventListener('change', function() {
if(document.getElementById('upl').files.length == document.getElementById('num').value) {
// something that uploads the files
// I tried to copy the function from the already existing listener, but its anonymous and has no reference so its impossible to copy
} else {
alert('wrong number of files');
}
})
I haven't figured out a way to stop or initiate the upload based on the conditional, because the input element already has an event listener on it with an anonymous function which I am unable to copy.
There might be an easier way which I'm unaware of, any idea how to build a conditional uploader in shiny?
r shiny shinyjs
asked Jan 4 at 13:23
Mehdi NellenMehdi Nellen
4,70842241
I have the following shiny app
require(shiny)
ui <- fluidPage(
numericInput("num", "num:", 10, min = 1, max = 100),
fileInput(inputId = "upl", multiple = T, label = "upl")
)
server <- function(input, output) {
}
shinyApp(ui, server)
I would like the fileInput uploader to only upload the files if its the amount of files specified in the numericInput. Otherwise it should give a message the amount of files is wrong.
I tried to use shinyjs for this
//remove existing listener
document.getElementById('upl').outerHTML = document.getElementById('upl').outerHTML;
document.getElementById('upl').addEventListener('change', function() {
if(document.getElementById('upl').files.length == document.getElementById('num').value) {
// something that uploads the files
// I tried to copy the function from the already existing listener, but its anonymous and has no reference so its impossible to copy
} else {
alert('wrong number of files');
}
})
I haven't figured out a way to stop or initiate the upload based on the conditional, because the input element already has an event listener on it with an anonymous function which I am unable to copy.
There might be an easier way which I'm unaware of, any idea how to build a conditional uploader in shiny?
r shiny shinyjs
r shiny shinyjs
asked Jan 4 at 13:23
Mehdi NellenMehdi Nellen
4,70842241
asked Jan 4 at 13:23
Mehdi NellenMehdi Nellen
4,70842241
asked Jan 4 at 13:23
Mehdi NellenMehdi Nellen
4,70842241
asked Jan 4 at 13:23
Mehdi NellenMehdi Nellen
4,70842241
asked Jan 4 at 13:23
Mehdi NellenMehdi Nellen
4,70842241
4,70842241
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
This seems to work:
library(shiny)
library(shinyjs)
js <- "
$(document).ready(function(){
document.getElementById('upl').addEventListener('change', function() {
if(document.getElementById('upl').files.length == document.getElementById('num').value) {
return true;
} else {
alert('wrong number of files');
this.value = '';
return false;
}
})
})"
ui <- fluidPage(
useShinyjs(),
tags$head(tags$script(HTML(js))),
numericInput("num", "num:", 2, min = 1, max = 100),
fileInput(inputId = "upl", multiple = T, label = "upl")
)
server <- function(input, output) { }
shinyApp(ui, server)
answered Jan 5 at 8:25
Stéphane LaurentStéphane Laurent
16.8k75698
Could you explain whatthis.value = '';does? (the code works btw)
– Mehdi Nellen
Jan 7 at 9:24
1
@MehdiNellenthisis theuplelement, andthis.value = ''resets its value (its value is the names of the uploaded files)
– Stéphane Laurent
Jan 7 at 11:11
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
});
}
});
draft saved
draft discarded
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%2f54039777%2fconditional-fileinput-uploader-to-count-number-of-files-in-shiny%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
1
This seems to work:
library(shiny)
library(shinyjs)
js <- "
$(document).ready(function(){
document.getElementById('upl').addEventListener('change', function() {
if(document.getElementById('upl').files.length == document.getElementById('num').value) {
return true;
} else {
alert('wrong number of files');
this.value = '';
return false;
}
})
})"
ui <- fluidPage(
useShinyjs(),
tags$head(tags$script(HTML(js))),
numericInput("num", "num:", 2, min = 1, max = 100),
fileInput(inputId = "upl", multiple = T, label = "upl")
)
server <- function(input, output) { }
shinyApp(ui, server)
answered Jan 5 at 8:25
Stéphane LaurentStéphane Laurent
16.8k75698
Could you explain whatthis.value = '';does? (the code works btw)
– Mehdi Nellen
Jan 7 at 9:24
1
@MehdiNellenthisis theuplelement, andthis.value = ''resets its value (its value is the names of the uploaded files)
– Stéphane Laurent
Jan 7 at 11:11
add a comment |
1
This seems to work:
library(shiny)
library(shinyjs)
js <- "
$(document).ready(function(){
document.getElementById('upl').addEventListener('change', function() {
if(document.getElementById('upl').files.length == document.getElementById('num').value) {
return true;
} else {
alert('wrong number of files');
this.value = '';
return false;
}
})
})"
ui <- fluidPage(
useShinyjs(),
tags$head(tags$script(HTML(js))),
numericInput("num", "num:", 2, min = 1, max = 100),
fileInput(inputId = "upl", multiple = T, label = "upl")
)
server <- function(input, output) { }
shinyApp(ui, server)
answered Jan 5 at 8:25
Stéphane LaurentStéphane Laurent
16.8k75698
Could you explain whatthis.value = '';does? (the code works btw)
– Mehdi Nellen
Jan 7 at 9:24
1
@MehdiNellenthisis theuplelement, andthis.value = ''resets its value (its value is the names of the uploaded files)
– Stéphane Laurent
Jan 7 at 11:11
add a comment |
1
1
1
This seems to work:
library(shiny)
library(shinyjs)
js <- "
$(document).ready(function(){
document.getElementById('upl').addEventListener('change', function() {
if(document.getElementById('upl').files.length == document.getElementById('num').value) {
return true;
} else {
alert('wrong number of files');
this.value = '';
return false;
}
})
})"
ui <- fluidPage(
useShinyjs(),
tags$head(tags$script(HTML(js))),
numericInput("num", "num:", 2, min = 1, max = 100),
fileInput(inputId = "upl", multiple = T, label = "upl")
)
server <- function(input, output) { }
shinyApp(ui, server)
answered Jan 5 at 8:25
Stéphane LaurentStéphane Laurent
16.8k75698
This seems to work:
library(shiny)
library(shinyjs)
js <- "
$(document).ready(function(){
document.getElementById('upl').addEventListener('change', function() {
if(document.getElementById('upl').files.length == document.getElementById('num').value) {
return true;
} else {
alert('wrong number of files');
this.value = '';
return false;
}
})
})"
ui <- fluidPage(
useShinyjs(),
tags$head(tags$script(HTML(js))),
numericInput("num", "num:", 2, min = 1, max = 100),
fileInput(inputId = "upl", multiple = T, label = "upl")
)
server <- function(input, output) { }
shinyApp(ui, server)
answered Jan 5 at 8:25
Stéphane LaurentStéphane Laurent
16.8k75698
answered Jan 5 at 8:25
Stéphane LaurentStéphane Laurent
16.8k75698
answered Jan 5 at 8:25
Stéphane LaurentStéphane Laurent
16.8k75698
answered Jan 5 at 8:25
Stéphane LaurentStéphane Laurent
16.8k75698
16.8k75698
Could you explain whatthis.value = '';does? (the code works btw)
– Mehdi Nellen
Jan 7 at 9:24
1
@MehdiNellenthisis theuplelement, andthis.value = ''resets its value (its value is the names of the uploaded files)
– Stéphane Laurent
Jan 7 at 11:11
add a comment |
Could you explain whatthis.value = '';does? (the code works btw)
– Mehdi Nellen
Jan 7 at 9:24
1
@MehdiNellenthisis theuplelement, andthis.value = ''resets its value (its value is the names of the uploaded files)
– Stéphane Laurent
Jan 7 at 11:11
Could you explain what
this.value = ''; does? (the code works btw)– Mehdi Nellen
Jan 7 at 9:24
Could you explain what
this.value = ''; does? (the code works btw)– Mehdi Nellen
Jan 7 at 9:24
1
1
@MehdiNellen
this is the upl element, and this.value = '' resets its value (its value is the names of the uploaded files)– Stéphane Laurent
Jan 7 at 11:11
@MehdiNellen
this is the upl element, and this.value = '' resets its value (its value is the names of the uploaded files)– Stéphane Laurent
Jan 7 at 11:11
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f54039777%2fconditional-fileinput-uploader-to-count-number-of-files-in-shiny%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
