|
|
@@ -1,70 +1,98 @@
|
|
|
-<!doctype html>
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
<head>
|
|
|
-<script src="https://sdk.amazonaws.com/js/aws-sdk-2.357.0.min.js"></script>
|
|
|
-<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
|
|
-<script type="text/javascript">
|
|
|
-
|
|
|
-var s3 = new AWS.S3({
|
|
|
- apiVersion: 'latest',
|
|
|
- region: 'de',
|
|
|
- endpoint: 'https://s3.de.io.cloud.ovh.net/',
|
|
|
- params: {
|
|
|
- Bucket: 'medere'
|
|
|
- },
|
|
|
- credentials: {
|
|
|
- accessKeyId:'78bd8d437d004457b89b04d803ed4d9e',
|
|
|
- secretAccessKey:'516669c11e974de280515fc5dedf4396'
|
|
|
- }
|
|
|
-});
|
|
|
-
|
|
|
-</script>
|
|
|
-<meta name="referrer" content="same-origin" />
|
|
|
+ <title>File Uploader</title>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ font-family: Arial, sans-serif;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ #list {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-name {
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-size {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #pick {
|
|
|
+ padding: 10px 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ background-color: #007bff;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ #pick:hover {
|
|
|
+ background-color: #0056b3;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <!-- A functional html code-->
|
|
|
- <div>
|
|
|
- <input type="file" id="fileUpload">
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <button onclick="s3upload()">Submit</button>
|
|
|
- </div>
|
|
|
+ <div id="container">
|
|
|
+ <h1>File Uploader</h1>
|
|
|
|
|
|
- <progress max=”100” value=”0”></progress>
|
|
|
+ <form>
|
|
|
+ <div id="list"></div>
|
|
|
+ <input type="button" id="pick" value="Upload">
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
|
|
|
- <!--
|
|
|
- <img src="https://medere.s3.de.io.cloud.ovh.net/medere/sample.jpg?123">
|
|
|
- -->
|
|
|
-
|
|
|
- <script type="text/javascript">
|
|
|
-
|
|
|
- function s3upload() {
|
|
|
- const start = Date.now();
|
|
|
- var files = document.getElementById('fileUpload').files;
|
|
|
- if (files)
|
|
|
- {
|
|
|
- var file = files[0];
|
|
|
- var fileName = file.name;
|
|
|
- var filePath = fileName;
|
|
|
- var fileUrl = 'https://s3.de.io.cloud.ovh.net/' + filePath;
|
|
|
-
|
|
|
- s3.upload({
|
|
|
- Key: filePath,
|
|
|
- Body: file,
|
|
|
- ACL: 'public-read'
|
|
|
- }, function(err, data) {
|
|
|
- if(err) {
|
|
|
- console.log('error' + err);
|
|
|
- }
|
|
|
- const end = Date.now();
|
|
|
- const sec = (end - start) / 1000;
|
|
|
- alert(`File caricato in : ${sec} secondi`);
|
|
|
- }).on('httpUploadProgress', function (progress) {
|
|
|
- var uploaded = progress.loaded / progress.total;
|
|
|
- $("progress").attr('value', uploaded);
|
|
|
- });
|
|
|
- }
|
|
|
- };
|
|
|
- </script>
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/plupload/3.1.5/plupload.full.min.js"></script>
|
|
|
+ <script>
|
|
|
+ window.onload = () => {
|
|
|
+ var list = document.getElementById("list");
|
|
|
+
|
|
|
+ var uploader = new plupload.Uploader({
|
|
|
+ runtimes: "html5",
|
|
|
+ browse_button: "pick",
|
|
|
+ url: "chunk.php",
|
|
|
+ chunk_size: "5mb",
|
|
|
+ init: {
|
|
|
+ PostInit: () => list.innerHTML = "<div>Ready</div>",
|
|
|
+ FilesAdded: (up, files) => {
|
|
|
+ plupload.each(files, file => {
|
|
|
+ let row = document.createElement("div");
|
|
|
+ row.className = "file-row";
|
|
|
+ row.id = file.id;
|
|
|
+ row.innerHTML = `
|
|
|
+ <div class="file-name"><a href="uploads/${file.name}">${file.name}</a></div>
|
|
|
+ <div class="file-size">(${plupload.formatSize(file.size)})</div>
|
|
|
+ <strong></strong>
|
|
|
+ `;
|
|
|
+ list.appendChild(row);
|
|
|
+ });
|
|
|
+ uploader.start();
|
|
|
+ },
|
|
|
+ UploadProgress: (up, file) => {
|
|
|
+ document.querySelector(`#${file.id} strong`).innerHTML = `${file.percent}%`;
|
|
|
+ },
|
|
|
+ Error: (up, err) => console.error(err)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ uploader.init();
|
|
|
+ };
|
|
|
+ </script>
|
|
|
</body>
|
|
|
-</html>
|
|
|
+</html>
|