Check Upload File Size Before Post Is Called With Javascript
Using the HTML5 File API to validate PDF Files
Recently in my own time I accept been familiarizing myself with the HTML5 File API. Information technology allows yous to create web applications that read files entirely on the client side without the need to upload a matter which tin be useful if yous desire to read a local file and display it's data (e.k. A motion picture slide prove application or a spreadsheet application), or if you want to check it conforms to some standard before letting the user upload it to a server. This web log post is an example of the latter, specifically geared towards PDF files since that's what we specialize in, just the code here can be applied to other file types and should be easy enough to follow.
Exposition
Beneath is the example situation we will be using:
We offering a cloud based service for our PDF to HTML5 converter that let's y'all easily integrate it in your own awarding (be information technology spider web app, desktop or server). This service allow's you ship a PDF to usa and be returned the converted files. But what if you send an invalid PDF to us unknowingly? Y'all won't get a respond and will of wasted time and bandwidth on a duff file. Evidently y'all'd desire to prevent this situation from happening.
Understanding what makes a valid PDF
Showtime you need to make sure you know what a valid PDF is, we have a whole plethora of weblog articles detailing the PDF specification and what a PDF really is (indexed here) but for at present permit's start with something simple that nosotros tin apply to check if a file is a valid PDF file, the File Header. (If yous actually want to understand what makes a PDF valid try the Making your ain PDF file set of weblog posts by Daniel).
Co-ordinate to the PDF Specification (section 7.v.2):
The first line of a PDF file shall be a header consisting of the 5 characters %PDF– followed by a version number of the form 1.N, where North is a digit between 0 and seven.
A befitting reader shall accept files with any of the following headers:
%PDF–1.0
%PDF–1.1
%PDF–1.2
%PDF–1.3
%PDF–i.iv
%PDF–ane.five
%PDF–i.half dozen
%PDF–one.vii
This is a simple enough thing to examination for using the HTML5 File API, we can aggrandize upon the test later to ensure it catches other things required past a PDF.
My First File API
Before nosotros begin diving into our JavaScript code for the given situation it might be worth explaining the HTML5 File API:
Each <input> chemical element with the type "file" has an attribute called files which is a FileList object that contains a listing of the selected files associated with the input.
The FileList object is simply an interface that represents an assortment of File objects. In the case above the FileList in question but has i entry.
A File object is read simply and contains; the last time the file was modified, information technology'southward name, information technology's size (in bytes) and information technology's blazon.
In order to read the contents of a file yous need to make use of a FileReader object which contains methods and callbacks you will need to make employ of. Most of these are to do with reading the file in a specific style.
Each of those above links link to the Mozilla Developer Network pages for each object in case you want to learn more about them (as a resource in its self it's cracking).
The Example Lawmaking
At present that you are a bit more familiar with the HTML5 File API information technology's fourth dimension to outset programming with it.
First we volition create a unproblematic HTML file to use the API with:
Very short and sweet. The bulk of our lawmaking is within the JavaScript source file.
When using any HTML5 API it'south always important to check that the API is supported by the browser. In the case of the HTML5 File API we practise this by checking that the various object I mentioned in the concluding section have constructors:
/** * Returns true if the HTML5 File API is supported by the browser * @returns {*} */ part supportsFileAPI( ) { return window.File && window.FileReader && window.FileList && window.Blob ; }
/** * Returns true if the HTML5 File API is supported by the browser * @returns {*} */function supportsFileAPI() { return window.File && window.FileReader && window.FileList && window.Blob; }
The Blob object is some other part of the File API that you can read about hither, basically information technology's like a file, in fact a File object can exist seen as a kind of Hulk with extra data associated with it.
Now that we have a way of checking if the browser supports the HTML5 File API we should add some event listeners to the <input> element on our page. I've washed this using the addEventListener and/or attachEvent methods like so:
/** * Used to attach events to an element or object in a browser contained fashion * @param element * @param outcome * @param callbackFunction */ part attachEvent(element, event, callbackFunction) { if (chemical element.addEventListener ) { element.addEventListener (event, callbackFunction, faux ) ; } else if (chemical element.attachEvent ) { element.attachEvent ( 'on' + outcome, callbackFunction) ; } } role pageLoaded( ) { var fileInput = certificate.getElementById ( "fileUpload" ) ; if (supportsFileAPI( ) ) { attachEvent(fileInput, "alter" , preUpload) ; } else { warning( "Your browser does not support the HTML5 File API." ) ; } } attachEvent(window, "load" , pageLoaded) ;
/** * Used to adhere events to an element or object in a browser independent way * @param chemical element * @param event * @param callbackFunction */function attachEvent(chemical element, event, callbackFunction) { if(element.addEventListener) { element.addEventListener(result, callbackFunction, simulated); } else if(element.attachEvent) { element.attachEvent('on' + outcome, callbackFunction); } } role pageLoaded() { var fileInput = certificate.getElementById("fileUpload"); if(supportsFileAPI()) { attachEvent(fileInput, "modify", preUpload); } else { alarm("Your browser does not support the HTML5 File API."); } } attachEvent(window, "load", pageLoaded);
This method will work on virtually mod browsers, and does not clutter up the HTML file.
The method preUpload is what will be run upon a user changing the contents of the <input> box and will be where we brand use of the HTML5 File API.
Earlier showing you the lawmaking to it we will work through what we demand it to do offset:
- First information technology needs to get a reference to the File object in question.
- Then it needs to create a new FileReader object and assign an event handler to exist called when the FileReader has loaded the File object.
- Then it needs to make the FileReader read the File object.
The commencement footstep is easy, nosotros can get the FileList of the <input> chemical element via the calling events target attribute to get the <input> element and then get it's FileList object and treat it like an array.
function preUpload(result) { // The file API supports the power to reference multiple files in 1 <input> tag var file = outcome.target.files [ 0 ] ;
function preUpload(consequence) { // The file API supports the ability to reference multiple files in i <input> tag var file = effect.target.files[0];
The side by side footstep is a footling harder as it contains the logic to cheque whether the PDF file is actually a valid PDF file. I've done this using an anonymous part (actually I've done information technology using ii) that reads the first 8 characters of the PDF File and checks that they conform to what the Specification says.
var reader = new FileReader( ) ; // Uses two anonymous functions so nosotros tin can pass the File object to the on load anonymous function. attachEvent(reader, "load" , ( part (fileToCheck) { render part (evt) { var data = evt.target.outcome.substr ( 0 , eight ) ; // This gets the first viii bytes/characters of the file var regex = new RegExp( "%PDF-1.[0-vii]" ) ; // This Regular Expression is used to check if the file is valid if (data.friction match (regex) ) { alert(fileToCheck.name + " is a valid PDF File." ) ; } } } ) (file) ) ;
var reader = new FileReader(); // Uses two bearding functions so we can laissez passer the File object to the on load anonymous function. attachEvent(reader, "load", (role(fileToCheck) { return function (evt) { var information = evt.target.result.substr(0, 8); // This gets the first 8 bytes/characters of the file var regex = new RegExp("%PDF-1.[0-7]"); // This Regular Expression is used to check if the file is valid if(data.match(regex)) { warning(fileToCheck.name + " is a valid PDF File."); } } })(file));
The last pace is a very elementary method call, except I've added in an extra condition in order to warn you if your uploading a large PDF file (in this case anything to a higher place 10MB).
var MBSize = file.size / 1024 / 1024 ; if (MBSize > 10 ) { if ( !ostend(file.name + " is " + MBSize + "MB big, and may cause your browser to terminate responding while information technology parses information technology.\nContinue?" ) ) { render ; } } reader.readAsText (file) ; // For now we shall read the file as if it were a text file }
var MBSize = file.size / 1024 / 1024; if(MBSize > 10) { if(!ostend(file.name + " is " + MBSize + "MB large, and may cause your browser to cease responding while it parses it.\nContinue?")) { return; } } reader.readAsText(file); // For now we shall read the file as if it were a text file }
All put together the code looks like this:
Something to annotation most the HTML5 File API is that the read methods work on an unabridged File and then if y'all are making utilize of a peculiarly large file it can cause problems. A way of solving this is by reading only role of the File, we do this by creating a Blob of only the outset 8 bytes of the file and passing that to the FileReader instead, this makes the last department of the code look like this instead:
var hulk = file.slice ( 0 , viii ) ; reader.readAsText (blob) ; }
var hulk = file.piece(0, eight); reader.readAsText(blob); }
Closing
It'south important to note that merely because a PDF has a valid header it doesn't mean information technology will itself be valid, in that location are several other things required for a PDF to exist valid, viewable and able to be converted by our PDF2HTML5 converter. For more than information you tin look at the Understanding PDFs blog posts we accept.
Information technology is also important to annotation that the HTML5 File API is not supported everywhere as of yet and that the slice method mentioned may require a vendor specific prefix in some web browsers.
Hopefully this article has given you some ideas on how to use the HTML5 File API to parse files client side earlier uploading them and, a bit of knowledge on PDFs.
This post is part of our "HTML5 Article index" in these manufactures, we aim to help you understand the earth of HTML5.
Are you a Developer working with PDF files?
Our developers guide contains a large number of technical posts to help y'all understand the PDF file Format.
Find out more well-nigh our software for Developers
Source: https://blog.idrsolutions.com/2013/07/check-if-a-pdf-is-valid-using-html5-file-api/
0 Response to "Check Upload File Size Before Post Is Called With Javascript"
Enviar um comentário