I want to provide upload functionality to my angular JS application , I want to restrict user to upload only CSV/XSL files only,and the File size must be restricted to 100KB ,the users data from the file should be stored in the local storage of browser using Flow JS, I am new to Flow JS ,can anyone give me hint or code-snippet to implement this.I don't wanna use any backend only local storage to store my data
To restrict selectable files to CSV and XLS or XSLX, use FlowJS assignBrowse method :
.assignBrowse(domNodes, isDirectory, singleFile, attributes)
This way
flow.assignBrowse(element, false, false, {"accept": ".csv,.xls,.xlsx"});
Read official docs for more : https://github.com/flowjs/flow.js/#methods
Unfortunately, this is no limit for filesize.
But you'll find some useful information on this thread which could help :
Related
I have a MERN Stack in which the user upload one of the 4 types of files: .pdf, .jpeg, .psd, .ai and I used FileReader to save it as buffer to mongoDB Database. I want to render it back to my React app (automatically download the file) on click. 'react-pdf' didnt help because the data which comes back from the database is buffer type and hence it shows 'Failed to load PDF' How do I solve this issue for all file types?
What I think there is nothing wrong with your client-side part the main cause of this is how you are storing it into DB
To store files in MongoDB you should try to use GridFS
You can find some tutorials about working with GridFS (example).
Check your MongoDB Driver's API and try to implement it in your project
I'm implementing an application using react-filepond where once the user selects/drops the files, i need to get uris (for the files) for upload from an endpoint(server), and then using those uris to upload to our storage.(whilst also showing upload progress to the user)
is using onupdatefiles prop to send getURIs request and then using onprocessfile/onprocessfilestart to upload those files using the retrieved URIs, the best way to do this?
also what is the use of the progess parameter we get in the onprocessfileprogress(file,progress)? can it to be used to feedback the progress back to filepond component?
I think you can implement a custom server.process function and handle all upload logic in there, wether uploading to your local server of first uploading to a remote server it should give you enough control over the entire process.
https://pqina.nl/filepond/docs/patterns/api/server/#process-1
I am using angular file upload for my project. referring the below link I have worked my project
http://nervgh.github.io/pages/angular-file-upload/examples/simple/
My requirement is once I select a file or multiple file if I refresh also it should not remove from the queue.
I tried to use localstorage but its not working
Here is the code where I have used local storage.
uploader.onAfterAddingAll = function(addedFileItems)
{
console.info('onAfterAddingAll', addedFileItems);
$localStorage.allfiles= addedFileItems;
};
At the end I did get console but it is showing empty.
console.log($localStorage.allfiles);
Please any one can help on this will be a great help
Ok so before starting please go through MDN Web Storage API. It states that
The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.
So localStorage can store key value pairs and as of now only string values are supported. It can not store files. So you wont be able to achieve what you are trying as you want to store file and that's not supported.
Also if you want to store objects you will have to stringify them and then store.
One suggested solution i have is you can convert your files to a bytes array and then store them and then you can handle those bytes the way you want.
Also this might help you I think thats waht you want . Mozilla Hacks Storing Images in localStorage
Once the image is saved as data url which is base 64 encode. You just need to send the string to the server and decode it with base 64
I have certain html forms. On-submit it has to generate new text/json file (name to be saved based upon one of the field in form) in the local drive with the contents filled in the form. Is this possible in angularjs? As well as to retrieve the data based upon the file name.
Spontanously, I wouldn't want a javascript based web page to access my hard disk drive. That seems like a security risk for me.
Could local storage be an alternative for your use case?
Read more about local storage and angular js: http://www.amitavroy.com/justread/content/articles/html5-local-storage-angular-js
You can use filesystem API but it is chrome specific.
Check this Exploring the FileSystem APIs
Simple question, is it possible to write json data (received from API) to a json file in my directory structure. The api returns a json string. Is there any method in angular that supports this or do I need to rely on jquery? Extra information on this topic is welcome.
You cannot access the user's filesystem from javascript, instead you should present the user with a save dialog (it's up to the user where to save the file). AngularJS doesn't support this out of the box, you could however save a file to the default download folder by converting the JSON to a base64 string and bind it to an a href.
<a href="data:application/octet-stream;charset=utf-16le;base64,ew0KICAgICJnbG9zc2FyeSI6IHsNCiAgICAgICAgInRpdGxlIjogImV4YW1wbGUgZ2xvc3Nhcnki
IA0KICAgIH0NCn0=">json file</a>
For more control to save files to the client, you could use FileSaver which has support for older browsers.