Image upload in Shiny - file-upload

Question

I have been trying to figure out how to upload an image from a local computer through a shiny app, but I'm having trouble determining how to access the image in order to use it in the server side code and to then save it to a remote location. Right now, I have tried both fileInput() and custom HTML code using jQuery (shown below).
<!-- Google web fonts -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' />
<!-- The main CSS file -->
<link href='txt/assets/css/style.css' rel='stylesheet' />
<form id='upload' method='post' action='txt/upload.php' enctype='multipart/form-data'>
<div id='drop'>
Drop Here
<a>Browse</a>
<input type='file' name='upl' multiple />
</div>
<ul>
<!-- The file uploads will be shown here -->
</ul>
</form>
<!-- JavaScript Includes -->
<!-- <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> -->
<script src='txt/assets/js/jquery.knob.js'></script>
<!-- jQuery File Upload Dependencies -->
<script src='txt/assets/js/jquery.ui.widget.js'></script>
<script src='txt/assets/js/jquery.iframe-transport.js'></script>
<script src='txt/assets/js/jquery.fileupload.js'></script>
<!-- Our main JS file -->
<script src='assets/js/script.js'></script>
This is the upload.php:
// A list of permitted file extensions
$allowed = array('png', 'jpg', 'gif','zip');
if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){
$extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);
if(!in_array(strtolower($extension), $allowed)){
echo '{"status":"error"}';
exit;
}
if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/'.$_FILES['upl']['name'])){
echo '{"status":"success"}';
exit;
}
}
echo '{"status":"error"}';
exit;
And this is the server and ui code for the app.
shinyServer(function(input, output) {
output$your_species <- renderText({
current_species
})
output$current_sp <- renderText({
current_species
})
# output$your_image <- renderImage({
# input$image_upload
# }, deleteFile = FALSE)
source("pages/main_page.R")
source("pages/help_page.R")
header <- dashboardHeader(title="End. Sp. Images")
sidebar <- dashboardSidebar(disable=TRUE)
body <- dashboardBody(
main_page,
help_page
)
dashboardPage(header, sidebar, body, skin="blue")
main_page <- {
fluidPage(
column(1,
img(src="01_DOW_LOGO_COLOR_100.png"),
tags$hr()#,
),
column(11,
tabsetPanel(
tabPanel(title="Main",
tags$h3(textOutput("your_species"), style=make_bold()),
fluidRow(
column(4,
box(title="Image information",
collapsible=TRUE,
status="primary",
solidHeader=TRUE,
height=NULL,
width=NULL,
textInput("species",
label="Species",
value=current_species
),
textInput("img_src",
label="Image source",
value="http://"
),
selectInput("license",
label="Image license",
choices=list_of_licenses,
selected="Select..."
),
textInput("attribution",
label="Image attribution",
value="To whom should attribution be given?"
),
tags$hr(),
tags$p("Drop photo on button or click to choose",
style="color:gray"
),
# fileInput("image_upload",
# label="Photo upload"
# ),
tags$div(
HTML(html_txt)
),
submitButton("Submit")
# htmlOutput("wikimedia_embed")
)
),
column(5,
box(title="Your image",
collapsible=TRUE,
status="primary",
solidHeader=TRUE,
height=500,
width=NULL,
imageOutput("your_image",
height=NULL,
width="100%"
)
)
),
column(3,
tags$p("Some search options", style=make_18_bold()),
tags$p("Pre-formatted searches", style="color:gray"),
infoBox(
title="First option",
value=tags$a("Wikimedia",
href=wiki_srch,
target='_blank'),
icon=icon("picture-o"),
color="light-blue",
width=NULL
),
# infoBox(
# title="Second option",
# value=tags$a("CC Search",
# # href="http://search.creativecommons.org",
# href=cc_search,
# target='_blank'),
# icon=icon("picture-o"),
# color="light-blue",
# width=NULL
# ),
infoBox(
title="Second option",
value=tags$a("Google Image Search",
href=goog_srch,
target='_blank'),
icon=icon("picture-o"),
color="light-blue",
width=NULL
), #,
tags$p("Creative Common portal", style="color:gray"),
infoBox(
title="Check here too!",
value=tags$a("CC Search",
href="http://search.creativecommons.org",
target='_blank'),
icon=icon("picture-o"),
color="light-blue",
width=NULL
)
)
)
)
)
)
)
}
The HTML completely breaks the style of the upload portion of the app, but I think that is simply because of a poor directory structure. However, with both of these methods I can't figure out how to access the uploaded file. The "Choose file" button works and it shows that the file has been uploaded, but I don't know what to call in the server side that will allow me to both save the file remotely and use that file in an imageRender().
Any help for how to access the uploaded file is much appreciated!