Get file content from file input field - javascript

So, I have an input field, I have the file list object containing the files, but I can't see how to get at the file content. What I want to do is use crypto-js to generate an md5 hash of the file.
I want to use the hash as a reference to the file (i.e. asrjq38w94r5yh8hrqw9.jpg) and also so I can veryfy file integrity to insure the file got uploaded correctly.
Is the only way to do this by getting the file path from the file input field and then using the FileReader object to get the file content?

Related

zip.min.js: How to get the content of one of the zipped files (html file import)

I have a zip archive containing a text file.
I need to get the text content of this file, so I first import the zip file via html file input element and the unzip it using the zip.min.js library. The following code returns an array of files inside the archive, but they seem to be Wt instances (not Files or Blobs).
entries = await model.getEntries(selectedFile, { filenameEncoding });
Link to the codesandbox - there you can import an archive with a text file inside and get the same result in the browser console.
I believe there must be a way to get the content of the file, but simply can not understand, how.
Thank you!

Android webview - how to fetch a file from external storage

I have a mobile app that wraps around the web-app, using webview.
The web-app has a button to open a large .zip file (e.g. 100 MB).
The user clicks a button, and selects a .zip file.
This triggers an onChange function with a variable of type File (Blob), which includes attributes like:
file name
file size
file type (application/zip)
The javascript code then parses the .zip file, extracts specific data within it and uses it within the web-app.
This works well within the web-app, when the app is called via the Chrome browser.
For example when operated in chrome browser on an Android phone, I can pull the .zip file and open it in the web-app.
I want to do the same but using the mobile app.
I am able to pick up the .zip file using a File Chooser, and pass it to Webview but I have problems to fetch the file from the Javascript code.
For reference, I am able to pass an image, by creating a data_uri using stringBuilder and passing the content (as data:image/jpeg;base64).
But the zip file is much larger.
When calling fetch(fileUri) from the Javascript side I'm getting errors.
I'm using the following uri
/storage/emulated/0/Android/data/com.example/files/Download/file2.zip
The fetch succeeds but returns a blob with size of 165 (i.e. not the actual size of the file) which hosts the error message:
{
"error": "Not Found",
"message": "The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again."
}
The program flow is like so:
I select a .zip file via FileChooser.
In onActivityResult, the uri value is /document/msf:12858 (seen via uri = intent.getData();)
The uri needs to be mapped into a real path file url, such that the fileUrl will be passed to webview.
Webview will then fetch the file using the fileUrl.
I searched how to get the real path file url when selecting a file with FileChooser, and found
this, and this links.
I wasn't able to get the real file path, so I decided to read the file and write it to another location, so I can get a file path. (this is not efficient and done just to check the functionality).
I create the new file using the following code:
InputStream stream = context.getContentResolver().openInputStream(uri);
File file2 = new File(context.getExternalFilesDir(Environment.DIRECTORY_DOWNLOADS), "file2.zip");
writeBytesToFile(stream, file2);
I don't see any errors when creating the file, and when creating the file, the number of bytes that are read and written to the new file are as expected.
For file2, I get a value of:
/storage/emulated/0/Android/data/com.example/files/Download/file2.zip
Then, within the Javascript code I fetch this file path.
But I'm getting a Blob with the "file-not-found" content as above.
So:
How can I verify that the file is indeed created and that the path can be fetched from webview?
How can I get the real file path of the original selected file, so I don't have to read and write the original file to new location just to get the file path?
Thanks
I was able to get the file from external storage by doing the following steps:
create an initial uri (uri1)
The uri is created by:
creating a temporary file (file1) in the storage dir via
context.getExternalFilesDir(Environment.DIRECTORY_DOWNLOADS)
I'm not sure why a temporary file need to be created but if I don't create a file I cannot get the uri.
createFile3
get the uri via
Uri uri1 = FileProvider.getUriForFile(context, "com.example.android.fileprovider", file1);
create an intent with the following attributes:
Intent.ACTION_OPEN_DOCUMENT
category: Intent.CATEGORY_OPENABLE
type: "application/zip"
extra attribute: fileIntent.putExtra(DocumentsContract.EXTRA_INITIAL_URI, uri1);
this opens a dialog box for selecting openable zip files in the Downloads directory,
after the file is selected, a new uri (uri2) is created that includes the name of the selected file.
extract the name of the file via
String fileName = getFileName(context, uri2);
create the dirPath by appending the filename
dirPath = "/data/user/0/com.example/" + fileName;
if the dirPath does not exist (first time), write the file to its dirPath location.
on successive ocassions dirPath exists, so there is no need to re-write the file.
open the file with regular Java means, e.g. via
ZipFile zip = new ZipFile(dirPath);

find name, size and date modified of file inside that particular file using javascript in html file not uploaded file

I want to display html file's size,name and date modified inside that html file using javascript.basically i want to fetch last date modified from server for that particular file and want to show inside that own html file for whose we are getting name and size and everything.

input type file with file path

I want to import data from a path in an input type file.
It is in use in the kendo UI, and when I wrote the article, I uploaded the data to the spreadsheet by using the file upload window and saved the data to the server.
Therefore, the file is stored in the server-specified path, and DB contains basic information such as file path, file name, and extension.
When I read a post using this, it was successful to retrieve the information of the file from the DB, but it is not in the reading part of the file.
So, I do not upload the file from the input type file that I used at the time of writing, but I want to read the file information from fromfile.
If you know how to do it, please let me know.
This is the code I used to write.
<input class="icon_input_file" type="file" id="insertFile" name="insertFile"/>
$("#insertFile").on("change", function(){
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.fromFile(this.files[0]);
});

Javascript: Use an object, instead of path to it for specific function

I'm using the excel-as-json module (https://github.com/stevetarver/excel-as-json) and I have set it up so that it translates my .xlsx files to .json, but I now changed it so that the .xlsx is uploaded by the user in the front-end of the app.
I would like to run the convert on the uploaded Excel file, but since I am getting the user to upload it - I don't actually have a path to it, only the file object itself. So excel-as-json tells me that it cannot find the src file [Object object]
The excel as json function call is:
convertExcel(src, dst, options, callback);
What is the best way to pass the object as src? What if I store the .xlsx in my mongoDB, could I pass in its path easier then?
Not solution, but workaround: Get user to copy in path to file and use this. Based on answer from: Getting file full path when uploading file in html in firefox
Note this workaround only works for localhost
Solution I solved my issue by using a different module - sheet.js. I get the user to upload their file using an <input> tag and then use sheet.js to parse it into json, before sending it to the server where it will be stored.

Categories