Server-side dev here who's a JS newbie. This question is about retrieving the size of an image selected via the browse input element (in a form), via pure JS.
Currently, the easiest way I know of to get the size (in bytes) in such a case is e.target.files[0].size.
My question is: is this a reliable way to retrieve file size? Or can it be easily spoofed à la file extensions?
I need to impose a ceiling on image sizes allowed to be uploaded. I'm doing that on server-side too, and am adding it to the client for extra security (and to tinker around in JS to learn the ropes).
If this is an unreliable way to retrieve image size, I'd love to see an illustrative example of the alternative. I'm expecting PNGs, JPEGs and GIFs to be uploaded.
Note: Please stick to pure JS for the scope of this question. JQuery is on my radar too, but only after I've absorbed vanilla JS fundamentals.
Yes, e.target.files[0].size is the recommended approach: https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
Related
We are thinking about a library which can get a TIFF image and display each page (frame) of TIFF file in a separate canvas element. Also some pages might have layers. We want to be able to show/hide layers at user's will.
It is not necessary to tell me the complete solution or library. Just tell me if it is possible to accomplish all these requirements by javascript or we need to get help of server-side programming?
Should be possible. I don't think browsers support the TIFF format natively, but a quick Google search turns up at least two TIFF parsers for JavaScript. From there on, you can display it in any way you like; tiff.js even has a multipage demo.
Basicaly I'd like to find a way to increase the maximum upload size, I'm only talking about wordpress because it happens to be the platform Im working on but what I need is to find a way to go around php setting on the server as wordpress seems to use those setting as default.
Note that I'm only looking at uploading pictures, no other sort of files.
I have found several pages on google explaining either how to edit wordpress setting (in my case this is not something that would work), or changing the php setting on the server side, and I simply cannot do that.
I have thought of a few ways to reach this goal but don't know where to start as I'm not that good in picture processing. I was thinking about evaluating the picture size and dividing it into several files (is it something do-able in js ?), then upload them onto the server and assemble them from there in php (that I can do).
Can you tell me what you think about it ? I'm not asking anybody to do the work, i'm just looking for a hint or just for somebody to tell me where to start from in js or whatever other language I need to use on the front end.
Thanks a lot.
Yes, it is certainly possible to split a file via JS into chunks and to senk these ones individually.
Declare a file input field:
<input type="file" id="input">
Access the first file (there could be more if using the multiple attribute):
var selected_file = document.getElementById('input').files[0];
You now have a File object which also inherits the Blob interface. You can therefore call Blob.slice in order to split the data into chunks.
Upload those chunks via AJAX
Combine the chunks again on the server side
Further readings:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
https://developer.mozilla.org/en-US/docs/Web/API/File
https://developer.mozilla.org/en-US/docs/Web/API/Blob
The restriction is at the server level.
You MUST adjust your server configuration in order to trickle down to WordPress.
If you set WordPress configuration to a max of 40MB, and Apache (or other web server software) still has a 2MB limit, you won't ever be able to post more than 2MB.
One option would be to use a Flash-based upload tool which can perform some pre-processing to downsize the image before uploading.
If you really want to get fancy, you could develop your own Flash-based upload tool to chunk uploads into 2MB parts (or whatever your server's maximum post size is) and some server-side script to re-assemble the pieces, just like the internet does with packets.
After searching around in Google for a while I have not had any luck or guidance in my question.
I want to be able to load up a website using javascript, ajax, in order to reduce the amount of requests needed by the server from the client. My goal is to embed/encode data within an image such that only the client needs to request this image through ajax call, and then be decoded to find the js, css, and other files needed. Then the js, css and other files will be inserted into the DOM.
If I can get the above to work then I could have a lot of flexibility on how my webapp is loaded and be able to notify the user how close the webapp is to being ready for viewing.
Currently my problem is that I cannot find how I would encode the data within an image.
Even if this is not the way to be going about serving up a webapp my curiosity is getting the best of me and I would just really like to do this.
Any guidance or pointers would be greatly appreciated!
Also: I am learning Python so if you know of a python module that I could play with that would be cool. Currently i'm playing with the pypng module to see if this could be done.
To be frank. Don't do that.
The brightest minds on earth use other methods to keep the number of requests and response time down. The most common technique for minimizing the number of requests is called Bundling. In short, you just copy'n paste all js files after each other into one big js file and all the css files into one big css file. This way you need to download two files, one js and one css. Better than that is usually not worth the trouble.
To further keep response times down you usually minify your js and css files. This is a process where all white space, comments, etc are removed and internal variable names are made as short as possible.
Finally you can serve both js and css files as gziped files to further reduce the file size to transfer.
There are many tools out there that does both bundling and minification for you. Google and pick one that suits your other tooling support.
I need to upload certain file sizes using plupload. For example, small, medium and big picture .
Is possible do that with only javascript?
You can insert a function to resize image when it is uploaded.
if (!$chunks || $chunk == $chunks - 1) {
// Strip the temp .part suffix off
rename("{$filePath}.part", $filePath);
resize_image($filePath);
}
No. JavaScript is scripting language only.
It has not libraries to help manipulate things like images, copy files, send emails, etc .. We can invoke server side utilities or injected proxies but it was invented specifically for DOM manipulation
In the question OP was specifically looking at using JavaScript to manipulate the image and use plupload to upload it. This in impossible because JS on its own cannot do that.
The default plugins for plupload rely on either silverlight, flash or gears and respectively those platform can manipulate images locally and then call upload with the resized file- which will upload to the server.
Possibly OP at the time I wanted to avoid flash, silverlight etc to keep cross browser compatibility and for use on old browsers.
So a good solution is to uplaod the file to the server and use .NET/PHP tools to manipulate the images the way it was needed. While retaining the original image. It works well and you can restrict image sizes to 5mb; which can cause some bas user experience but that is a good trade off.
Since File API will enable access to the content of local files it is now possible to do image resize before upload (a fairly common task) without any additional technology like Flash or Silverlight. Except that I can't find any Javascript library that would be able to handle images in binary form. Is there any? Maybe there is some in Flashe's ECMA script that could be adapted, but I simply can't find anything.
Although I haven't find such libs, I have found a way how to accomplish the described task:
Read image as Data URL
Load an image into a canvas tag and resize it
Encode canvas image data into some image format, for example JPG. Or use Canvas.toDataUrl() and then (optionaly) some base64 decoder.
Client side image resizing and upload with pure javascript. That's cool, isn't it?
Even if you do find something that understands images in pure javascript, you would still need the DOM to render it, making it incredibly slow.
Don't know if this is what you want, but there are some scripts on Userscripts.org that handle images: http://userscripts.org/scripts/show/38736
One problem with calavera.info's answer (sorry I cannot seem to comment directly on that answer) is that the call to either CanvasRenderingContext2D.getImageData or Canvas.toDataURL mentioned in the third bullet will fail. They each throw a SECURITY_ERR: DOM Exception 18 as the image is not from the same origin or domain as the document that owns the canvas element. That seems inevitable since the image comes from the local file system (via an input type="file" tag), but the page comes from your web server.