I've to upload image by checking its dimensions, only if that image fits into limits it'll be uploaded to the server else we should alert the user to change the image.
The question is how to check uploaded image dimension in javascript? Thanks.
This is impossible.
What you are asking is the dimensions of a file that you've requested the user to upload.
You are talking about a file upload, ie a file that is uploaded trough the tag.
This file will only be read and uploaded to the server the moment the form is submitted. So until you actually upload the file to the server, you have no access to the contents of the file.
The browser security model prevents access to this file...
You should verify this at the server side, and display an error message if they uploaded the wrong size of file. This does mean that the file will need to be transferred and then rejected.
The only workarounds would mean to use plugins such as activeX objects or maybe flash, but then you are no longer using javascript...
I think there's no way to do this except with an URL. See this example how to do with an URL: link
Related
I am looking to make a website that does three things:
The user can upload an image to the website (without a server)
-For this problem, I have found resources like Dropzone, but all seem to mandate sending the image to a server.
The uploaded file is manipulated on the client side
-For this problem, I need the uploaded file to be accessible from my JS/HTML code and I need some way for me to manipulate the file. I currently have my website with the pre-set file embedded in it, which I can then access and manipulate with JS, so the manipulation itself isn't much of the issue, but rather just accessing the file.
The user can then download the manipulated file (again, without a server)
-For this problem, I know that how to make a download button for files that have a web address (which are on a server), but is there a way to have a download button for the file that was just manipulated? I found this question here that seems to be a good starting point, but I am not sure if I completely understand the implementation of it.
Basically, I have the website framework in place (using HTML/CSS, Javascript) and I am just looking to see if this is possible to do without the use of a server, even if I have to use some other libraries. If any insight or links to potentially useful articles/libraries could be given on any one of these three points, I would much appreciate it.
Note: If this is not possible without a server, please let me know because then I will have to completely redesign everything and this whole question is trivial.
The user can upload an image to the website (without a server)
A website is typically hosted on a server. I think you mean the image is uploaded, but not stored anywhere.
The uploaded file is manipulated on the client side
There are lots of cool JS libraries to handle this, for something light you can try out https://fengyuanchen.github.io/cropperjs/
The user can then download the manipulated file (again, without a server)
So if I am understanding you are asking for an image upload -> edit -> image download. This is very possible and common. However, you will need somewhere to cache the uploaded image for the client.
If you are asking if you can upload an image directly to the DOM, you can not. You need to upload the image to the location where your files are being hosted. Imagine having an absolute path to C:/MyComputer/MyImage, it would obviously not work on any other machine than your machine.
If you need some examples on how to handle the upload image to temp location -> edit -> download let me know
I am AJAX call and when the server (REST service) sends the response it is actually a link to the generated file something like
/project/tmporaryFiles/file.abc
(File extension is also customized) It is just a text file. when I use $window.open then it just opens the text file in the browser and displays the text. I would like to open a saveas dialog box so that user user should be able to save the file instead of viewing it in the browser. I have tried multiple threads of stackoverflow but could not found solution. Most of the solutions are for HTML5 i.e. the download attribute in anchor, I believe this is not available in HTML4x.
One solution I am trying to find is to create a Blob with the response link but that I am unable to do.
Also note the file can be more than 100MB as well based on the data processing and input by the user.
I you want to force the download without using HTML5 download attribute, you will need to set Content-Disposition on response header.
This can be done on server side and not client.
From UI using HTML input file, I want to upload images. In JavaScript, I want to store these uploaded images in a specific folder by creating a unique URL to the image. Later, I post the rest of the web-service and I send this image URL to store it along with some other data, and I want to display the images in the UI.
Can anyone please suggest a way to do this?
Your question is confusing, it is not clear whether you are talking about storing the file in browser or on the server. If you want to create a file/folder on your local browser filesystem and store the file in browser (before sending to server or cache a copy) you should read these two articals:
Create a file in browser filesystem:
https://www.html5rocks.com/en/tutorials/file/filesystem/
Create a data URL for image file:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
I just had a question about checking image file size. How do you do that in PHP(server-side), or even through javascript, before the image gets uploaded straight to S3? In addition for personal reasons, I cannot use HTML5 to achieve that.
And I am aware of solutions such as first uploading to my own server to do the checking there, and then uploading to S3. But this takes up loads of bandwith size, so it is out of the solution set.
Thank you very much.
If you want to check the file size before the file is sent to S3, and you are sending it directly to S3 without sending it to a server you control first, your only option is to check the size property of each File or Blob you are going to send to your S3 bucket. This is possible in all browsers that support the File API, which is pretty much all browsers other than IE9 and older. For older browsers, you cannot test sizes client-side.
I'm not sure why you mentioned PHP in your question, and, at the same time, said you do not want to send the files to a server you control first. If you want to check the size of a file before sending it to S3 via some PHP, then of course you will have to send the file to your server first, as PHP is a server side language. If you do indeed not want to send files to your server, you can of course send the files directly to S3 via the browser, and check the size first if the browser supports the File API. This is generally what happens in Fine Uploader, a library I maintain that supports direct uploads to S3 from the browser without sending the files to a server you control first.
I'm writing a web application which allows a user to select a PNG file, write an iTXt chunk to it and then save it back to their local file system. I would use the new FileWriter API to do so but currently only Google Chrome has added support for it.
Since my file is represented in memory as a binary string I use data URIs to prompt the user to save the file as follows:
window.location.href = "data:application/octet-stream;base64," + btoa(blob);
Since the mime-type is application/octet-stream the browser prompts the user to open or save it. However the problem is that the user does not know which type of file it is. So the user has to add the file extension manually.
Currently I alert the user which extension the file needs to be saved with. However this seems like an inelegant solution. Is there a better way to achieve the same result?
If this were HTTP, then you'd either have to set the content disposition to attachment, to get the file saved even if its mime type is known, or to set the file name for an attachment of octet-stream type. Neither of these headers can be emulated using the data: URI, though, so I see no way to open a “Save as…” dialog using such a URI.
Others have asked how to open a save file dialog for a js variable, and judging from the answers there, there appears to be ready-to-use solutions which work as long as the client has Flash installed (and not blocked).
So perhaps you might try severl solutions, starting with the FileWriter you mention, trying a flash-based approach if that isn't available, and falling back to data: URI with an alert message about the file name extension. That way you could probably achieve the best result possible for each client.