In iOS webview I have implemented file uploading:
function upload(blobOrFile) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function(e) { ... };
xhr.send(blobOrFile);
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
var blob = this.files[0];
const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
const SIZE = blob.size;
var start = 0;
var end = BYTES_PER_CHUNK;
while(start < SIZE) {
upload(blob.slice(start, end));
start = end;
end = start + BYTES_PER_CHUNK;
}
}, false);
})();
This JavaScript work well in all browser, but in iOS webview it send empty POST ?
Before send I tried to alert() blob length was correct, but in server side I get 0 content length. What can cause this problem and is possible to fix this from JS side ?
Related
I'm setting up multi file upload in client-side.Below are the steps, I need to done:
User will upload multiple files at once. Ex: 5 files at a time.
Each file size is vary and large files. Ex: File1.size = 800mb
Slice that large files into chunks. Ex: chunk_size = 50mb
Each chunk will be send to backend and will get response from it.
I'm able to do it for single file upload, like splicing large file chunks.But I'm unable to do it for multiple files uploaded at a time.
Below is the code I tried:
var that = this;
var files = that.files || [];
var url = that.config.url;
var fileKeyUpload = that.config.fileKeyUpload;
for(var i=0; i < files.length; i++) { //multiple files loop
var start = 0; //chunk start as 0
var bytes_per_chunk = 52428800; // 50 MB per chunk
var blob = files[i];
var size = blob.size;
var end = bytes_per_chunk;
var getStatus = function() {
var nextChunk = start + bytes_per_chunk;
var percentage = nextChunk > size ? 100 : Math.round((start / size) * 100); // calculating percentage
uploadFile(blob.slice(start, end), files[key], start, percentage).then(function() {
if(start < size && bytes_per_chunk < size){
start = end;
end = start + bytes_per_chunk;
start < size ? getStatus() : null;
}
});
}
return getStatus();
}
function uploadFile(blob, file, offset, completedPrecentile) {
return new Promise(function(resolve) {
var xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.setRequestHeader("Accept", "*/*");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
if(that.config.hasOwnProperty("onFileUploadComplete")){
that.config.onFileUploadComplete(xhr, true, completedPrecentile, file);
resolve();
}
}
};
xhr.send(blob);
});
};
This is what I tried, it works for single file, Any help on how to achieve multiple file upload with slicing large files into chunks.
Unable to post working demo since local api is used.
I am using web workers for uploading file and I am sending the file in the form of formData object as got to know that the web worker doesn't have access to DOM I used formdata-polyfill in place of default FormData , it is throwing this error and I don't know how to use this polyill properly.
here is my code,
//trying to send the formdata-polyfill object to worker
require('formdata-polyfill');
let data = new FormData();
data.append('server-method', 'upload');
data.append('file', event.target.files[0]);
// let data = new FormData(event.target.files[0]);
if (this.state.headerActiveTabUid === '1')
this.props.dispatch(handleFileUpload({upload: 'assets', data}));
//worker.js
var file = [], p = true, url,token;
function upload(blobOrFile) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);//add url to upload
xhr.setRequestHeader('Authorization', token);
xhr.onload = function(e) {
};
xhr.send(blobOrFile);
}
function process() {
for (var j = 0; j <file.length; j++) {
var blob = file[j];
const BYTES_PER_CHUNK = 1024 * 1024;
// 1MB chunk sizes.
const SIZE = blob.size;
var start = 0;
var end = BYTES_PER_CHUNK;
while (start < SIZE) {
if ('mozSlice' in blob) {
var chunk = blob.mozSlice(start, end);
} else {
var chunk = blob.slice(start, end);
}
upload(chunk);
start = end;
end = start + BYTES_PER_CHUNK;
}
p = ( j === file.length - 1);
self.postMessage(blob.name + " Uploaded Succesfully");
}
}
self.addEventListener('message', function(e) {
url = e.data.url;
token = e.data.id;
file.push(e.data.files);
if (p) {
process();
}
});
I've got an array of URLs [URL1, URL2, URL3,...] : each element is a link to one of the chunks of the same file. Each chunk is separately encrypted, with the same key as all the other chunks.
I download each chunk (in a forEach function) with a XMLHttpRequest. onload :
each chunk is first decrypted
then each chunk is converted to an ArrayBuffer (source)
each ArrayBuffer is pushed to an array (source)
when the three first steps are done for each chunk (callback by a var incremented on step#1 === the array.length), a blob is constructed with the array
the blob is saved as file with FileReader API & filesaver.js
If it's a one chunk's file, everything works fine.
But with multiple chunks, steps #1 & #2 are ok, but only the last ArrayBuffer seems to be pushed to the array. What am I missing?
Below my code
// var for incrementation in forEach funtion
var chunkdownloaded = 0;
// 'clearfileurl' is the array of url's chunks :[URL1, URL2, URL3,...]
clearfileurl.forEach(function(entry) {
var xhr = new XMLHttpRequest();
var started_at = new Date();
xhr.open('GET', entry, true);
xhr.responseType = 'text';
// request progress
xhr.onprogress = function(pe) {
if (pe.lengthComputable) {
downloaderval.set((pe.loaded / pe.total) * 100);
}
};
// on request's success
xhr.onload = function(e) {
if (this.status == 200) {
chunkdownloaded+=1;
var todecrypt = this.response;
// decrypt request's response: get a dataURI
try {
var bytesfile = CryptoJS.AES.decrypt(todecrypt.toString(), userKey);
var decryptedfile = bytesfile.toString(CryptoJS.enc.Utf8);
} catch(err) {
console.log (err);
return false;
}
//convert a dataURI to a Blob
var MyBlobBuilder = function() {
this.parts = [];
}
MyBlobBuilder.prototype.append = function(dataURI) {
//function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
var byteString = atob(dataURI.split(',')[1]);
// separate out the mime component
// var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
this.parts.push(ab);
console.log('parts', this.parts)
this.blob = undefined; // Invalidate the blob
}
MyBlobBuilder.prototype.getBlob = function() {
if (!this.blob) {
console.log (this.parts);
this.blob = new Blob(this.parts);
}
return this.blob;
};
var myBlobBuilder = new MyBlobBuilder();
myBlobBuilder.append(decryptedfile);
// if all chunks are downloaded
if (chunkdownloaded === clearfileurl.length) {
// get the blob
var FinalFile = myBlobBuilder.getBlob();
// launch consturction of a file with'FinalFile' inside FileReader API
var reader = new FileReader();
reader.onload = function(e){
// build & save on client the final file with 'file-saver' library
var FileSaver = require('file-saver');
var file = new File([FinalFile], clearfilename, {type: clearfiletype});
FileSaver.saveAs(file);
};
reader.readAsText(FinalFile);
} else {
console.log('not yet');
}
}
};
// sending XMLHttpRequest
xhr.send();
});
You need to take out the declaration of MyBlobBuilder, try this:
// var for incrementation in forEach funtion
var chunkdownloaded = 0;
//convert a dataURI to a Blob
var MyBlobBuilder = function() {
this.parts = [];
}
MyBlobBuilder.prototype.append = function(dataURI, index) {
//function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
var byteString = atob(dataURI.split(',')[1]);
// separate out the mime component
// var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
this.parts[index] = ab;
console.log('parts', this.parts)
this.blob = undefined; // Invalidate the blob
}
MyBlobBuilder.prototype.getBlob = function() {
if (!this.blob) {
console.log (this.parts);
this.blob = new Blob(this.parts);
}
return this.blob;
};
var myBlobBuilder = new MyBlobBuilder();
// 'clearfileurl' is the array of url's chunks :[URL1, URL2, URL3,...]
clearfileurl.forEach(function(entry, index) {
var xhr = new XMLHttpRequest();
var started_at = new Date();
xhr.open('GET', entry, true);
xhr.responseType = 'text';
// request progress
xhr.onprogress = function(pe) {
if (pe.lengthComputable) {
downloaderval.set((pe.loaded / pe.total) * 100);
}
};
// on request's success
xhr.onload = function(e) {
if (this.status == 200) {
chunkdownloaded+=1;
var todecrypt = this.response;
// decrypt request's response: get a dataURI
try {
var bytesfile = CryptoJS.AES.decrypt(todecrypt.toString(), userKey);
var decryptedfile = bytesfile.toString(CryptoJS.enc.Utf8);
} catch(err) {
console.log (err);
return false;
}
myBlobBuilder.append(decryptedfile, index);
// if all chunks are downloaded
if (chunkdownloaded === clearfileurl.length) {
// get the blob
var FinalFile = myBlobBuilder.getBlob();
// launch consturction of a file with'FinalFile' inside FileReader API
var reader = new FileReader();
reader.onload = function(e){
// build & save on client the final file with 'file-saver' library
var FileSaver = require('file-saver');
var file = new File([FinalFile], clearfilename, {type: clearfiletype});
FileSaver.saveAs(file);
};
reader.readAsText(FinalFile);
} else {
console.log('not yet');
}
}
};
// sending XMLHttpRequest
xhr.send();
});
*edit I also updated the append function to ensure that the files are in the correct order
BackGround
Currently working on a webpage which must work for both Mac OS and Windows. Currently. I have tested this code on IE and it works great, however when it comes to Mac OS it seems to now execute correctly as how it does with Windows.
Problem
I isolated the issue which is causing the problem in Mac OS. This call out to a Sharepoint Doc lib, which in turn returns a byte array that I later create a Base64 string is causing the issue. I have read the doc on the compatibility of XMLHttpRequest with Safari in the below and shows that it is compatible. Not sure why it work so well in IE but does not work in Safari.
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
Code
function GetImgB64(relativeUrl) {
var defferedVarVlalue = jQuery.Deferred();
var b64Img;
$.when(TokenForSharePoint()).then(function (sharepointToken) {
var url = "https://<tenant>.com/sites/<site>/_api/web/GetFileByServerRelativeUrl('" + relativeUrl + "')/$value";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', url, false);
xmlhttp.setRequestHeader("Authorization", "Bearer " + sharepointToken);
xmlhttp.responseType = 'arraybuffer';
xmlhttp.onloadend = function (e) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var arr = new Uint8Array(this.response);
var raw = '';
var i, j, subArray, chunk = 5000;
for (i = 0, j = arr.length; i < j; i += chunk) {
subArray = arr.subarray(i, i + chunk);
raw += String.fromCharCode.apply(null, subArray);
}
b64Img = btoa(raw);
}
else {
errorResults.Location = url;
errorResults.ErrorCode = xmlhttp.status;
errorResults.ErrorResponseText = xmlhttp.statusText;
errorResults.ErrorMessage = "Unable to Load Image",
ErrorHandler(errorResults);
}
};
xmlhttp.onerror = function (error) {
MessageWindow();
};
xmlhttp.send();
return defferedVarVlalue.resolve(b64Img);
});
return defferedVarVlalue.promise();
};
also my script doesn't work with safari
I am trying to load and play an audio file in chrome successfully, but I can't play it backwards:
audio = new Audio('http://mathweirdo.com/bingo/audio/buzzer.mp3');
audio.playbackRate = -1;
audio.currentTime = audio.duration; // I have tried ommiting this line
audio.play()
This produces no sound and only one timeupdate event firing.
Using negative values is currently not supported so you will have to load and reverse the buffers manually.
Note that this will require CORS enabled audio source (the one in the example isn't, so I couldn't set up a live demo). Here is one way of doing this:
Load the data via AJAX (this requires CORS enabled for the audio file)
Let the browser parse the buffer into an audio buffer
Get the channel buffer(s) (references)
Reverse the buffer(s)
Initialize the audio buffer and play
This will of course limit you some as you cannot use the Audio element anymore. You will have to support the features you want by adding controls and code for them manually.
// load audio as a raw array buffer:
fetch("http://mathweirdo.com/bingo/audio/buzzer.mp3", process);
// then process the buffer using decoder
function process(file) {
var actx = new (window.AudioContext || window.webkitAudioContext);
actx.decodeAudioData(file, function(buffer) {
var src = actx.createBufferSource(), // enable using loaded data as source
channel, tmp, i, t = 0, len, len2;
// reverse channels
while(t < buffer.numberOfChannels) { // iterate each channel
channel = buffer.getChannelData(t++); // get reference to a channel
len = channel.length - 1; // end of buffer
len2 = len >>> 1; // center of buffer (integer)
for(i = 0; i < len2; i++) { // loop to center
tmp = channel[len - i]; // from end -> tmp
channel[len - i] = channel[i]; // end = from beginning
channel[i] = tmp; // tmp -> beginning
}
}
// play
src.buffer = buffer;
src.connect(actx.destination);
if (!src.start) src.start = src.noteOn;
src.start(0);
},
function() {alert("Could not decode audio!")}
)
}
// ajax loader
function fetch(url, callback) {
var xhr = new XMLHttpRequest();
try {
xhr.open("GET", url);
xhr.responseType = "arraybuffer";
xhr.onerror = function() {alert("Network error")};
xhr.onload = function() {
if (xhr.status === 200) callback(xhr.response);
else alert(xhr.statusText);
};
xhr.send();
} catch (err) {alert(err.message)}
}