My main program prompts the user to browse for a file in order to convert it using ffmpeg. This is the format of the file browsing:
<div>
<p class="lead">1. Select audio file for conversion ( mp3, wma):</p>
<div class="quick-center">
<div class="quick-drop-outer quick-left"><input id="inFile" type="file" id="inputFile"/></div>
</div>
</div>
and this is the code where to launch the file and convert it according to selection: not whole code supported because no need of file conversion:
document.getElementById('inFile').addEventListener('change', handleFileSelect, false);
function readInputFile(file) {
// disable conversion for the time of file loading
$('#convert').attr('disabled', 'true');
// load file content
var reader = new FileReader();
reader.onload = function(e) {
$('#convert').removeAttr('disabled');
fileName = file.name;
fileBuffer = e.target.result;
}
reader.readAsArrayBuffer(file);
}
function handleFileSelect(event) {
var files = event.target.files; // FileList object
// files is a FileList of File objects. display first file name
file = files[0];
console.log(file);
if (file) {
$("#drop").text("Drop file here");
readInputFile(file);
}
}
now, here is my problem, what I want to do is to upload the file directly from a selected folder (upload) where the audio files are already there. I want instead of browsing for the file, I want the last file in the upload folder to be uploaded instead of "inFile" so that conversion can happen.
how could that happen.
edit: A small brief about my project. the user records his voice using HTML5 and the link of that audio is uploaded using ajax and php into a folder named upload.what I simply want is instead of browsing that file, I want to write down the path of the file in the selected folder automatically once recording is done for conversion.so, instead of dropping the file by user, the file would be dropped and conversion starts from there.
help please.Thank you in advance
From JavaScript You dont have access to files and directories on host system.
Why?
Because is VERY IMPORTANT SECURITY feature to block reading Your disc for files from scripts.
Related
I am trying to upload a zip file that contains an HTML file inside to firebase storage. I am using JSzip to zip the file. Here is how my code looks right now:
DownloadHandler = () => {
var zip = new JSZip();
zip.file("story.html", `<body>${this.state.html}</body>`);
zip.generateAsync({ type: "blob" }).then(function (blob) {
storage.ref("story").put(blob);
});
};
When I run the current code it uploads the zip but inside the zip, I am getting a document file and not an HTML file. Also, when I click this document file it says it is encoded. How can I modify my code so that when the file zips it zips an HTML file inside?
Figured it out. In my storage.ref("story").put(blob); I just need to specify the extension of the file so it needed to be storage.ref("story.zip").put(blob);
I am trying to convert a .wav file to .flac file using Rillke's flac.js
https://github.com/Rillke/flac.js
The example provided is based around a file being uploaded by a user using <input type="file" />
$input = $('input')
...
$input.change(function() {
var f = this.files[0]
...
How can I set var f to an audio file that's already saved on the server? I want to remove the upload process and just run the conversion script for a file stored on the server.
Thanks in advance.
I want to create an online viewer where a user can upload models and view them, rather than having to edit the path in the source code.
Since browsers don't allow to retrieve file path but I can read the contents of the file, how do I load a model (obj, ply, mtl etc) given the contents of the file?
There a couple ways to do it, but if you go to the github three.js repository, in the examples you'll see an obj loader. There are examples with mtl, stl, collada, etc.
http://threejs.org/examples/webgl_loader_obj.html
The repository has the examples folder which has a js folder with all the example loaders:
https://github.com/mrdoob/three.js/tree/master/examples/js/loaders
If you want to subvert the internal three loader, each loader example has a parse(text) method.
Well just found out that the three.js online editor does this #http://threejs.org/editor/ .
File -> Import.
You can use the HTML5 filereader API and then you can call parse method from the corresponding loader directly with the result.
Or you can use the file reader, read the file into a data url and load the data url instead of your normal url.
HTML code allowing user to load the model file
<h1>Model File Reader</h1>
<div>
Select a model file:
<input type="file" id="fileInput">
</div>
Javascript code to handle the onload event:
window.onload = function() {
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
// file selection is done you can now read the file
var file = this.files[0];
// set your file encoding
var encoding = 'ISO-8859-1';
// create a file reader
var reader = new FileReader();
// set on load handler for reader
reader.onload = function(e) {
var result = reader.result;
// parse using your corresponding loader
loader.parse( result );
}
// read the file as text using the reader
reader.readAsText(file, encoding);
});
}
Check here for more information on the file reader class
I'm just starting out with Meteor and (and coding in general) I have done the tutorial projects and examples etc and am looking to start my own project. My project is I want users to be able to select a file on their computer with an field, user selects file, the contents of the file is read and the webpage provides a hash of the contents. Possible to be done clientside without the file being uploaded to a server?
A bit lost where I should be looking- HTML5 file-read API, cryptoJS, or something else? How would I go about providing that functionality in a webpage?
Yes, this can be done using the HTML5 FileReader API.
Template.fileUpload.helpers({
'change #file': function (e) {
var files = e.target.files;
var file = files[0];
var reader = new FileReader();
reader.onload = function() {
console.log(this.result);
}
reader.readAsText(file);
}
});
I am working on an interface that allows the to access the file system on the client side. The user should be able to browse through the file system, select a directory and my system will display list of files and sub-directories of the selected directory.
I have tried using HTML5 File API, but that apparently only allows users to select files (not folders).
Any pointers/help in this direction will be appreciated.
This cannot be done in JavaScript as it would be a potential security issue. Only files selected by the user via a file dialog can be accessed using JavaScript.
Here's a pretty nice article on the File API if you haven't come across it yet.
If it's still an open issue, then let me give you a solution that might work for you.
HTML
File input for selecting a directory:
<input type="file" id="file-input" webkitdirectory="" directory=""/>
JavaScript
The following script collects all files from the given folder and from ALL sub folders.
Even from sub-subfolders, etc.
$("#file-input").on("change", function(e) {
var thefiles = e.target.files;
$.each(thefiles, function(i, item) {
var thefile = item;
var reader = new FileReader();
reader.onload = function() {
files.push(thefile);
};
reader.readAsArrayBuffer(thefile);
});
});