I've integrated DropzoneJs into a VueJs application im putting together. It's running great in both Chrome and Firefox but for some reason the app is very sad in safari. I'm getting the following error in Safari: Attempted to redefine property 'filesizeBase'.
My Vue Component Looks as Follows:
var Dropzone = require('../../vendor/dropzone.min.js');
module.exports = {
template: require('./views/files.html'),
props: ['files', 'is-complete'],
data: function()
{
return {
reverse: -1,
uploading: false,
token: document.querySelector('#token').getAttribute('value'),
project: document.querySelector('#project').getAttribute('value'),
}
},
methods: {
uploadFile: function(e)
{
e.preventDefault();
var self = this;
this.uploading = !this.uploading;
if(this.uploading)
{
var myDropzone = new Dropzone("form#mediaUpload", {
init: function() {
this.on("complete", function(file) {
setTimeout(function()
{
self.uploading = false;
}, 5000);
});
this.on("success", function(file, uploadedFile) {
self.files.push(uploadedFile);
});
},
paramName: "file",
maxFilesize: 250, // MB
maxFiles: 15,
uploadMultiple: false,
});
}
},
deleteFile: function(file, index)
{
this.files.pop(index);
this.$nextTick(function()
{
this.$http.post('/upload/'+file.id+'/delete');
});
},
},
components: {
fileSize: require('./FileSize'),
humanTime: require('../Helpers/HumanTime'),
mimeType: require('../Helpers/MimeType'),
}
}
Related
Trying to use Uppy JS lib to upload file throug Laravel. Setted up simple upload form with there params:
const options = {
endpoint: '/parts/image-upload',
headers: {
'X-XSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
},
};
uppyDashboard.use(XHRUpload, options);
And on the backend I'm getting
Illuminate\Contracts\Encryption\DecryptException: The payload is invalid. in file /Users/rd/Projects/xxx/vendor/laravel/framework/src/Illuminate/Encryption/Encrypter.php on line 195
It's like Laravel trying to decrypt something what is already decrypted, anyway I'm in dead end.
You can this code
var uppy = new Uppy.Core({
// debug: (...args) => console.debug(`[Uppy] [${getTimeStamp()}]`, ...args),
// warn: (...args) => console.warn(`[Uppy] [${getTimeStamp()}]`, ...args),
// error: (...args) => console.error(`[Uppy] [${getTimeStamp()}]`, ...args),
autoProceed: true,
restrictions: {
maxFileSize: 2000000,
maxNumberOfFiles: 10,
minNumberOfFiles: 1,
allowedFileTypes: ['image/*']
}
});
uppy.use(Uppy.Dashboard, {
target: ".UppyDragDrop",
inline: true,
showLinkToFileUploadResult: false,
showProgressDetails: true,
hideCancelButton: true,
hidePauseResumeButton: true,
hideUploadButton: true,
proudlyDisplayPoweredByUppy: false,
locale: {} });
Here's how I implemented it
<script type="text/javascript">
$(document).ready(function() {
$('[id*=drag-drop-area]').each(function(){
var listing_id = $(this).attr('class');
var uppy = new Uppy.Core({
allowMultipleUploadBatches: true,
restrictions: {
maxFileSize: 100000000,
// maxNumberOfFiles: 8,
minNumberOfFiles: 1,
allowedFileTypes: ['image/*', '.jpg', '.jpeg', '.png']
}
})
.use(Uppy.Dashboard, {
inline: true,
target: "#"+$(this).attr('id')+""
})
.use(Uppy.XHRUpload, {
endpoint: 'upload',
formData: true,
bundle: true,
headers: {
'X-CSRF-Token': " {{ csrf_token() }} "
},
});
uppy.on('upload-success', (file, response) => {
response.body.data.forEach(function (item, index) {
console.log(listing_id);
var token =
$('meta[name="csrftoken"]').attr('content');
$.ajax({
url: 'attach',
type: 'POST',
data: { '_token' : token, item, listing_id},
success: function(response)
{
console.log('Updated');
},
error:function (e) {
console.log(e);
}
});
});
window.location.reload();
});
});
});
</script>
You create the endpoint which is the route name and attach at
endpoint: ""
Then you return a response which you grab and do whatever on the last section.
uppy.on('upload-success', (file, response) => {
response.body.data.forEach(function (item, index) {
console.log(listing_id);
var token =
$('meta[name="csrftoken"]').attr('content');
$.ajax({
url: 'attach',
type: 'POST',
data: { '_token' : token, item, listing_id},
success: function(response)
{
console.log('Updated');
},
error:function (e) {
console.log(e);
}
});
});
window.location.reload();
});
I hope this helps
The Axios response.data is okay. But when I use the markers variable in rendering the markers is undefined. I am a newbie and badly need your help for our project.
I am trying to render the markers from the link described in the code, but some I placed the axios request in the created, and in the mounted is the rendering of the leaflet map.
Screenshot of the code
<script>
/** Script Vue JS **/
new Vue({
el: '#view-map',
data: {
map,
map_link:'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
markerOption: {
clickable: true,
draggable: false
},
mapOptions: {
center: [7.3087, 125.6841],
zoom:8
},
markers:[], //[{"image":"GMS-4-0112018-467_1527086274.jpg","derivation_code":"GMS-4-0112018-467","sample_description":"test 1 test is a test that test will be tested in test","latitude":"6.428152","longitude":"125.317857"},{"image":"GMS-1-0112018-963_1527134301.jpg","derivation_code":"GMS-1-0112018-963","sample_description":"nalaya lang","latitude":"7.311647","longitude":"125.636461"}],
selectedSample: [],
},
methods: {
getMarkers: function (){
axios.get('http://127.0.0.1:8000/marker').then(response => {
this.markers = response.data;
}).catch(error =>( console.log(error) ));
},
renderMarker: function(){
for ( i = 0; i < this.markers.length; i++){
console.log(this.markers[i]);
var marker = new L.Marker([this.markers[i].latitude, this.markers[i].longitude], this.markerOption);
marker.addTo(this.map);
marker.bindPopup(`
<h6 class="display-6">${this.markers[i].derivation_code}</h6>
<img src="storage/images/${this.markers[i].image}" style="height:100%;width:100%">
`);
}
},
markerClicked: function(mrkr_data){
this.selectedSample = mrkr_data.derivation_code;
console.log(this.selectedSample);
}
},
created: function(){
this.getMarkers();
},
mounted: function(){
this.map = new L.map('map', this.mapOptions);
this.map.addLayer(new L.TileLayer(this.map_link));
console.log(this.markers);
this.renderMarker();
}
});
</script>
I solved my problem. I treated the fetching of data in Axios get property as a Synchronous but it is an Asynchronous. Base in my previous code, I accessed the data when it is not updated so the value is blank.
/** Script Vue JS **/
new Vue({
el: '#view-map',
data: {
map,
map_link:'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
markerOption: {
clickable: true,
draggable: false
},
mapOptions: {
center: [7.3087, 125.6841],
zoom:8
},
markers:[], //[{"image":"GMS-4-0112018-467_1527086274.jpg","derivation_code":"GMS-4-0112018-467","sample_description":"test 1 test is a test that test will be tested in test","latitude":"6.428152","longitude":"125.317857"},{"image":"GMS-1-0112018-963_1527134301.jpg","derivation_code":"GMS-1-0112018-963","sample_description":"nalaya lang","latitude":"7.311647","longitude":"125.636461"}],
selectedSample: [],
},
created: function(){
this.getMarkers();
},
mounted: function(){
this.map = new L.map('map', this.mapOptions);
this.map.addLayer(new L.TileLayer(this.map_link));
},
watch: {
markers: function(){
this.renderMarker();
}
},
methods: {
getMarkers: function (){
axios.get('http://127.0.0.1:8000/marker').then(response => {
this.markers = response.data;
console.log(this.markers);
}).catch(error =>( console.log(error) ));
console.log(this.markers);
},
renderMarker: function(){
for ( i = 0; i < this.markers.length; i++){
console.log(this.markers[i]);
var marker = new L.Marker([this.markers[i].latitude, this.markers[i].longitude], this.markerOption);
marker.addTo(this.map);
marker.bindPopup(`
<h6 class="display-6">${this.markers[i].derivation_code}</h6>
<img src="storage/images/${this.markers[i].image}" style="height:100%;width:100%">
`);
}
},
markerClicked: function(mrkr_data){
this.selectedSample = mrkr_data.derivation_code;
console.log(this.selectedSample);
}
},
});
i am quite new in vuejs, so cant find out what am i doing wrong. This is my script part for a vue component:
<script>
export default {
name: 'product-main-info',
components: {
vueDropzone: vue2Dropzone
},
props: {
propId: String,
},
data() {
return {
images: {},
dropzoneOptions: {
url: '/uploadImg',
thumbnailWidth: 150,
maxFilesize: 2.0,
addRemoveLinks: true,
acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
headers: { "X-CSRF-Token": document.head.querySelector('meta[name="csrf-token"]').content },
params: { id: this.propId },
init: function() {
var self = this;
self.on("success", function (file) {
this.$http.get('/getProductImages/' + this.propId)
.then(function(response) {
this.images = response.data;
});
});
}
}
}
},
methods: {
},
created() {
this.$http.get('/getProductImages/' + this.propId)
.then(function(response) {
console.log(response.data);
this.images = response.data;
});
}
}
</script>
I am trying to get new refreshed data after successful image upload, but all i get is:
app.js:16014 Uncaught TypeError: Cannot read property 'get' of undefined
All i need is to refresh my data, but i cant find out how to do this in a right way. Help if possible
After following the solution in a previous post, I have found that the jqGrid refresh after add/edit with the inlineNav using the successfunc does not work if extraparams is present.
Here's my code:
var editOptions = {
keys: true,
successfunc: function () {
alert('success');
var $self = $(this);
setTimeout(function () {
alert('refreshing');
$self.setGridParam({ datatype: 'json' });
$self.trigger("reloadGrid");
}, 500);
}
.jqGrid('inlineNav', {
addParams: {
useDefValues: true,
addRowParams:
{
editOptions,
extraparam: {
userId: function () {
return currentUserId;
},
companyId: function () {
return currentCompanyId;
}
}
}
},
editParams: {
editOptions
}
I have tried different combinations of where the editOptions is placed, but no luck.
You placed extraparam in the wrong place. It should be the property of editOptions.
UPDATED:
var reloadGridFunc = function () {
alert('success');
var $self = $(this);
setTimeout(function () {
alert('refreshing');
$self.setGridParam({ datatype: 'json' });
$self.trigger("reloadGrid");
}, 500);
};
.jqGrid('inlineNav', {
addParams: {
useDefValues: true,
addRowParams: {
// here are editOption used for Add
keys: true,
successfunc: reloadGridFunc,
extraparam: {
userId: function () {
return currentUserId;
},
companyId: function () {
return currentCompanyId;
}
}
}
},
editParams: {
// here are editOption used for Edit
keys: true,
successfunc: reloadGridFunc
}
});
Ok - I found what I was doing wrong. It was actually in both parts of my code above. First, I changed:
function successFunc() {
var $self = $(this);
setTimeout(function () {
$self.setGridParam({ datatype: 'json' });
$self.trigger("reloadGrid");
}, 500);}
I got rid of the var editOptions, which included the keys and successfunc parameters inside it. This apparently was conflicting with the successfunc call in the addParams part of the inlineNav method. So here's what the parameters section looks like now:
.jqGrid('inlineNav', {
addParams: {
addRowParams:
{
keys: true,
extraparam:
{ userId: currentUserId,
companyId: currentCompanyId
},
successfunc: successFunc
}
},
editParams: {
successfunc: successFunc
}
});
So now when I either add or edit an inline record, the refresh happens when the successfunc is called. Hope this helps someone else in the future. Thanks #Oleg for the initial help with this.
I need to setup my datasource to use localForage to manage my offline data storage.
The problem I'm having is that localForage is asynchronous by nature, only allowing us to use a callback or a promise to retrieve data.
This is how my code is set-up:
(function () {
'use strict';
var serviceId = 'employeeDataSource';
angular.module('app').factory(serviceId, function () {
var crudServiceBaseUrl = 'Data/Employees';
var dataSource = new kendo.data.DataSource({
type: "odata",
offlineStorage: {
getItem: function () {
localforage.getItem('employees-key').then(function (value) {
console.log(value);
return JSON.parse(value);
});
},
setItem: function (item) {
if (item.length > 0) {
localforage.setItem("employees-key", JSON.stringify(item));
}
}
},
transport: {
read: {
url: crudServiceBaseUrl + "/",
dataType: "json"
},
update: {
url: function (data) {
return crudServiceBaseUrl + "(guid'" + data.EmployeeId + "')";
}
},
create: {
url: crudServiceBaseUrl
},
destroy: {
url: function (data) {
return crudServiceBaseUrl + "(guid'" + data.EmployeeId + "')";
}
}
},
batch: false,
pageSize: 5,
serverPaging: true,
schema: {
data: function (data) {
return data.value;
},
total: function (data) {
return data['odata.count'];
},
model: {
id: "EmployeeId",
fields: {
EmployeeId: { editable: false, nullable: true },
Name: { validation: { required: true } },
Email: { validation: { required: true } },
IsManager: { type: "boolean" },
MaxHolidaysPerYear: { editable: false, type: "number", validation: { min: 0, required: true } },
HolidaysLeftThisYear: { type: "number", validation: { min: 0, required: true } }
}
}
},
error: function (e) {
if (e.xhr.responseText !== undefined) {
console.log(e.xhr.responseText);
}
}
});
dataSource.online(navigator.onLine);
$(window).on("offline", function () {
dataSource.online(false);
});
$(window).on("online", function () {
dataSource.online(true);
});
return dataSource;
});
})();
When off-line, the getItem gets called, then the setItem gets call as well with an empty array, hence the:
if (item.length > 0) {
localforage.setItem("employees-key", JSON.stringify(item));
}
When the promise finally returns the off-line data (with the correct values I expected), the Grid displays no results.
This behaviour is presumably because of the promise ?
I tried the same thing with sessionStorage and its worked perfectly... i.e.:
getItem: function () {
return JSON.parse(sessionStorage.getItem("employees-key"));
},
setItem: function (item) {
sessionStorage.setItem("employees-key", JSON.stringify(item));
}
What can I do to get around this?
Just got a heads-up from Telerik
There is an issue logged in their GitHub repo about the same problem.
You can keep track on the progress here:
https://github.com/telerik/kendo-ui-core/issues/326