I have an array called listArray() which contains two properties pageNumber and content.
The property content holds the container div html. This is useful because I have a pagination and I don't save that info into the database in real time, instead I insert into an array and only in the end is when I insert into the database.
$container = $('#container');
$.each(listArray, function(index, value){
// So, for each index in array
// it must empty the container
// to receive a new value
$container.empty();
$container.append(value.content); // value.content = pure html
html2canvas($container, {
height: $container.height() + 180,
onrendered: function(canvas) {
var data = canvas.toDataURL('image/png');
var file = dataURLtoBlob(data);
var formObjects = new FormData();
formObjects.append('file', file);
$.ajax({
url: 'ajax_saveImage',
type: 'POST',
data: formObjects,
processData: false,
contentType: false,
});
}
});
});
As you can see my final goal is to save two or three or even more images. My problem is that all the images are being saved BUT with the last index (of the array) content.
Solved.
The solution was not loop, but instead call the function the amount of times needed. The solution came to my mind after looking at this topic Looping html2canvas
var i = 0;
function saveIt(){
$container.empty();
if(i <= listArray.length - 1){
$container.append(listArray[i]['content']);
html2canvas($container, {
height: $container.height() + 180,
letterRendering: true,
onrendered: function(canvas) {
var data = canvas.toDataURL('image/png');
var file = dataURLtoBlob(data);
var formObjects = new FormData();
formObjects.append('file', file);
$.ajax({
url: 'ajax_saveImage',
type: 'POST',
data: formObjects,
processData: false,
contentType: false,
});
i++;
saveIt(); // Important! - call the function again
}
});
}
}
Related
I'm trying to dynamically update the MaxFiles property each time a new image is uploaded/deleted.
By using the following code its not allowing any image to upload instead of limitize it to maxFiles. And it is not taking the value of the variable maxFile, but when i remove maxFile variable And put a number then it works fine.
got source code idea from this Answer.
!function ($) {
"use strict";
var Onyx = Onyx || {};
Onyx = {
init: function() {
var self = this,
obj;
for (obj in self) {
if ( self.hasOwnProperty(obj)) {
var _method = self[obj];
if ( _method.selector !== undefined && _method.init !== undefined ) {
if ( $(_method.selector).length > 0 ) {
_method.init();
}
}
}
}
},
userFilesDropzone: {
selector: 'form.dropzone',
init: function() {
var base = this,
container = $(base.selector);
base.initFileUploader(base, 'form.dropzone');
},
initFileUploader: function(base, target) {
var maxFile = $('.dropzone').attr('data-count');
var onyxDropzone = new Dropzone(target, {
url: ($(target).attr("action")) ? $(target).attr("action") : "data.php", // Check that our form has an action attr and if not, set one here
maxFiles: maxFile,
maxFilesize: 5,
acceptedFiles: ".JPG,.PNG,.JPEG",
// previewTemplate: previewTemplate,
// previewsContainer: "#previews",
clickable: true,
uploadMultiple: false,
});
onyxDropzone.on("success", function(file, response) {
let parsedResponse = JSON.parse(response);
file.upload_ticket = parsedResponse.file_link;
var imagecount = $('.dropzone').attr('data-count');
imagecount = imagecount - 1;
$('.dropzone').attr('data-count', imagecount);
});
},
}
}
}// JavaScript Document
function openImagePopup(id = null) {
$(".upload-images").show();
$.ajax({
url: 'fetch.php',
type: 'post',
data: {id: id},
dataType: 'json',
success:function(response) {
var imagecount = response.counts;
$('.dropzone').attr('data-count', imagecount);
}
});
}
HTML
<form action="data.php" class="dropzone files-container" data-count="">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
<input type="hidden" id="imageId" name="imageId">
</form>
UPDATED ANSWER
Once instanciated, the Dropzone plugin will remains with the same options unless you change the instance inner options directly.
To change options of a Dropzone, you can do this with the following line:
$('.dropzone')[0].dropzone.options.maxFiles = newValue;
$('.dropzone')[0] returns the first dropzone DOM element
.dropzone.options return the underlying plugin instance options of the Dropzone. You can now change any options directly on this object.
In you case, you will have to change the function that initiate the popup like follow
function openImagePopup(id = null) {
$(".upload-images").show();
$.ajax({
url: 'fetch.php',
type: 'post',
data: {id: id},
dataType: 'json',
success:function(response) {
var imagecount = response.counts;
$('.dropzone')[0].dropzone.options.maxFiles = imagecount;
}
});
}
And change the dropzone onSuccess event like this:
onyxDropzone.on("success", function(file, response) {
let parsedResponse = JSON.parse(response);
file.upload_ticket = parsedResponse.file_link;
var imagecount = $('.dropzone')[0].dropzone.options.maxFiles - 1;
$('.dropzone')[0].dropzone.options.maxFiles = imagecount;
});
As you can see, You can also remove the data-count="" attribute on you element and reuse the value from the plugin instance options.maxFiles
After spending a couple of hours of trials and errors I realized using the maxFiles setting from Dropzone is not exactly what is expected in many cases. That setting will only limit uploading files through the explorer / drag&drop, but after reload more files can be uploaded. It also does not reflect any failures to the upload on the serrver side (e.g. file size too big).
Changing the value of the maxFiles setting of an already initialized Dropzone from outside ot it is impossible. For example reseting the number of allowed files after removing some images with ajax will not work.
To really control the number of files that can be uploaded to the server the counting must take place on the server. Then in the Dropzone, in the success function, we should handle the ajax response:
success: function (file, response) {
var response_data = jQuery.parseJSON(response);
if(!response_data.success) {
$(file.previewElement).addClass('dz-error');
$(file.previewElement).addClass('dz- complete');
$(file.previewElement).find('.dz-error-message').text(response_data.error);
}
}
The response is the feedback information provided by the script assigned to the action attribute of the Dropzone <form>, e.g. <form action="/uploader">.
i have a table with multiple rows , Each row has input file and some other text inputs , i want to pass this data to the JsonResult from jquery function , but i face the problem so i always get request files = 0
here is my code
function saveDocumentsData(researcherId) {
debugger;
var document = new Array();
documents = new Array();
$("#docsTable > tbody > tr").each(function () {
var row = $(this);
var id = row.find("span.id").html();
var docId = row.find("span.docId").html();
var docType = $("#docTypes" + id + " option:selected").val();
var docDate = ($("#date" + id).datepicker('getDate'));
var dFileUpload = $("#up" + id).get(0);
var dFiles = dFileUpload.files;
document =
{
"UpdateDate": thisDate, "IsActive": true, "UserId": userId,"JobResearcherId": researcherId,
'JobResearcherDocumentsId': docId, 'JobResearcherDocumentTypesId': docType
, 'DocumentRegisterDate': docDate.toISOString(), 'DocFiles': dFiles[0]
};
documents.push(document);
});
$.ajax({
url: "#Url.Action($"AddResearcherDocuments", $"JobResearcher")",
type: "POST",
contentType: 'application/json',
processData: false,
data: JSON.stringify({
researcherDocuments: documents
}),
success: function (data) {
}
});
}
all data passed truly but inputs files . Any advice
Trying to upload multiple files through ajax but after uploading its redirecting to another blank page automatically, showing only the name of upload files
Following is the html tag
Here is the javascript function
function upload(){
var projectId = document.getElementById("projectId").children[0].value;
var referenceNo = document.getElementById("referenceNo").value;
var createdBy = document.getElementById("initiatedBy").value;
if(projectId == null)
{
alert('Please select project first');
return;
}
var formData = new FormData();
var imageFiles = document.getElementById("fileId"),
filesLength = imageFiles.files.length;
for (var i = 0; i < filesLength; i++) {
document.write(imageFiles.files[i].name);
formData.append('files',imageFiles.files[i]);
}
$("#fileId").val('');
var methodName = 'uploadBPMFiles';
formData.append('refId',referenceNo);
formData.append('projectId',projectId);
formData.append('uploadedBy',createdBy);
formData.append('processType','EOT');
$.ajax({
url: webUrl+methodName,
data: formData,
processData: false,
type: 'POST',
cache:false,
dataType: "json",
contentType: false,
enctype : "multipart/form-data",
success: function(responseData) {
alert('success');
/**console.log('responseData: '+responseData);
console.log('responseData: '+responseData);
var obj = (responseData.downloadURLs);
console.log(obj)
for (var i in obj) {
console.log(obj[i]);
//$("response")World
//$('#response').append('Link');
}
//console.log($('#response').val());
//console.log('end');
**/
}
,
error: function (responseData) {
console.log('POST failed.');
}
});
}
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.
document.write(imageFiles.files[i].name); will clear your document. You have to append a new Element with the names of your files to display them on your site. To do this you can create a new Element using jQuery
$("<span>").text(imageFiles.files[i].name).appendTo("body");
Actually I was writing the uploaded file names in document. So i've removed the below line
document.write(imageFiles.files[i].name);
I need to upload multiple files but one each time asynchronous and show progress for each file. For each file i use separate progress bar with class name according to the list index (ie uploadprogress0,uploadprogress1) my code is this:
var i=0
var formData = new FormData();
formData.append('files[]', toUpload[i]);
ajaxloopreq(formData);
var ajaxloopreq = function (formData) {
$.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
var percentComplete = e.loaded / e.total;
elem.find('.uploadprogress' + i).css({
width: percentComplete * 100 + '%'
});
}
}, false);
return xhr;
},
async: true,
type: 'POST',
data: formData,
cache:false,
contentType: false,
processData: false,
url: '',
success:function(data){
//do something
}
})
i++;
if (i <toUpload.length) {
var formData = new FormData();
formData.append('files[]', toUpload[i]);
ajaxloopreq(formData);
}
}
the result of that is the progress goes only in the last uploadprogress div as a result the progress goes like crazy (parallels progress). Any idea how to fix it?
This is because your upload progress is asynchronous and you variable 'i' is incremented synchronous. So by the time your first file is uploaded the value of 'i' is already equal to the length of the total amount of files.
You can probably fix it by passing along the index with the call to ajaxloopreq:
ajaxloopreq(formata, i);
And use that to find the correct div.
I have one question I'm using this code for editing image src's thats creating js but its not working ...(after click on button jquery creating object and then this function will change src's in this created object )
that code where first creating objects and second will edit image src's
function addToplaylist(title)
{
/* some CODE */
var each = playlistts.join('</span><li><img class="plimg" src="/img/cover.png"><span onclick="playinToplaylist($(this).html());" class="titletrack">');
$("#playlist").html('<li><img onload="this.src = \'/img/playlist/\'+$(this).next(\'span.titletrack\').text()+\'.jpg\'" src="/img/cover.png"><span onclick="playinToplaylist($(this).html());" class="titletrack">' + each);
/* some CODE */
}
$(document).ready(function(){
$("body .plimg").attr("src",
function (index) {
var title = $(this).next('span.titletrack').text();
var array = title.split(' - ');
var track = array[0];
var artist = array[1];
var output;
$.ajax({ //instead of getJSON as the function does not allow configurations.
url: "http://ws.audioscrobbler.com/2.0/?method=track.search",
data: {
track: track,
artist: artist,
api_key: "ca86a16ce762065a423e20381ccfcdf0",
format: "json",
lang: "en",
limit: 1
},
async: false, //making the call synchronous
dataType: 'json', //specifying JSON type
success: function (data) {
output = data.results.trackmatches.track.image[0]["#text"];
}
});
return output;
});
});