Due to the timeout issues, I have converted the download to ajax short calls, and part downloads. Now I need those part CSV files to merge into one using js or jquery.
The code is given below.
$(document).on('click', '#downloadCaratReportAjax', function () {
var statusId = 1;
$.ajax({
url: '/admin-reports/carat/download-report',
type: 'POST',
beforeSend: function () {
$('#spiner-load-please-wait').modal({
backdrop: 'static',
keyboard: false
});
},
cache: false,
async: false,
data: {
statusId: statusId
},
success: function (res) {
var csvFile = new Blob([res]);
var downloadLink = document.createElement("a");
var blob = new Blob(["\ufeff", csvFile]);
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = "draft-campaigns-cost.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
},
error: function (res) {
},
}).promise().done(function () {
var statusId = 2;
$.ajax({
url: '/admin-reports/carat/download-report',
type: 'POST',
beforeSend: function () {
$('#spiner-load-please-wait').modal({
backdrop: 'static',
keyboard: false
});
},
cache: false,
async: false,
data: {
statusId: statusId
},
success: function (res) {
var csvFile = new Blob([res]);
var downloadLink = document.createElement("a");
var blob = new Blob(["\ufeff", csvFile]);
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = "approved-campaign-cost.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
},
error: function (res) {
},
})
}).promise().done(function () {
and upto four promises for individual csvs. Now i need all these csv files into one. I have searched all over the internet and found nothing. Please help.
Related
hi i am using this JavaScript and it sends data correctly but the problem is temp file contains only this when i try to upload at server end
blob:https://sitename.com/03f06abe-6d00-4c4d-86bd-317db4bff616.wav
when i use php move_uploaded_file it writes the data to the given path but instead of real audio file it just writes the link of blob
i want to upload the wav or mp3 file of recorded audio. i have got code from this link and seems everything is working except data is not audio its just blob link when we move_uploaded_file use
Record and upload audio in jquery and php
here is my jquery
jQuery(document).ready(function () {
var $ = jQuery;
var myRecorder = {
objects: {
context: null,
stream: null,
recorder: null
},
init: function () {
if (null === myRecorder.objects.context) {
myRecorder.objects.context = new (
window.AudioContext || window.webkitAudioContext
);
}
},
start: function () {
var options = {audio: true, video: false};
navigator.mediaDevices.getUserMedia(options).then(function (stream) {
myRecorder.objects.stream = stream;
myRecorder.objects.recorder = new Recorder(
myRecorder.objects.context.createMediaStreamSource(stream),
{numChannels: 1}
);
myRecorder.objects.recorder.record();
}).catch(function (err) {});
},
stop: function (listObject) {
if (null !== myRecorder.objects.stream) {
myRecorder.objects.stream.getAudioTracks()[0].stop();
}
if (null !== myRecorder.objects.recorder) {
myRecorder.objects.recorder.stop();
// Validate object
if (null !== listObject
&& 'object' === typeof listObject
&& listObject.length > 0) {
// Export the WAV file
myRecorder.objects.recorder.exportWAV(function (blob) {
var url = (window.URL || window.webkitURL)
.createObjectURL(blob);
// Prepare the playback
var audioObject = $('<audio controls></audio>')
.attr('src', url);
var link = url+'.wav';
$('#audio').attr('value',link);
var blob = new Blob([link], {type: 'audio/wav'});
var reader = new FileReader();
reader.onload = function () {
var b64 = reader.result.replace(/^data:.+;base64,/, '');
};
reader.readAsDataURL(blob);
var form_data = new FormData();
form_data.append('file', blob);
$.ajax({
url: "upload_recording1.php",
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(data) {
}
});
});
}
}
}
};
});
my php is this
if(isset($_FILES['file']) and !$_FILES['file']['error']){
move_uploaded_file($_FILES['file']['tmp_name'], "saved_audio/11.wav");
}
=================================
edit 1 , ajax inside reader.onload same issue
jQuery(document).ready(function () {
var $ = jQuery;
var myRecorder = {
objects: {
context: null,
stream: null,
recorder: null
},
init: function () {
if (null === myRecorder.objects.context) {
myRecorder.objects.context = new (
window.AudioContext || window.webkitAudioContext
);
}
},
start: function () {
var options = {audio: true, video: false};
navigator.mediaDevices.getUserMedia(options).then(function (stream) {
myRecorder.objects.stream = stream;
myRecorder.objects.recorder = new Recorder(
myRecorder.objects.context.createMediaStreamSource(stream),
{numChannels: 1}
);
myRecorder.objects.recorder.record();
}).catch(function (err) {});
},
stop: function (listObject) {
if (null !== myRecorder.objects.stream) {
myRecorder.objects.stream.getAudioTracks()[0].stop();
}
if (null !== myRecorder.objects.recorder) {
myRecorder.objects.recorder.stop();
// Validate object
if (null !== listObject
&& 'object' === typeof listObject
&& listObject.length > 0) {
// Export the WAV file
myRecorder.objects.recorder.exportWAV(function (blob) {
var url = (window.URL || window.webkitURL)
.createObjectURL(blob);
// Prepare the playback
var audioObject = $('<audio controls></audio>')
.attr('src', url);
var link = url+'.wav';
$('#audio').attr('value',link);
var blob = new Blob([link], {type: 'audio/wav'});
var reader = new FileReader();
reader.onload = function () {
var b64 = reader.result.replace(/^data:.+;base64,/, '');
var form_data = new FormData();
form_data.append('file', blob);
$.ajax({
url: "upload_recording1.php",
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(data) {
}
});
};
reader.readAsDataURL(blob);
});
}
}
}
};
});
Hello im new'ish in using and editing api's and im a bit stumped on TUI's Image Editor.
I'm trying to get the image data as a variable so that I can upload it separately to a website instead of just downloading it to the computer.
I am using this person's version of tui. I tried other methods as well but they didn't quite worked out for me.
const imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
includeUI: {
loadImage: {
path: 'img/sampleImage2.png',
name: 'SampleImage',
},
theme: blackTheme, // or whiteTheme
initMenu: 'filter',
menuBarPosition: 'bottom',
},
cssMaxWidth: 700,
cssMaxHeight: 500,
usageStatistics: false,
});
window.onresize = function () {
imageEditor.ui.resizeEditor();
}
document.querySelector('#downloadButton').addEventListener('click', () => {
const myImage = instance.toDataURL();
document.getElementById("url").innerHTML = myImage;
});
</script>
<p id="url">Test</p>
Tried to change the code by using other guides but now it shows this error
Changed code
var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
includeUI: {
loadImage: {
path: 'img/sampleImage2.png',
name: 'SampleImage',
},
theme: blackTheme,
initMenu: 'filter',
menuBarPosition: 'left'
},
cssMaxWidth: 700,
cssMaxHeight: 1000,
usageStatistics: false
});
window.onresize = function() {
imageEditor.ui.resizeEditor();
}
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
jQuery(document).ready(function ($) {
$('.tui-image-editor-download-btn').on('click', function (e) {
var blob = dataURLtoBlob(imageEditor.toDataURL());
var formData = new FormData();
formData.append('croppedImage', blob, 'sampleimage.png');
$.ajax({
url: '/files/upload_files/', // upload url
method: "POST",
data: formData,
success: function (data) {
alert('UPLOADED SUCCESSFULLY, PLEASE TRY AGAIN...');
},
error: function(xhr, status, error) {
alert('UPLOAD FAILED, PLEASE TRY AGAIN...');
}
});
return false;
});
});
</script>
Added in some false statements so that the object form can be sent.
jQuery(document).ready(function ($) {
$('.tui-image-editor-download-btn').on('click', function (e) {
var blob = dataURLtoBlob(imageEditor.toDataURL());
var formData = new FormData();
formData.append('croppedImage', blob, 'sampleimage.png');
$.ajax({
contentType: false, //added
processData: false, //added
url: '/files/upload_files/', // upload url
method: "POST",
data: formData,
success: function (data) {
alert('UPLOADED SUCCESSFULLY, PLEASE TRY AGAIN...');
},
error: function(xhr, status, error) {
alert('UPLOAD FAILED, PLEASE TRY AGAIN...');
}
});
return false;
});
});
I have this code in my .js file and ever since it's been added some other Jquery features have stopped working. Is the issue in how it is written? Thanks!
$(window).load ->
$('a[data-target]').click (e) ->
e.preventDefault()
$this = $(this)
if $this.data('target') == 'Add to'
url = $this.data('addurl')
new_target = "Remove from"
else
url = $this.data('removeurl')
new_target = "Add to"
$.ajax url: url, type: 'put', success: (data) ->
$('.cart-count').html(data)
$this.find('span').html(new_target)
$this.data('target', new_target)
$(window).load ->
$('#mycart .fi-x').click (e) ->
e.preventDefault()
$this = $(this).closest('a')
url = $this.data('targeturl')
$.ajax url: url, type: 'put', success: (data) ->
$('.cart-count').html(data)
$this.closest('.cart-movie').slideUp()
That's coffeescript, you'll likely need to convert it to javascript:
$(window).load(function() {
return $('a[data-target]').click(function(e) {
var $this, new_target, url;
e.preventDefault();
$this = $(this);
if ($this.data('target') === 'Add to') {
url = $this.data('addurl');
new_target = "Remove from";
} else {
url = $this.data('removeurl');
new_target = "Add to";
}
return $.ajax({
url: url,
type: 'put',
success: function(data) {
$('.cart-count').html(data);
$this.find('span').html(new_target);
return $this.data('target', new_target);
}
});
});
});
$(window).load(function() {
return $('#mycart .fi-x').click(function(e) {
var $this, url;
e.preventDefault();
$this = $(this).closest('a');
url = $this.data('targeturl');
return $.ajax({
url: url,
type: 'put',
success: function(data) {
$('.cart-count').html(data);
return $this.closest('.cart-movie').slideUp();
}
});
});
});
getMediaBinary: function() {
var file = document.getElementById('photo').files[0],
reader = new FileReader(),
deferred = $.Deferred();
reader.onloadend = function () {
return deferred.resolve(reader.result);
};
reader.readAsBinaryString(file);
return deferred.promise();
},
getMediaData: function() {
var file = document.getElementById('photo').files[0],
reader = new FileReader(),
deferred = $.Deferred();
reader.onloadend = function () {
return deferred.resolve(reader.result);
};
reader.readAsDataURL(file);
return deferred.promise();
},
uploadMedia: function() {
var formData = new FormData();
$.when(JTWEET.getMediaBinary(), JTWEET.getMediaData() ).then(function(media, media_data) {
formData.append('media', media);
formData.append('media_data', media_data);
return $.ajax({
url: JTWEET.routerUrl + 'https://upload.twitter.com/1.1/media/upload.json',
type: 'POST',
// data: { media: document.getElementById('photo').files[0].name, media_data: JTWEET.getMediaData() },
data: formData,
contentType: false,
processData: false,
success: function() {
console.dir(arguments);
},
error: function() {
console.dir(arguments);
}
});
});
},
I'm getting the next error:
{"errors":[{"code":38,"message":"media parameter is missing."}]}
What am I missing ?
Try checking this one out - https://twittercommunity.com/t/post-media-upload-json-always-returns-media-parameter-is-missing/27962
Figured it out finally. Two things are important here:
1. the parameter name has to be “media”, not “media[]”
2. Do not set the contentType property. It prevents a Content-Type header with the correct boundary value from being automatically created.
A correct options object looks like this:
var options = {
"oAuthServiceName":"twitter",
"oAuthUseToken":"always",
method: "POST",
payload: { "media" : imageblob }
};
I'm developing a small function for an image-upload. This image-upload resizes selected pictures on the client and upload the resized image.
This works, but the browser will hang a lot between "resizes-functionality".
This is my code:
function manageImage(file) {
if (!file) return;
var mime = file.type;
var src = URL.createObjectURL(file);
loadImage.parseMetaData(file, function (data) {
var options = { maxWidth: 1920, maxHeight: 1920, canvas: true };
if (data.exif) {
options.orientation = data.exif.get('Orientation');
}
loadImage(file,
function (img, test) {
loaded++;
var formData = new FormData();
formData.append("image", dataURI);
$.ajax({
url: "/URL",
data: formData,
cache: false,
contentType: false,
processData: false,
async: false,
type: "POST",
success: function (resp) {
}
}).error(function () {
}).done(function () {
if (loaded < checkedFiles.length) {
manageImage(files[loaded]);
} else {
//FINISHED
}
});
},
options);
});
}
manageImage(files[0]);
This funcition is recursive, because i had some problems with the iteration (browser-hang, memory and cpu-usage).
Additionally, i'm using this library for EXIF-Data and correct orientation on mobile phones:
https://github.com/blueimp/JavaScript-Load-Image
With one or two selected pictures (e.g. 7MB) it works perfect, but i want to upload maybe 50 pictures.
It would be great if someone can give me a clue?!