You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@jena.apache.org by an...@apache.org on 2014/03/11 15:39:45 UTC
svn commit: r1576365 -
/jena/branches/jena-fuseki-new-ui/src/main/webapp/upload.html
Author: andy
Date: Tue Mar 11 14:39:45 2014
New Revision: 1576365
URL: http://svn.apache.org/r1576365
Log:
Outline of file upload using jquery.fileupload
Modified:
jena/branches/jena-fuseki-new-ui/src/main/webapp/upload.html
Modified: jena/branches/jena-fuseki-new-ui/src/main/webapp/upload.html
URL: http://svn.apache.org/viewvc/jena/branches/jena-fuseki-new-ui/src/main/webapp/upload.html?rev=1576365&r1=1576364&r2=1576365&view=diff
==============================================================================
--- jena/branches/jena-fuseki-new-ui/src/main/webapp/upload.html (original)
+++ jena/branches/jena-fuseki-new-ui/src/main/webapp/upload.html Tue Mar 11 14:39:45 2014
@@ -10,12 +10,22 @@
<link href="css/jquery.dataTables.css" rel="stylesheet" media="screen">
<link href="css/fui.css" rel="stylesheet" media="screen">
+ <script src="js/lib/jquery-1.10.2.min.js"></script>
+ <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
+ <script src="js2/vendor/jquery.ui.widget.js"></script>
+ <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
+ <script src="js2/jquery.iframe-transport.js"></script>
+ <!-- The basic File Upload plugin -->
+ <script src="js2/jquery.fileupload.js"></script>
+
+ <!-- Set the URL for the upload -->
<script data-main="js/app/main.upload.js" src="js/lib/require.min.js"></script>
<!--[if lt IE 9]>
<script src="js/lib/html5shiv.js"></script>
<script src="js/lib/respond.min.js"></script>
<![endif]-->
+ <!--
<style>
.btn-file {
position: relative;
@@ -37,6 +47,7 @@
display: block;
}
</style>
+ -->
</head>
<body>
@@ -97,15 +108,20 @@
<div class="row">
<h1>Data upload</h1>
<p>Load data into a dataset. You can select one of the active datasets as the destination
- for the data and also specific the named graph within the dataset.
- <span class="btn btn-custom2">Select Destination</span> button.</p>
+ for the data and also specific the named graph within the dataset.
+ <span class="btn btn-custom2">Select Destination</span> button.</p>
+
+ <div class="col-md-12 well">
+ <div class="query-chrome">
+
+ <div class="form-group">
+ <label for="uploadEndpoint">Destination</label>
+ <input type="text" class="form-control" id="uploadEndpoint" />
+ </div>
+
+ <!-- UPLOAD -->
+ <!-- Form like settings -->
- <div class="col-md-12 well">
- <div class="query-chrome">
- <!--
- <form class="form-inline" role="form">
- -->
- <form class="form-inline" action="/ds/upload" enctype="multipart/form-data" method="post">
<div class="form-group">
<label for="uploadEndpoint"></label>
<div class="dropdown ">
@@ -115,41 +131,55 @@
</div>
</div>
- <div class="form-group">
- <label for="uploadEndpoint">Destination</label>
- <input type="text" class="form-control" id="uploadEndpoint" />
- </div>
- <div class="form-group">
- <label for="uploadEndpoint">Data</label>
- <span class="btn btn-primary btn-file choose-files form-control">
- Choose Files<input type="file" class="form-control" id="uploadFiles" multiple=""/>
- </span>
- </div>
- <!--
- <div class="form-group">
- <label> </label>
- <a href="#" class="btn btn-success run-upload form-control">upload</a>
+ <!-- The fileinput-button span is used to style the file input field as button -->
+ <span class="btn btn-success fileinput-button">
+ <i class="glyphicon glyphicon-plus"></i>
+ <span>Select files...</span>
+ <!-- The file input field used as target for the file upload widget -->
+ <input id="fileupload" type="file" name="files[]" multiple>
+ </span>
+ <br>
+ <br>
+ <!-- The global progress bar -->
+ <div id="progress" class="progress">
+ <div class="progress-bar progress-bar-success"></div>
</div>
- -->
- <input type="submit" value="Upload">
- </form>
- </div>
- <!--
- <div class="form-group">
- Graph: <input name="graph" size="20" value="default"/><br/>
- </div>
- -->
+ <!-- The container for the uploaded files -->
+ <div id="files" class="files"></div>
+ <br>
+ </div>
+ </div>
</div>
- </div>
-
- <!-- Choose a file or C&P into a box -->
-
- <!-- Choose dataset destination -->
- <!-- Optionally choose dest graph -->
- </div>
-
+ </div>
+<script>
+/*global window, $ */
+$(function () {
+ 'use strict';
+ // Change this to the location of your server-side upload handler:
+ //var url = window.location.hostname === ... : ... ?
+ var url = '/ds/upload' ;
+ $('#fileupload').fileupload({
+ url: url,
+ dataType: 'json',
+ done: function (e, data) {
+ $.each(data.result.files, function (index, file) {
+ $('<p/>').text(file.name).appendTo('#files');
+ });
+ },
+ progressall: function (e, data) {
+ var progress = parseInt(data.loaded / data.total * 100, 10);
+ $('#progress .progress-bar').css(
+ 'width',
+ progress + '%'
+ );
+ }
+ }).prop('disabled', !$.support.fileInput)
+ .parent().addClass($.support.fileInput ? undefined : 'disabled');
+});
+</script>
+
</body>
</html>
\ No newline at end of file