I am using the plupload queue widget but it won't work.
Everytime i tries to upload a file larger than 5 mb it went to 100% and gives me a http Error.
When i upload a file from 3 mb this wil work perfectly and after 100% he gives me a green ok sign.
$(function () {
$("#uploader").pluploadQueue({
runtimes: 'html5,html4,flash,gears,silverlight,browserplus',
url: '/Upload/Upload',
max_file_size: '10mb',
post_max_size: '10mb',
upload_max_filesize: '10mb',
chunk_size: '10mb',
unique_names: true,
urlstream_upload:true,
multipart: true,
multiple_queues: false,
filters: [
{title: "Foto's", extensions: "jpg,gif,png"},
{title: "Video's", extensions: "wmv,avi" },
{ title: "Microsoft Office", extensions: "docx,xslx" },
{ title: "Zip files", extensions: "zip" },
],
preinit: {
FileUploaded: function (up, file, response) {
var data = response.response; //$.parseJSON(response.response);
$('<input>').attr({
type: 'hidden',
name: 'fileId' + data,
value: data
}).appendTo('#uploadFinishedForm');
if (data.error == 1) {
uploader.trigger("Error", { message: "'" + data.message + "'", file: file });
console.log('[Error] ' + file.id + ' : ' + data.message);
return false;
}
},
UploadComplete: function (up, files) {
window.setTimeout(function (form) {
// $('#uploadFinishedForm').submit();
$('.nextButton').append('<input type="submit" class="btn btn-large btn-success submit-btn" value="Transfer" />');
}, 2000)
},
Init: function (up, info) {
$('#uploader_container').removeAttr("title");
}
}
});
$('#uploadForm').submit(function (e) {
var uploader = $('#uploader').pluploadQueue();
if (uploader.files.length > 0) {
uploader.bind('StateChanged', function () {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
$('#uploadForm').submit();
}
});
uploader.start();
} else {
$('#uploadInfo').html('Zonder foto\'s valt er niets te uploaden!');
}
return false;
});
Try to decrease the value of the chunk_size (1mb instead of 10mb by example):
chunk_size: '1mb'
Related
I'm designing a log display screen using vue3 and fullcalendar and logs(events) are dynamically loaded into the calendar. 400+ events are rendering successfully in the calendar but this time the month/year toggle buttons are not working and console doesn't show any errors.
here is my calendarOptions and some functions;
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
headerToolbar: {
start: "",
center: "title",
end: "today,prev,next,prevYear,nextYear",
},
eventDidMount: function (info) {
var tooltip = new tippy(info.el, {
content: info.event.extendedProps.description,
});
},
events: [],
eventClick: function (info, event, element) {
if (info.event.extendedProps.description == "Download") {
console.log(
"Downloading event:",
info.event.extendedProps.fileName
);
Notify.create({
color: "info",
position: "bottom-left",
message: "Downloading File: " + info.event.extendedProps.fileName,
icon: "folder_open",
});
const url =
"http://10.10.22.14:3333" + info.event.extendedProps.logUrl;
axios({
url,
method: "GET",
responseType: "blob", // important
})
.then((response) => {
const url = window.URL.createObjectURL(
new Blob([response.data])
);
const link = document.createElement("a");
link.href = url;
link.setAttribute(
"download",
`${info.event.extendedProps.fileName}`
);
document.body.appendChild(link);
link.click();
})
.catch((error) => {
console.error(error.message);
Notify.create({
color: "negative",
position: "bottom-right",
message: error.message,
icon: "report_problem",
});
});
}
if (info.event.extendedProps.description == "Check") {
console.log("Checking event:", info.event.extendedProps.fileName);
Notify.create({
color: "info",
position: "bottom-left",
message: "Checking Logs: " + info.event.extendedProps.fileName,
icon: "safety_check",
});
}
if (info.event.extendedProps.description == "Share") {
console.log("Sharing event:", info.event.extendedProps.fileName);
Notify.create({
color: "info",
position: "bottom-left",
message: "Sharing Logs: " + info.event.extendedProps.fileName,
icon: "share",
});
}
},
}
method of calling dynamic log (events);
getData(Seckey) {
let eventGuid = 0;
this.data = [];
this.log1 = [];
this.log2 = [];
this.events = [];
this.logs = [];
axios
.get(
"http://10.10.22.14:3333/getkamusinglogs?secretkey=" +
Seckey +
"&filter=zip"
)
.then((response) => {
let logs = [];
const data = response.data;
// for (let key in data) {
let yearChildren = data[1]["children"];
for (let year in yearChildren) {
let monthChildren = yearChildren[year]["children"];
for (let month in monthChildren) {
logs = logs.concat(monthChildren[month]["children"]);
// logs = logs.slice(10);
}
}
// }
logs.forEach((item) => {
item.start = item.birthtime.substring(0, 10);
item.url = item.path;
item.size =
item.size > 1048576
? (item.size / 1048576).toFixed(2) + " MB"
: (item.size / 1024).toFixed(2) + " KB";
// console.log(`${item.size}`);
delete item.birthtime;
delete item.path;
this.events.push(
{
id: createEventId(),
title: "A Download",
description: "Download",
logUrl: `${item.url}`,
start: `${item.start}`,
// url: `http://10.10.22.14:3333/${item.url}`,
eventDisplay: "block",
className: " download-btn",
extendedProps: {
size: `${item.size}`,
fileName: `${item.name}`,
logUrl: `${item.url}`,
},
},
{
id: createEventId(),
title: "B Check",
description: "Check",
start: `${item.start}`,
// url: `http://10.10.22.14:3333/${item.url}`,
eventDisplay: "block",
className: "save-btn",
extendedProps: {
size: `${item.size}`,
fileName: `${item.name}`,
logUrl: `${item.url}`,
},
},
{
id: createEventId(),
title: "C Share",
description: "Share",
start: `${item.start}`,
// url: `http://10.10.22.14:3333/${item.url}`,
eventDisplay: "block",
className: "share-btn",
extendedProps: {
size: `${item.size}`,
fileName: `${item.name}`,
logUrl: `${item.url}`,
},
}
);
});
console.log("ALL_LOGS \n", logs);
})
.then(() => {
this.calendarOptions.events = this.events;
console.log("ALL_EVENTS \n", this.events);
})
.catch((error) => {
console.error(error);
Notify.create({
color: "warning",
position: "bottom-right",
message: error.message,
icon: "report_problem",
});
});
function createEventId() {
return String(eventGuid++);
}
},
Since the log records are live via a private api, it is not possible for me to create a live test code snipped, but uploading 400+ log records to the calendar is successful, but the month/year change buttons do not work. if i ridiculously want to view the first 100 of records it renders successfully and no problem
So I am trying to get some data from a table using ajax but this error keeps popping up and I know its related to parameters but I have none of the parameters it says are wrong anyone got any ideas?
I am working in asp.net 6 and am trying to get the data to a controller.
I am currently working in C# and ajax
(function () {
"use strict"
window.onload = function () {
//Reference the DropDownList.
var ddlYears = document.getElementById("ddlYears");
//Determine the Current Year.
var currentYear = (new Date()).getFullYear() + 10;
var less = (new Date()).getFullYear() - 10;
//Loop and add the Year values to DropDownList.
for (var i = less; i <= currentYear; i++) {
var option = document.createElement("OPTION");
option.innerHTML = i;
option.value = i;
ddlYears.appendChild(option);
}
};
var ScopeTable;
$(document).ready(function () {
ScopeTable = $("#tblScopeView").DataTable({
dom: "Bfrtip",
paging: true,
pagingType: "full_numbers",
buttons: [
"csvHtml5"
],
columns: [
{ data: 'WBS' },
{ data: 'Title' },
{ data: 'Rev' },
{ data: 'ScopeStatus' },
{ data: 'BCP' },
{ data: 'BCPApprovalDate' },
{ data: 'Manager' },
{ data: 'ProjectControlManager' },
{ data: 'ProjectControlEngineer' },
{
mRender: function (data, type, row) {
return "<i class='fa fa-edit btnAddEditScope'></i><span> Edit</span >"
},
class: "btnAddEditScope table-button",
orderable: false
},
{
mRender: function (data, type, row) {
return "<i class='fa fa-trash btnDeleteRow'></i><span> Delete</span >"
},
orderable: false,
class: "table-button"
}
],
createdRow: function (row, data, index) {
$(row).attr("data-id", data.WBSNumber);
$(row).attr("data-month", data.FiscalMonth);
$(row).attr("data-year", data.FiscalYear);
}
});
$(document).on("click", ".btnAddEditScope", btnAddEditScope_click);
$("#spnrSave").hide();
});
function btnAddEditScope_click() {
console.log("button clicked")
$.ajax({
url: "Scope/AddEditScope",
type: "GET",
success: function () {
$("#vw_AddEditScope").modal("show");
}
});
}
}());
Error that is being posted
Figured it out just had do adjust my ajax and it worked fine. The tutorial I found is here https://datatables.net/examples/api/multi_filter.html
var ScopeTable;
$(document).ready(function (e) {
ScopeTable = $("#tblScopeView").DataTable({
dom: "Bfrtip",
paging: true,
pagingType: "full_numbers",
buttons: [
"csvHtml5"
],
columns: [
{ data: 'WBS' },
{ data: 'Title' },
{ data: 'Rev' },
{ data: 'ScopeStatus' },
{ data: 'BCP' },
{ data: 'BCPApprovalDate' },
{ data: 'Manager' },
{ data: 'ProjectControlManager' },
{ data: 'ProjectControlEngineer' },
{
mRender: function (data, type, row) {
return "<i class='fa fa-edit btnAddEditScope'></i><span> Edit</span >"
},
class: "btnAddEditScope table-button",
orderable: false
}, {
mRender: function (data, type, row) {
return "<i class='fa fa-trash btnDeleteRow'></i><span> Delete</span >"
},
orderable: false,
class: "table-button"
},
],
createdRow: function (row, data, index) {
$(row).attr("data-id", data.WBSNumber);
$(row).attr("data-month", data.FiscalMonth);
$(row).attr("data-year", data.FiscalYear);
},
error: function (e) {
console.log(e);
}
});
$('#tblScopeView tfoot th').each(function () {
var title = $("#tblScopeView").eq($(this).index()).text();
$(this).html('<input type="text" class="form-control" placeholder="Search ' + title + '" />');
ScopeTable.columns().every(function () {
var dataTableColumn = this;
$(this.footer()).find('input').on('keyup change', function () {
dataTableColumn.search(this.value).draw();
});
});
});
$("#spnrSave").hide();
$(document).on("click", ".btnAddEditScope", btnAddEditScope_click);
});
Sorry, My english is poor.
I'm make some home page, that is gamedict.com.
this home page .Net framework 4.5 and Webform.
Oauth login is work very well. but hello.api(.... 'share'...) is not work.
this page have master page.
<button onclick="OauthLogin('google');" title="Signin to Google" class="zocial icon google"></button>
<button onclick="OauthLogin('facebook');" title="Signin to Facebook" class="zocial icon facebook"></button>
<script type="text/javascript">
function OauthLogin(network) {
hello(network).login();
}
function SignOut(){
var network = $("#hidNetwork").val();
$.ajax({
url: "/AjaxControls/AjaxSignOut.aspx",
type: "POST",
success: function (data) {
hello(network).logout().then(function (){
location.reload();
});
},
error: function (request, status, error) {
alert("getAuthentication code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
}
});
}
hello.on('auth.login', function (r) {
// Get Profile
hello(r.network).api('/me').then(function (p) {
var isAuthenticated = <%=Page.User.Identity.IsAuthenticated.ToString().ToLower() %>;
if (!isAuthenticated) {
$.ajax({
url: "/AjaxControls/AjaxAuthentication.aspx",
type: "POST",
data: {
Name: p.name,
Email: p.email,
AccTocken: p.id,
OauthType: r.network
},
success: function (data) {
location.href = "/Default.aspx";
},
error: function (request, status, error) {
alert("getAuthentication code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
}
});
}else {
$("#hidNetwork").val(r.network);
}
});
});
hello.init({
google: CLIENT_IDS.google,
facebook: CLIENT_IDS.facebook,
twitter: CLIENT_IDS.twitter
}, {
scope: 'email',
redirect_uri: 'http://www.gamedict.com/'
});
</script>
this Code is work.
this is view page
<button onclick="GameShare('google');">Share Google</button>
<button onclick="GameShare('facebook');">Share Facebook</button>
<script type="text/javascript">
$(document).ready(function () {
var isBoardGame = $("#<%=IsBoardGame.ClientID%>").val();
if (isBoardGame == "true") {
$(".BoardNotUse").hide();
}
});
function GameShare(network) {
hello(network).login({ scope: 'publish' }, function () {
alert(network);
// Post the contents of the form
hello.api(network + ':/me/share', 'get', { link: "<%=string.Format("http://{0}{1}",HttpContext.Current.Request.Url.Authority, HttpContext.Current.Request.RawUrl) %>" }, function (r) {
if (!r || r.error) {
alert("Whoops! " + r.error.message);
}
else {
alert("Your message has been published to " + network);
}
});
});
}
</script>
this page "share" is not work.
My site url: http://www.gamedict.com/PC/test11
That page bottom has button for share.
What is my mistake?
Given hello.api( path, method, data ) the value of method needs to be "post" - not "get"
I've got a controller that makes an HTTP Call to the database. It returns the data, verified by the $log command but does not display it in the grid. Here's the code..
Thanks in advance...
eventsApp.controller('TerrController',
function TerrController($scope, territoryData) {
$scope.territory = [];
//$scope.gridOptions = {
// data: 'territory', columnDefs: [
// { field: 'TerritoryID', displayName: 'ID'},
// { field: 'TerritoryDescription', displayName: 'Description' },
// { field: 'RegionID', displayName: 'RegionID' }]
//};
territoryData.getTerritories().then(function (response) {
var tmpData = angular.fromJson(response);
$scope.territory = tmpData;
});
$scope.gridOptions = {
data: 'territory', columnDefs: [
{ field: 'RegionID', displayName: 'RegionID', visible: true },
{ field: 'TerritoryDescription', displayName: 'Description', visible: true },
{ field: 'TerritoryID', displayName: 'ID', visible: true }]
};
});
eventsApp.factory('territoryData', function ($http, $q, $log) {
return {
getTerritories: function () {
var deferred = $q.defer();
$http({ method: 'GET', url: '/Home/GetTerritories' }).
success(function (result, status, headers, config) {
angular.forEach(result, function (c) {
$log.log(c.TerritoryDescription);
});
deferred.resolve(result);
}).
error(function (result, status, headers, config) {
deferred.reject(status)
});
return deferred.promise;
}
}
});
I am uploading some images using plupload and adding those images to div container.And after performing some options I need to upload the edited Images again to the same div from codebehind.
Is that possible to do so?If so how can I modify my code:
This is how I'm trying to upload Images and adding them to div(thumbs):
<script type="text/javascript">
$(function () {
$("#<%=uploader.ClientId%>").plupload({
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: 'Editor.aspx',
max_file_size: '10mb',
max_file_count: 21,
chunk_size: '1mb',
unique_names: true,
rename: true,
dragdrop:true,
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
],
flash_swf_url: 'js/plupload.flash.swf',
silverlight_xap_url: 'js/plupload.silverlight.xap'
});
$('form').submit(function (e) {
var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
if (uploader.files.length > 0) {
uploader.bind('StateChanged', function () {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
$('form')[0].submit();
}
});
uploader.start();
}
else
//alert('You must at least upload one file.');
return false;
});
var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
uploader.bind('FilesAdded', function (up, files) {
var i = up.files.length,
maxCountError = false;
plupload.each(files, function (file) {
setTimeout(function () {
up.start();
}, 100);
if (uploader.settings.max_file_count && i >= uploader.settings.max_file_count) {
$.msgBox({
title: "Info",
content: "Uuh! Please don't put me any more files.<br>Maximum Upload limit is only 20 Images.<br>Rest of the Images will be removed.",
type: "info",
showButtons: true,
opacity: 0.1,
autoClose: false
});
uploader.removeFile(up.files[i - 1]);
} else {
}
});
});
var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
uploader.bind('FileUploaded', function (up, file, res) {
$('#<%=thumbs.ClientId%>').append("<div id=" + file.id + "><a href='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' rel='group1'><img class='clickImage' src='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' width='75' height='50' data-full='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "'/></div>");
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
showStickySuccessToast();
}
});
});
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
if (!length) {
length = Math.floor(Math.random() * chars.length);
}
var str = '';
for (var i = 0; i < length; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
</script>
After editing operation which I am doing it in my codebehind I have saved all those Images to one folder where users can save them.So Now What I want to do Is add all those existed Images on my server folder to be displayed it in the same div(thumbs)where I am adding Images using the uploader at the beginning.
To access a control in code behind, the control must have runat="server". However, it is simpler to use a Panel control instead of a div. A Panel control renders as a div so any client JavaScript will continue to work.
Image NewImage = new Image();
NewImage.ImageUrl= MapPath(#"~\Images\april.jpg");
Panel1.Controls.Add(NewImage);