<%
* VS Addin Comment: SourceFile="~/../../fox/samples/wwdemo/wwdemo.prg"
pcPageTitle = "File Upload Sample - West Wind Web Connection"
%>
<% Layout="~/views/_layoutpage.wcs" %>
<!-- remove sections if you're not using them -->
<% section="headers" %>
<style>
.sample .btn {
min-width: 185px;
margin-top: 5px;
}
/* Container*/
.fileUpload {
position: relative;
overflow: hidden;
}
/* hide the actual file upload control by making it invisible */
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
#ImageList img {
max-height: 160px;
float: left;
margin-left: 8px;
margin-bottom: 8px;
}
.sample {
padding-bottom: 25px;
}
</style>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<% endsection %>
<div class="container">
<div class="page-header-text">
<i class="fa fa-list-alt"></i>
File Upload Sample
</div>
<div class="btn-group margin-bottom-2x">
<a href="~/" class="btn btn-outline-primary btn-sm"> <i class="fa fa-home"></i> Samples</a>
<a href="UppyAndCarousel.wwd" class="btn btn-outline-primary btn-sm"> <i class="fa fa-images"></i> Image Carousel Sample</a>
<a href="showcode.wwd" class="btn btn-outline-primary btn-sm"> <i class="fa fa-code"></i> Server Code</a>
<a href="showfileastext.wwd?file=fileupload.wwd" class="btn btn-outline-primary btn-sm"> <i class="fa fa-code"></i> Script Code</a>
<a href="" class="btn btn-outline-primary btn-sm"> <i class="fa fa-refresh"></i> Refresh</a>
</div>
<div id="ImageList">
<%= pcImageListHtml %>
</div>
<div class="clearfix margin-bottom"></div>
<!-- CLASSIC UPLOAD EXAMPLE -->
<div class="container sample">
<h3>Standard HTML Form Upload</h3>
<p>
This example uses a classic HTML server form submission to upload
one or multiple selected image files to the server. It uses the new
<code>Request.MultipartFiles()</code> function to retrieve a collection
of files on the server.
</p>
<form action="FileUpload.wwd" method="post" enctype="multipart/form-data">
<!-- <form action="FileUpload.wwd" method="post" enctype="multipart/form-data"> -->
<!-- wrap the file input into a div so we can style the button -->
<div class="fileUpload btn btn-primary">
<span>
<i class="fa fa-image"></i>
Select images
</span>
<input type="file" id="upload" name="upload" class="upload" multiple accept="image/*" />
</div>
<button type="submit" class="btn btn-primary">
<i class="fa fa-upload"></i>
Upload...
</button>
<div id="filename"></div>
<!-- capture the filename to upload and display -->
<script>
document.getElementById("upload").onchange = function () {
var output = this.files.length + " file(s):\r\n";
for (var i = 0; i < this.files.length; i++) {
output += this.files[i].name + "\r\n";
}
document.getElementById("filename").innerText = output;
};
</script>
</form>
</div>
<!-- CLASSIC UPLOAD EXAMPLE -->
<!-- AJAX UPLOAD EXAMPLE -->
<div class="container sample">
<h3>Ajax File Upload</h3>
<p>
This example uses plain AJAX and HTML5 to asynchronously upload one or more image files
using script code to capture the file stream of the selected files and posting them
to the server using jQuery's <code>.ajax()</code> method. Provides a generically reusable
function to handle the upload.
</p>
<form id="ajaxForm" name="ajaxForm">
<!-- wrap the file input into a div so we can style the button -->
<div class="fileUpload btn btn-primary">
<span>
<i class="fa fa-upload"></i>
Upload Images
<i id="ajaxProgress" class="fa fa-spinner fa-spin" style="display: none"></i>
</span>
<input type="file" id="ajaxUpload" name="ajaxUpload"
class="upload" accept="image/*" multiple />
</div>
<img id="uploadedImage" style="display: none; max-width: 95%; margin: 15px 0" />
</form>
</div>
<script>
// Catch the file selection
var files = null;
$("#ajaxUpload").change(function (event) {
files = event.target.files;
// no further DOM processing
event.stopPropagation();
event.preventDefault();
// show spinner
$("#ajaxProgress").show();
uploadFiles("Upload",
"FileUpload.wwd?type=ajax",
function uploadSuccess(data, textStatus, jqXHR) {
var files = data;
$("#ajaxProgress").hide();
if (data.error)
toastr.error("Upload failed");
toastr.success("Upload completed.");
var images = "";
for (var i = 0; i < files.length; i++) {
var file = files[i];
images += '<img src="../temp/' + file.filename + '" />';
}
$("#ImageList").html(images);
},
function uploadError(jqXHR, textStatus, errorThrown) {
$("#ajaxProgress").hide();
toastr.error("Upload failed.");
});
});
/*
Generic re-usable Ajax Upload function
Pass in from Change event of file upload control
fileId - Id of the file Form vars
file results in (file0, file1, file2 etc)
url - Url to upload to
success - success handler
data object of JSON result data from server
error - error handler
*/
function uploadFiles(fileId, uploadUrl, success, error) {
// Create a formdata object and add the files
var data = new FormData();
$.each(files, function (key, value) {
data.append(fileId, value);
});
$.ajax({
url: uploadUrl,
type: 'POST',
data: data,
cache: false,
dataType: 'json',
processData: false, // Don't process the files
contentType: false, // Set content type to false!
success: success,
error: error
});
}
</script>
<!-- END AJAX UPLOAD EXAMPLE -->
<!-- Single Button plUpload Example -->
<div class="container sample">
<h3>Uppy UI</h3>
<p>
This example uses the third party uppy uploader and UI component
to upload images using an interactive UI. Files are uploaded
asynchronously and the UI provides some progress information.
</p>
<button class="btn btn-primary" id="UppyImageUploader">
<i class="fa fa-picture-o" style="color: limegreen"></i>
<i class="fas fa-upload"></i>
Uppy Uploader Popup UI
</button>
</div>
<link href="~/lib/uppy/dist/uppy.min.css" rel="stylesheet">
<script>
//IE 10+ support via Polyfill for Promises
if (typeof Promise !== "function") {
document.write(
"<script src='https:\/\/cdn.jsdelivr.net\/npm\/es6-promise@4\/dist/es6-promise.min.js'><\/script>");
document.write(
"<script src='https:\/\/cdn.jsdelivr.net\/npm\/es6-promise@4\/dist\/es6-promise.auto.min.js'><\/script>");
}
</script>
<script src="~/lib/uppy/dist/uppy.min.js"></script>
<script>
// global passed into upload script
_uploader = {
uploadUrl: "<%= Process.ResolveUrl([~/UppyUpload.wwd?id=entryId]) %>"
};
var uppy = Uppy.Core({
debug: true,
autoProceed: true,
restrictions: {
allowedFileTypes: ["image/jpeg", "image/png", "image/gif"],
maxNumberOfFiles: 8
}
})
.use(Uppy.Dashboard,
{
trigger: '#UppyImageUploader',
proudlyDisplayPoweredByUppy: false,
inline: false,
width: 550,
height: 350,
disableStatusBar: false,
disableInformer: false,
locale: {
strings: {
browse: "Browse",
dropPasteImport:
'%{browse}, drop or paste files here, or import from one of the locations above. ' +
'Please use images in Landscape (wide) format.'
}
}
})
.use(Uppy.Webcam,
{
target: Uppy.Dashboard,
modes: [
'picture'
],
locale: {
strings: { smile: "take a picture" }
},
countdown: false,
facingMode: "environment"
})
.use(Uppy.XHRUpload,
{
endpoint: _uploader.uploadUrl,
formData: true
});
// All files completed - close dialog
uppy.on('complete',
function () {
setTimeout(function () {
uppy.getPlugin('Dashboard').closeModal();
uppy.reset();
},
1000);
});
// Add Meta Data to the File Upload - EntryId
uppy.on('file-added',
function (file) {
uppy.setFileMeta(file.id,
{
entryId: "ReferenceId"
});
});
// Individual file upload completed
uppy.on('upload-success',
(file, body) => {
var fileEx = uppy.getFile(file.id);
var response = fileEx.response;
var result = response.body;
var imageId = result.imageId;
console.log("file uploaded: " + file.id + " - " + result);
var image = '<img src="' + result.imageUrl + '" />';
$("#ImageList").append(image);
return;
///
var img = $("<img>").prop("src", result.imageUrl);
var div = $('<div class="image-container " style="background: #444;margin: 5px;">');
var divImageContainer =
'<div class="image-icon-container">' +
'<div class="image-rotateleft-icon" data-id="' +
imageId +
'" title="Rotate Left"><i class="fa fa-rotate-left"></i></div>' +
'<div class="image-rotateright-icon" data-id="' +
imageId +
'" title="Rotate Right"><i class="fa fa-rotate-right"></i></div>' +
'<div class="image-delete-icon" data-id="' +
imageId +
'" title="Remove Image"><i class="fa fa-remove" style="color: red"></i></div>' +
'</div>';
div.append(divImageContainer)
.append(img);
// add item to the slider
$("#Slider").slick("slickAdd", div);
setTimeout(function () {
// move to the new slide
var slideCount = $("#Slider")[0].slick.slideCount;
$("#Slider").slick("slickGoTo", slideCount - 1);
},
100);
});
</script>
<!-- End Uppy -->
</div> <!-- end #MainView.container -->
<% section="scripts" %>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="~/lib/toastr/build/toastr.min.css" rel="stylesheet" />
<script src="~/lib/toastr/build/toastr.min.js"></script>
<script>
toastr.options.positionClass = 'toast-bottom-right';
</script>
<% endsection %>