Real estate input clean up.
This commit is contained in:
@@ -1,111 +1,12 @@
|
||||
<br>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--file">
|
||||
<input type="file" id="selector">
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<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);
|
||||
<input type="hidden" name="imageUrls" id="imageUrls">
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user