I'm building a "chunked" file upload using simple XHR requests in an angularjs environment. After a random amount of time or uploaded chunks all upload-requests fail in chrome. The xhr.onerror outputs an "net::ERR_FILE_NOT_FOUND" error.
Following suggestions from other posts I disabled all chrome extensions but nothing changed.
var formData = new FormData();
formData.append('data', blob);
var request = new XMLHttpRequest();
request.open('POST', url, true);
request.upload.onload = function(res) {
//success
}
request.upload.onerror = function(error) {
//error
};
request.send(formData);
Other posts also suggested a connection to the uploaded file size (between 200-500mb) but the used chunk-size is only 1 mb.
Anybody else experienced problems like that?
Related
In a chrome extension I have a url stored as ctx.srcUrl. I am trying to upload the file that the URL points to onto a server. I can upload a file object using XHR with:
function uploadFile(file) {
var xhr = new XMLHttpRequest()
var formData = new FormData()
formData.append('upload', file)
xhr.open('POST', 'https://endpoint.com/upload')
xhr.withCredentials = true
xhr.send(formData)
}
Where file is a Javascript File object (https://developer.mozilla.org/en-US/docs/Web/API/File). I can also download an object using:
function downloadFile() {
const request = new XMLHttpRequest()
request.open('GET', ctx.srcUrl, true)
request.responseType = 'blob'
request.onload = function() {
// response is stored in `request.response`
}
request.send()
}
I'm struggling to work out how to link them up in an efficient manner however, preferably without keeping all of the response in memory at once (using streaming)? The best way I can find of doing it is using FileReader.readAsDataURL() but that has a file limit of ~256MB and some files might be larger than that.
There must be a better way of doing this, can anyone point me in the right direction?
I am testing upload speed of my device! So i need some data to send to the server.
Here i create some data.
var Send = new Blob([new ArrayBuffer(5e+8)], {type: 'application/octet-stream'});
Now i send it to the server
var xhr = new XMLHttpRequest;
xhr.open("POST", 'http://192.168.1.10/v4/upload', true);
xhr.send(Send)
The Problem is When i try to upload 90Mb or more data from Safari iPhone 6S. It is retuning an error
""Failed to load resource: WebKit encountered an internal error""
It depends on the size of the page etc. From an Empty page Safari on iPhone 6S Managed to send up to 100Mb of data. But i need large chunks of data like 500Mb or 1Gb.
Desktop Chrome/Safari/FF/IE on Mac/Windows allow more than 500Mb of data.
var Send = new Blob([new ArrayBuffer(5e+8)], {type: 'application/octet-stream'});
var xhr = new XMLHttpRequest;
xhr.open("POST", 'http://192.168.1.10/v4/upload', true);
xhr.send(Send);
How can i create large amount of data without using too-much memory. Also i need to Send it using XHR2. NO WSS etc.
Anyway we can do this?
Per specs you should be able to xhr.send() a ReadableStream, but AFAIK, no browser did implement that yet...
Otherwise that would have given something like
const stream = new ReadableStream({
start(controller) {
setInterval( () => {
controller.enqueue( dummy_data );
}, interval );
}
});
const xhr = new XMLHttpRequest();
xhr.open('post', url);
xhr.send(stream);
A solution for your case would be to send a File from the device storage directly: create your file beforehand and select it with an <input type="file">, the browser should stream it for you.
fileInput.onchange = (evt) => {
const xhr = new XMLHttpRequest();
xhr.open('post', url);
xhr.send(fileInput.files[0]);
};
I have a chrome app that blocks user's downloads and my code will instead download it in safe way. I want to download blob files with js; my code has worked fine until now, but I have found a blob link that my code fails on and I can't find why. Here is my code:
var request = new XMLHttpRequest();
request.open('GET', uri, true);
request.responseType = 'blob';
request.onload = function (evt) {
var reader = new FileReader();
reader.readAsDataURL(request.response);
reader.onload = function (e) {
var b64 = e.target.result.split("base64,")[1];
var formData = new FormData();
};
};
request.send();
My code based on this answer.
The file that I'm trying to download via js:
This is the website that contains the link
And here is the url link to the blob:
blob:http://worldpopulationreview.com/b18cab08-e62e-47e5-8e31-413f2e73f72d
The error:
GET blob:http://worldpopulationreview.com/b18cab08-e62e-47e5-8e31-413f2e73f72d net::ERR_FILE_NOT_FOUND
Any ideas?
There error means that the file can not be found. This means that the address you are trying to download from doesn't exist on the website.
Try accessing the page via your browser.
Link to the page
You'll see that it returns a 404 error. This means that the URL does not exist.
More info about error 404 here.
This error has nothing to do with your javascript code.
I'm generating a blob in JavaScript via a recorded video stream (MediaRecorder).
The resultant file ends up as a .webm, as confirmed by ffmpeg. So far, so good. Here's what I'm doing.
//promises container
let dfds = [];
//promise 1 - get blob file content
dfds.push(new Promise(resolve => {
var xhr = new XMLHttpRequest();
xhr.open('GET', file_url, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) resolve(this.response);
};
xhr.send();
}));
//(other non-pertinent promises omitted here)
//when ready, build and send request
Promise.all(dfds).then(resolution_data => {
let req = new XMLHttpRequest(), fd = new FormData();
fd.append('title', title);
fd.append('file', resolution_data[0]); //<-- the blob
req.open('POST', 'my-script.php');
req.send(fd);
});
This works perfectly. However, on the PHP side, when I run print_r($_FILES), the mime type is ending up as text/plain. I'd like to submit to PHP the mime type, so I can check this before allowing the file through (I'm aware mimetype is not always reliable, but it's just another check of several I'm doing.)
I added this to the AJAX request:
req.setRequestHeader('Content-Type', 'video/webm');
However with this added, the PHP script reports that $_FILES is completely empty.
How can I submit the mime type along with the file?
The formData.append() as a 'filename' field. See:
https://developer.mozilla.org/en-US/docs/Web/API/FormData/append
What would happen if you gave it a name like 'myMovie.webm'? It's worth a try, I think. So:
fd.append('file', resolution_data[0]);
would become:
fd.append('file', resolution_data[0], 'myMovie.webm');
I haven't tested this at all, it's just a suggestion.
Since you haven't reacted yet, I read a bit more. I also found this:
https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
in it they use this code:
var content = '<a id="a"><b id="b">hey!</b></a>';
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
Note the mime type! That looks very promising!
I have a problems downloading and saving locally the content of a blob from a container through the browser. Uploading a blob to a container worked properly but I can't download it using Firefox or Chrome. The only thing I achieved was retrieving the content in the reponse (Firefox) and I could download it only because of the Chrome cache (that is not valid for me). This is the code I am using:
<script type="text/javascript">
function uploadFile() {
var token = 'AUTH_AAAAAAAA';
var method = 'GET';
var url = 'http://ip/v1/AUTH_account/containerName/blobName';
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.setRequestHeader('X-Auth-Token', token);
xhr.setRequestHeader('accept', 'application/octet-stream');
xhr.send();
}
</script>
I cannot just use
<a href='http://ip/v1/AUTH_account/containerName/blobName' onclick='javascript:uploadFile();'>Blob to download</a>
because this link needs the Auth Token and it would respond with a "401 Unauthorized" message.
Thanks for your help.