Get file size (in bytes) on client side - javascript

I make multiple file uploading project, (Server language is PHP)
Especially, I need that before uploading, on client side, get files size in bytes.
what is today best cross browser solution/plugin for this?
I find SWFUpload, may be exists better solution? or use this SWFUpload?

In HTML5 a file drag & drop event creates a File object which has a .size property.
Look in ev.dataTransfer for the list of File objects.

Related

How to set image src to some "randomName.png" file available in current directory?

I have this scenario to reproduce an HTML implementation for 100+ images of different names.
myPackageDirectory
- index.html
- some_name.png
- script/css files
Currently, I have to manually do the following
pick each image file from pool,
place it into the
packageDirectory, then
rename it to static img.png, then
package(zip) the iteration.
I wish to skip renaming part from xyz.png --> img.png by something like <img src="*.png" /> kind of thing.
"Client-side method"
I've used python to automate iterations, but am looking for some html/js way to pick file just by extension
It seems you want to obtain a list of file names on the server with the .png extension.
If your server allows directory listing, you can do this with client side JavaScript. Otherwise, you'll need a server side solution.
See the answers here: Easiest way to get list of files in the server directory

Client side validation of png file in javascript

I have a simple web application to manipulate image files in the browser.
It is entirely client side. I had some questions about the safety of the operation here : Is this client side application secure?
I want to validate the files to make sure only allowed formats can be 'uploaded'. I put uploaded in quotations because, I'd like to repeat, everything happens on the client side in javascript.
PNG files specifically
I am learning about the structure of png files and I am thinking of using the fileReader object and the method readAsArrayBuffer() to read the bytes of the png file so that I can evaluate the first 8 bytes of the header (137 80 78 71 13 10 26 10) along with the chunk types (like IHDR, IDAT, IEND etc.) and the CRCs. In fact I have already done so but it isn't a part of my web app. Basically, when a user tries to 'upload' a file, my app would spot check some key bytes of the file and determine roughly 'OK, this is a png file. It's ok to work with this file'.
Would this be a good enough validation?
My reasoning for this precaution, even to this whole thing is client-side, is to protect an unsuspecting end user who might 'upload' a file that looks like a png, but which actually contains some harmful script with it.
If this isn't sufficient, I'm hoping someone can point me in such a direction so that I will know what does constitute a proper validation.

Buffering a client-side file download

I have a file which is split up into multiple parts on the server side. The complete file is huge, it can be 10 or more gigabytes in size (that is the reason for splitting it in the first place).
The file is in a specific format, and it has to be processed on the client side before being downloaded.
Now, I know that I can download into a Blob to the client side, do the processing, then download Blobs from there with this approach: JavaScript blob filename without link
The problem here is that I would need to construct a single huge blob from all the file parts on the client side, which I do not want, because it will probably exceed RAM limitations rather quickly.
I would like to download each part of the file individually and then process it and download the "partial" blob. That means that I would need to start a download and then piece by piece add blobs to it until the download is complete.
Is there any possibility of doing this? How? I know that mega.co.nz does something similar with file downloads where they process the file on the client side first (for decryption). Are they using such techniques?
You can save the downloaded parts to localStorage. You will have to serialize each part into a string first; then you can call localStorage.setItem. Your code might look like this:
localStorage.setItem('download-part-' + chunkIndex, chunkDataAsString);
chunkDataAsString = ''; // let the garbage collector collect the large string

How do you check whether a CSV file is corrupted in PHP and/or Javascript?

I'm making an HTML5/jQuery/PHP app which involves uploading CSV files (via a drag and drop), and processing them to a MySQL database. So far, I can upload the files, and I know how to read them into a database.
My question: I am wondering if it is possible to detect whether a CSV file is in a corrupted format by PHP or Javascript/jQuery? For example, I can rename somefile.png (an image) to somefile.csv, and it still gets uploaded. If I open up the renamed file in Notepad++, all I see is garbage, which is expected.
I would like to do this on the clientside, so I can alert the user (via JQuery) whether the file is in a corrupted format. I'd also like to check on the serverside (via PHP) before I start iterating over each CSV file for db processing.
My first thoughts would be to use regular expressions, but I am unsure how to make ones for this particular problem. I know the basics of regular expressions, but haven't really used them in advanced settings before.
First of all you should check content-type of picked file, it should be "text/csv". At the server-side you can check file via fgetscsv PHP function (http://php.net/manual/function.fgetcsv.php) (catch null or false on error)
You don't want to be validating it if you're going to be reading it right after. Just read it in and catch any errors as you read. That way you come to know whether file is valid or corrupt.

How to distinguish a file from a folder while uploading using drag and drop in jquery?

If a user tries to drag and drop a folder to my file uploader control for uploading it, then I need to show an error message to the user saying that only files can be uploaded. The problem is I couldn't distinguish a file from a folder.
One way I thought was to check for file type property of jQuery. Supposing that the name of the file is "test.txt", then file type would return "text/plain". For a normal folder name such as "TestFolder", file type would be blank and its file size would return 0. However if the folder name included an extension like "TestFolder.txt", then file type would return "text/plain".
So I could have checked for file type and file size but it would not work correctly for folder name like "TestFolder.txt". Could any one suggest me a good solution to fix this using jQuery or other methods?
The ability to determine if a folder has been dropped is dependent on the user agent's support of the Filesystem API. If the user agent DOES support the Filesystem API (currently only Chrome 21+), you can make use of the Entry interface, which has two child interfaces: DirectoryEntry and FileEntry. The interface itself has isDirectory and isFile functions. Without support for this interface, there is no way to determine if dropped items are folders when examining the DataTransfer object.
Since you are not going to allow folder to drag and drop, first check if it's folder or file, second only if it's not folder then check for file extension. But IE < 11 does not support file API to handle. Hope it helps.
As far as I'm aware the browser (And javascript inherently) doesn't have access to any file access methodologies for security purposes so you cannot check what the file actually is.
I have worked with this problem myself in the past and the best option I have found that works is to handle the file server-side, and return the error back to the page after upload has completed.
I would be happy to see better alternatives myself though.

Categories

Resources