111 lines
3.4 KiB
Plaintext
111 lines
3.4 KiB
Plaintext
<br>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--file">
|
|
<input type="file" id="selector">
|
|
</div>
|
|
|
|
<input class="mdl-button mdl-button--raised mdl-button--colored" type="button" value="Upload"
|
|
onclick="generateSignedURL()">
|
|
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--file" id="status"></div>
|
|
|
|
<s>******************************</s>
|
|
<div action="/photos-upload" class="dropzone" id="photos-upload">
|
|
<div class="fallback">
|
|
<input name="file" type="file" multiple />
|
|
</div>
|
|
|
|
</div>
|
|
<button id="test">TEST</button>
|
|
<input type="hidden" name="imageUrls" id="imageUrls" value="">
|
|
<script type="text/javascript">
|
|
|
|
$(document).ready(function(){
|
|
// Manual dropzone init
|
|
const dropzoneOptions = {
|
|
url: "/photos-upload", //can be a function that returns url ?
|
|
autoProcessQueue:false, //not to upload files automaticly
|
|
method: "put", //or post
|
|
parallelUploads: 1,
|
|
uploadMultiple: false, //or true ??
|
|
addRemoveLinks: true,
|
|
maxFilesize: 2, //MB,
|
|
resizeWidth: 600,
|
|
maxFiles: 10, // ??
|
|
acceptedFiles: "image/*",
|
|
accept: function(file, done){
|
|
console.log('test');
|
|
},
|
|
dictDefaultMessage: `<span class="text-center">
|
|
<h3>Prevuci fotografije ili klikni za dodavanje!</h3>
|
|
</span>`,
|
|
dictResponseError: 'Error uploading file!',
|
|
dictRemoveFile: 'Izbriši '
|
|
};
|
|
var photosUploader = new Dropzone('#photos-upload', dropzoneOptions);
|
|
|
|
$("#test").click(function(e){
|
|
e.preventDefault();
|
|
const addedFiles = photosUploader.files.filter(file => file.status==="added");
|
|
addedFiles.forEach( file => {
|
|
generateSignedURL(file);
|
|
|
|
})
|
|
});
|
|
|
|
});
|
|
|
|
function uuidv4() {
|
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
|
const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
|
|
return v.toString(16);
|
|
});
|
|
}
|
|
|
|
function getFileName(fileName) {
|
|
const encodedFileName = (uuidv4() + fileName).replace(/\s+/g, '');
|
|
return encodedFileName;
|
|
}
|
|
|
|
function upload() {
|
|
var file = $('#selector')[0].files[0];
|
|
uploadFile(file)
|
|
}
|
|
|
|
|
|
async function generateSignedURL(file) {
|
|
const fileName = getFileName(file.name);
|
|
const response = await fetch('/generateSignedURL?filename=' + fileName);
|
|
if (!response.ok) {
|
|
throw new Error('Network response for fetch was not ok.');
|
|
}
|
|
let signedUrl = await response.text();
|
|
signedUrl = signedUrl.replace(/\"/g, "")
|
|
// console.log("Got signedURL: " + c)
|
|
// console.log("Trying to upload " + fileName)
|
|
uploadFile(file, fileName, signedUrl);
|
|
// console.log("Complete")
|
|
return false;
|
|
}
|
|
|
|
function uploadFile(file, fileName, url) {
|
|
$("#status").html('Starting Upload...')
|
|
fetch(url, {
|
|
method: 'PUT',
|
|
headers: new Headers({'content-type': 'image/*'}),
|
|
mode: 'cors',
|
|
body: file
|
|
})
|
|
.then(response => response.text())
|
|
.then (response => {
|
|
return response;
|
|
}
|
|
)
|
|
.catch(error => $("#status").html(error)
|
|
)
|
|
.then(response => {
|
|
$("#status").html('File uploaded successfully: ' + fileName )
|
|
$("#imageUrls").val($("#imageUrls").val()+ fileName+"|");
|
|
});
|
|
|
|
}
|
|
</script> |