We Keep Coding

Javascript - upload json and parse it

I'm building my web application using Javascript and Php, and currently want to implement such a feature, that allows user to upload (using
<input type="file" id="myFile" name="filename">
element) json file and then, by pressing some button next to it, to parse the data from this json into another json that will be saved on the server.
Which javascript features are recommended for doing this? Is it ok to go with ajax requests? Note that I don't want to upload that user's json anywhere on my server, I only want to use it as a user's input, which parsing result gets uploaded on the server.

Sure, you can read the file's content on browser side.
let file = document.getElementById('myFile').files[0];
let reader = new FileReader();
reader.readAsText(file);
reader.onload = function() {
let data = JSON.parse(reader.result);
...
};

How to read hardcoded image file using javascript / jquery

Is it possible to use hardcoded filename?
I want to read File of an image.
I have hardcoded filename like, '/Users/Desktop/1.jpg' and i want to use this
as a file.
I want to change this '/Users/Desktop/1.jpg' type as file.
var imageURL = '/Users/Desktop/1.jpg';
new File(imageURL);
alert(typeof(imageURL)); // I want this as a File

The simplest approach would be to click or drag and drop the file at an <input type="file"> element.
<input type="file" accept="image/*">
<script>
const input = document.querySelector("input");
input.onchange = function(event) {
const file = event.target.files[0];
console.log(file);
}
</script>
If the file is served with CORS headers you can request the file using Image constructor and pass the <img> reference to canvas.toBlob(), then pass Blob reference to File constructor, optionally set the name of the File object.
Similarly CORS headers are necessary when using fetch() and Response.blob() to get Blob of image.
Note if using Chrome or Chromium browser to request files at local filesystem you can launch Chrome or Chromium browsers with --allow-file-access-from-files flag to access local filesystem at JavaScript and HTML, see Read local XML with JS.

check uploaded file format on client side

I am creating a web portal where end user will upload a csv file and I will do some manipulation on that file on the server side (python). There is some latency and lag on the server side so I dont want to send the message from server to client regarding the bad format of uploaded file. Is there any way to do heavy lifting on client side may be using js or jquery to check if the uploaded file is "comma" separated or not etc etc?
I know we can do "accept=.csv" in the html so that file extension has csv format but how to do with contents to be sure.

Accessing local files from Javascript is only possible by using the File API (https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications) - by using this you might be able to check the content whether it matches your expectations or not.

Here's some bits of code I used to display a preview image clientside when a file is selected. You should be able to use this as a starting point to do something else with the file data. Determining whether its csv is up to you.
Obvious caveat:
You still have to check server side. Anyone can modify your clientside javascript to pretend a bad file is good.
Another caveat:
I'm pretty sure that you can have escaped comma characters in a valid csv file. I think the escape character might be different across some implementations too...
// Fired when the user chooses a file in the OS dialog box
// They will have clicked <input id="fileId" type="file">
document.getElementById('fileId').onchange = function (evt) {
if(!evt.target.files || evt.target.files.length === 0){
console.log('No files selected');
return;
}
var uploadTitle = evt2.target.files[0].name;
var uploadSize = evt2.target.files[0].size;
var uploadType = evt2.target.files[0].type;
// To manipulate the file you set a callback for the whole contents:
var FR = new FileReader();
// I've only used this readAsDataURL which will encode the file like data:image/gif;base64,R0lGODl...
// I'm sure there's a similar call for plaintext
FR.readAsDataURL($('#file')[0].files[0]);
FR.onload = function(evt2){
var evtData = {
filesEvent: evt,
}
var uploadData = evt2.result
console.log(uploadTitle, uploadSize, uploadType, uploadData);
}
}

select a file without browsing using javascript

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.

Javascript: variable file from string

Hopefully this is a pretty simple question for those who know javascript but I couldn't figure it out. Basically I have a save file dialog box created with this:
<div>
<input type="file" id="file" onchange="loadFile(this)">
</div>
It is linked to the "loadfile" function shown below:
function loadFile(input) {
var file = input.files[0]
var url = file.urn || file.name;
ID3.loadTags(url, function() {showTags(url);}, {tags: ["title","artist","album","picture"],dataReader: FileAPIReader(file)});
}
I am trying to replace the line
var file = input.files[0]
to be a file from a string (specified path) instead of relying on the file browser dialog. I have tried something like this:
var file = files("song.mp3")
but the resulting function will not work. I am guessing that my variable file isn't of the right type. How do I get it to be the same type as the selected file from the file dialog box?
Thanks in advance!
PS:
I am trying to link my script to a path on the server not the client.

If you want to access data from a website, then use the XMLHttpRequest object instead of the Files API.