I have the URLs of a list of images. Now on click of a link, ineed to to zip the images in all those URL's and provide it as a downloadable file. What i have currently done is,
Pass the URLs to django views
Fetch the images and store it to filesystem
Zip them and
Return a download dialog as response
Now, i am thinking of doing everything at the client side itself.I came across the JS plugin Zip.js that can zip files. My only problem is how to fetch those images from the URL's and zip them in memory using JS.Any help is appreciated.I also came across other plugins to zip files,
http://www.jquery4u.com/javascript/javascriptjquery-zipfilecompressor-plugins/#.UE8cI2AxznA
https://raw.github.com/Stuk/jszip/master/jszip.js
As #VisioN said, the zip.js plugin or any other plugins fails some browser tests, the only way to do this will be on the server side.
Related
I have a create-react-app application that has a page where it allows the user to select a .csv file to upload, this file has many columns, one of these columns is a path to a folder with a bunch of pictures.
I want to be able to access this folder and upload all this pictures using js on the client side, apparently all solutions involving the fs library do not work anymore as it's been removed from webpack.
Since the files are hosted in the client side, I need to be able to grab those files programmatically using the js running on the cliente browser, it needs to happen without the user interaction because that CSV file has thousands of lines (there will be thousands of paths to grabs the images from), so the user can't be manually opening the file browser and selecting a directory for each line of that csv file.
To be clear, the only user interaction allowed is the csv file upload, the rest needs to be handled automatically.
How can this be done? And if it can't be done, what would be a work around this issue?
Thank you.
I'm trying to create a file server to serve a bunch of files for download and have a web-based UI to search/filter and download the files.
Right now i'm using a basic FTP server and i'm planning to create a simple (flask+js) web app that will redirect me to the ftp url for the selected file so it can be downloaded. The web app is needed so I can create my own tagging and filtering system.
However, i'm having trouble finding out how to download whole directories and folders as a zip. Basically like how google drive can have a "Download as zip" function while still keeping the raw folder available for browsing.
Is there a way to do this?
This involves working with "blobs", a JavaScript way of dealing with streamable binary data.
I haven't tried this particular library myself, but there's an article here about using the JSZip library specifically for the kind of thing I think you're talking about: https://davidwalsh.name/javascript-zip
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 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.
I'm quite JS newbie and I'm wondering about some idea.
Can javascript be used to download file/multiple files from given url/s on the client side and zip "the stream" on the fly?
I don't want this server side, because I don't want to download files to my server and zip then.
If the following use case is correct:
user selects a bunch of files to zip and the browser zips them up and serves them back to the user.
Then you can use the following library: zip.js
You can check out the demo here
To solve this exact problem, I created a library to stream multiple files directly into a zip on the client-side. The main unique feature is that it has no size limits from memory (everything is streamed) nor zip format (it uses zip64 if the contents are more than 4GB).
Since it doesn't do compression, it is also very performant.
Find "downzip" it on npm or github!