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
Related
Is there a way to download a canvas image to a file folder without a prompt showing up? I have found solutions requiring a prompt where you name the file, but I have not found any solutions where you can dynamically name the image and save to a local file. I am very new to front-end development, so I am not entirely familiar with Node.js or JQuery/PHP/Ajax. I have found solutions using these but they have ended up still using prompts.
In general, this is a security feature.
You don't want a site you browsing to save files to your computer silently. They can possibly contain a malicious code for example, or override an existing file. Thus, as a security feature the browsers are asking you to name the file you will save.
There is a way to name the files thou, so you don't need to present the user with generic file name.
On How to do that - it really depends what are you using to do it..
In your situation - if those are log files you want to save - you can send them back to the server. That can be easily done.
I have a requirement where I want to show the file preview to the users.
There are various file types which are supported like; .pdf, .xlsx, .doc, .rar, .jpeg, .png and many more.
When user clicks on the preview it should open the file in popup where preview of the file is shown to him. User can Zoom-in, Zoom-out, Download the file. Just as you can see into gmail for attachment preview.
Please, can anyone guide me to any relevant library or helpful resource for the same.
Thanks in advance
There are two main ways you can do this.
1) Server-side: Render previews once server-side (on file upload) into jpg/png images, and store the previews on the server. This is the easiest to implement on the client side, but requires extra storage on the server.
2) Client-side: Render the previews 'live' with javascript in browser, this reduces the amount the server has to do/store, but does require the client to fully download the file in-memory before it can render the preview, which for large files could be an issue. Also, you would need javascript libraries included for likely each individual file type, since most libraries will target one specific file format.
Server-Side is probably the recommended way to go. What are you using for your web server?
You are looking at creating document viewer.
Belive me its big work as browser does not understand these formats. Browser can render images directly on canvas but it does not know how to render the other files. So, any file other than image formats, one need to save them temporarily on server and then stream on the browser and show them using the respective file viewer.
You can convert doc and xlsx files to pdf and show these files using pdf viewer (http://ngmodules.org/modules/ng-pdfviewer). There are plenty of document converters available on internet (however you will need to check the licensing terms as most of them are GPL licensed, hense can not be used in commercial projects).
If you want to save this work then go for third party server those take all paint to convert documents in html5 such as https://crocodoc.com/why-crocodoc/
You can also try using google doc viewer google doc veiwer
This question is fairly broad. I'm not going through all the steps of how to implement an attachment viewer directive, but here are some pointers you might find useful.
To allow the user to download the file, you simply put a download link somewhere. If you are hosting the attachment on Amazon S3, Google Cloud Storage or some other cloud storage service, check their documentation. If you're downloading the files from your own server, make sure to set the Content-Disposition HTTP response header to attachment; filename="ORIGINAL_FILENAME", where ORIGINAL_FILENAME is the file name you want to user to see in the save dialog that appears when they click the download link.
Now on to the viewer.
For PDF files, I'd use pdfJS. There's an angular directive for it here.
You could look at something like CloudConvert for other files, to convert ehm to a PDF, and then displaying them in pdfJS, but then you probably want to store the PDF on your server as well, in addition to the original files, which requires extra storage. You might also be able to use the Google Docs viewer, or Office 365 viewer, as described in this answer.
Is it possible to send a images to the Pebble watch using PebbleKit Javascript sendAppMessage.
My idea is to load an image from the web and send it to the watch and display them there. If an image is not possible directly then I was thinking of drawing the image to a canvas and trying to get bitmap data from the canvas to send to the watch.
Is any of this possible now or am I thinking of things that have not been done yet. If possible how? If not done yet how might you do it?
Looking to brainstorm and share possible code ideas.
I should also mention that I do not want to use an iOS or Android app, only the PebbleKit JS.
There is a complete example of an app that uses JavaScript to download images in the pebble-hacks Github repository. This github projects hosts different non-official yet written by team pebble.
The one you are looking for is pebble-faces. The image download part is built in a separate source file to be easily re-used in your own project.
I also added a PHP port for the Python script here
https://github.com/logbon72/pebblebitmap
It might come in handy if your run PHP applications that need to do conversion on the fly.
The new version of Linux Mint allows HTML 5 login window themes -- I'm trying to write one that will grab each user's wallpaper. These wallpapers are located in the folder /home/#USER#/.cache/wallpaper/, however the file name is not consistent and I need a programmatic way of determining it. Once I know the filename, the login screen will display the image correctly using the file:///.. format.
I don't have any tools other than client-side HTML/CSS/JavaScript[/jQuery/etc] available to me. Is there any way I can grab the file names in that directory, so that I can grab the wallpaper image?
EDIT: Figured it out! The browsers won't allow access to the file:/// resources at all, the mdm-theme-emulator will.
It looks like these files are located on the client machine, in which case you would not be able to access them using jQuery. Javascript does not have access to the local file system.
If you are sending the request through a server, you'd be able to use the server-side code (ASP.NET, PHP, etc.) to loop through the filenames
I want to allow a web site users to be able to download files from my site, but with the help of a client-side downloader with an ability to continue an interrupted download.
For example, I want to sent a person a file with a size of 30+ Meg. I want the user to have the best downloading experience, so I can't afford him downloading 25 Meg and then getting the download dropped due to the network problems on his side.
Therefore, I want to have a javascript downloader rendered on a download page, that will show the actual client-side file delivery, and when it is downloaded, to give an ability to a user to save the file.
Or is it not possible due to the fact that javascript won't be able to open a save file dialog and save to a file system?
I'm afraid that is not possible with JavaScript and that's why:
To continue downloading from the certain point you should send to the server the position number to start downloading from. And as JavaScript has no access to local file system, you can't get that position.
UPD: it seems that I was too hurrying with the reply.
The file size can be gotten using the HTML5 File API and after getting the file size you can pass it to the server which should support the partial downloading.
But anyway, after downloading another part of the file you should sew two pieces together in some way; standard web browser dialog will only suggest to overwrite the file.
UPD2: to work with files in some Internet Explorers you can use FileSystemObject:
var fso;
fso = new ActiveXObject("Scripting.FileSystemObject");
I'd look into making a plugin or extension. Like those DownloadThemAll extensions for firefox and Google chrome. Another alternative would be to use Flash, either alone or integrating it with javascript like hinted here: http://www.communitymx.com/content/article.cfm?cid=0922A