I'm having trouble loading an audio file then putting it into readAsArrayBuffer. I don't want the user to choose a file, I just want it to load one locally like so:
let file = new File('../music/song.mp3');
let reader = new FileReader();
reader.onload = function(e) {
playSound(e.target.result);
}
reader.readAsArrayBuffer(file);
When I do the above, I get the following error:
Uncaught TypeError: Failed to construct 'File': 2 arguments required, but only 1 present.
So I try this:
let file = new File([''], '../music/song.mp3');
Which then produces this error:
Uncaught (in promise) DOMException: Unable to decode audio data
The size of what it loads is 0, which I believe is why it's producing this error.
Everything works fine when I let the user choose a file to load:
document.getElementById('open-file').onchange = function(evt) {
let file = evt.target.files[0];
Does anyone know how to fix this?
As Patrick Evans stated, it's not at all possible because of security risks. Such a shame as you can easily play audio with HTML5, but you can't load the audio files and read them as an array buffer.
Related
Im using deep AI API to make an image a cartoon and it renders but now I need to save the image so it can be downloaded, I looked on stack overflow all over and cant find the answer, (they all use get method).
Also tyried let Blob=await response.blob();
it didnt work it stopped the render in fact!
(async function() {
let result=await deepai.callStandardApi("toonify", {
image: "<?php echo $url;?>"
});
let response=await deepai.renderResultIntoElement(result, document.getElementById('RES'));
let blob=response.blob();
//var file=new Blob(blob, {type:'image/jpeg'});
})();
saveAs(blob, "image/jpeg", "image.jpeg");
Its nearly there its trying to download to a file but it is saying not correct format upon opening. any ideas?
Getting error in console Uncaught TypeError: File constructor: Argument 1 can't be converted to a sequence.
Im trying to build file preview feature before file being uploaded to the server.
Im stucked with the problem of reading file from the user's computer, not a server
Im usuing jquery Fileupload which fires the file processing on the change function
return $('#new_order_file').fileupload({
change: function(e, data) {
return $.each(data.files, function(index, file) {
read_file(file);
console.log(file)
});
},
});
Log gives File - name, size, type, proto and LastmodifiedDate
Than, this part is tricky for me, I know that I have to use FileReader() but Im not sure how to
function read_file(f){
var reader = new FileReader();
reader.onload = function(e) {
$('#CO-show-model').css('display', 'block');
loaded(f.name, e.target.result);
};
reader.readAsArrayBuffer(f);
}
Next, loaded function is for displaying the file model using three.js
function loaded(file) {
var uploaded_file = file // gives 404
// var uploaded_file = './stl/test-file.stl' // ASCII test
}
The fucntion itself is good, I tested it with an hardcoded path to some test file. But the problem is that it was on a server. Now, script gives an 404 for http://example.com/filename.stl which is true, because I pass file.name there. If I just pass file, it gives 404 for http://example.com/[object%20File]
Edit 1:
I tried suggest ReadAsDataUrl, but seems to be that it's not supported by three.js. Also, the FileReader() seems to be ok
Your file is an object so you have to get the right attribute from it.
Take a look here Filereader Mozilla documentation
It's a security feature. Browsers will not give you the actual local url to the file you are uploading.
See How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?
Edit: Maybe what you are looking for is this question instead? What is the preferred method for loading STL files in Three.js
I'm trying to allow a user to select a file from their computer and start seeding it, I've followed the example here. I've used a normal input rather than using drag and drop as I couldn't get it to work.
Now whenever a file is selected I get this error:
Uncaught Error: filesystem paths do not work in the browser
How can I start seeding from a user's computer without uploading the file to my server?
I think you tryed reading a file with file:///, but this not possible for security reasons. A file must be selected or drap&droped from the user.
The simplest solution is with a button:
function readFile(evt) {
var file = evt.target.files[0]
if (!file) {
return
}
var reader = new FileReader()
reader.onload = evt => {
var contents = evt.target.result
console.log(contents)
}
reader.readAsText(file)
}
<input type="file" onchange="readFile.call(this, event)" />
With this snippet you can read a file without any interaction with a server and thats ideal for a serverless techlology like torrent.
I write a phonegap app and in it I will copy a file selected in android gallery to SD-Card.
This function works, but freeze the Main Thread for the copy time.
Now I tested to write this in a Web Worker, I post the fileEntry to Web Worker but there comes an Error:
03-18 09:31:37.575 1713-1713/de.scisys.app I/chromium﹕ [INFO:CONSOLE(1)] "Uncaught TypeError: Object #<Object> has no method 'copyTo'", source: blob:file%3A///7fd968c1-2d2b-469e-b4b7-fab1172bb496 (1)
Here is my Code:
function(fileEntry) {
...
var blob = new Blob(['onmessage = function(e) { var data = e.data; data.fileEntry.copyTo(data.parentEntry, data.newName, function() { postMessage("success") }, function() { postMessage("error") }); }'], {type: 'text/javascript'});
var blobURL = window.URL.createObjectURL(blob);
var worker = new Worker(blobURL);
worker.onmessage = function(e) {
alert(e.data)
};
worker.postMessage({'fileEntry': fileEntry, 'parentEntry': parentEntry, 'newName': fileId+"."+fileName[fileName.length-1]});
...
}
Is there an error in my code, or have some one an idea?
Thanks for your help!
Edit:
I found a Solution by editing the Phonegap Core File Plugin. In FileUtils "execute" method I changed the work to Thread.
http://www.mindfiresolutions.com/Implementing-MultiThreading-In-Android-Plugin-For-PhoneGap-260-2572.php
As per my knowledge Web Workers never works on local directory
file://
it works on server side. For example instead of placing files at "file://" so the path should be
***> http://locahost/ or***
***> http://server_ip_address***
Hence Phonegap consists of HTML and Javascript which are at device directory hence web workers are not supported in Phonegap.
^^is what I found out just a small googling :) . Please google first
I am playing with the FileSystem API in Google Chrome 16 but can't write more than once blob (without reopen the file for appending). Seems like the file is closed after the first write.
For example:
var blob = new WebKitBlobBuilder();
blob.append('one');
fileWriter.write(blob.getBlob('text/plain'));
var blob2 = new WebKitBlobBuilder();
blob2.append('two');
fileWriter.write(blob2.getBlob('text/plain'));
gives a _Uncaught Error: INVALID_STATE_ERR: DOM File Exception 7_
The W3 doc says about FileWriter: "This interface expands on the FileSaver interface to allow for multiple write actions, rather than just saving a single Blob."
According to the specification, you are not allowed to use a writer when it's busy writing:
write
If readyState is WRITING, throw a FileException with error code INVALID_STATE_ERR and terminate this overall series of steps.
Since the writer is asynchronous, you have to wait using a callback:
// write first blob
fileWriter.onwriteend = function() {
// write second blob
};