Meteor upload empty files to public folder - file-upload

I'm trying to upload files in Meteor using this great script. I modified the event to handle multiple files, like this:
'click #saver': function(ev) {
$.each( $(".fileuploader"), function (index, item) {
if(item.files.length > 0) {
Meteor.saveFile(item.files[0], item.files[0].name);
}
})
}
Everything else is exactly the same as in the Gist (see link to script, above).
The upload shows no errors and the page reloads after the public folder is changed, but most of the files uploaded to the public folder show up as empty, (i.e. they are 0kb in size). There seems to be no pattern. Sometimes all files are empty, sometimes only a couple, and in no predictable order. The console sometimes logs correctly, and other times doesn't. Any thoughts?
Thanks, as always, for your considered advice.
db

It's not that easy at this moment. Files in public dir are managed by Meteor. Therefore, whenever contents of that directory change, the server reloads itself - terminating the file save you've been inside.
The solution is to put files in a place Meteor does not care about: hidden folder (.name), ignored folder (name~), or folder outside of Meteor directory.
Then you'll need to serve those files by hand. See this answer for a snippet:
Dynamically insert files into meteor public folder without hiding it

Related

How to access static/local files in react native

I'm not sure what to call the files, but the context is that I have a bunch of data that I would like to ship with my app. I need to find a way to store this data so that I can load it into the database. (Or better yet, just ship it with a prefilled db)
Here are the solutions that I've seen:
Storing the data in code as a json blob I can't do this because I have quite a lot of data, a few MB or so and I would like to be able to compress it.
Load a file from the public folder
I think this is a create-react-app specific API and I did not use that. But if there's a way to get a public or static folder to read arbitrary files from, that'll be great.
Read a file using react-native-fs
I'm not sure where to put the file in my application so that I can access it. This seems to give me an empty folder to write files to. I don't know where in my app directory I can put the files if I want it to be read by this.
I would also like to have these files compressed, and only loaded when I need them to be. I think using a require('path/to/file.json') loads the file every time I use the app.
How would I go about reading a file from my app?
I'm coding for android if that matters and the database I'm using is watermelondb.
You need to use react-native-asset to put files to your project and access them with require keyword.
Example for file with path ./assets/files/some-file.mp3:
Add or modify react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
dependencies: {
},
assets: [
'./assets/files'
],
};
Run npx react-native-asset
Use the file:
const file = require('./assets/files/some-file.mp3')

react-native filesystem can't find app files

I'm building an app with react-native, and I'm trying to use the react-native-fs module to list out a series of images located in the app folder. The images are located in a folder in the app project folder named 'data', so for example if I want to display one of the images, this works:
<Image source={require('./data/boo.png')} />
However when I try to use react-native-fs to list out all the files in that folder like so:
RNFS.readdir(RNFS.DocumentDirectoryPath+'/data')
.then((result) => {
console.log('GOT RESULT', result);
})
.catch((err) => {
console.log(err.message, err.code);
});
I get the error 'Folder does not exist'. Also when I remove the +'/data' the only result listed is a file by the name of 'ReactNativeDevBundle.js', with a path of '/data/user/0/com.awesomeproject/files/ReactNativeDevBundle.js'. Is this the expected behavior? If this is the expected behavior, and I am doing something wrong, how can I access the file folder I want from within the app? Side question, if I wanted to provide that Image tag with an absolute path, what would that look like.
First, are you creating the data folder in running time? or why do you think that's where the files are?
Second,
Also when I remove the +'/data' the only result listed is a file by
the name of 'ReactNativeDevBundle.js', with a path of
'/data/user/0/com.awesomeproject/files/ReactNativeDevBundle.js'. Is
this the expected behavior?
Yes, this is the expected behavior, RNFS.DocumentDirectoryPath goes directly to /data/user/0/com.awesomeproject/files/, this is where you should create the data folder if you want to keep using the same code you currently have
EDIT:
According to one of the contributors of the package: if your folder is within the javascript-space this package won't work.
If you're using android, you may need to put the files into the assets-folder within the android-folder. Then you should be able to use readDirAssets.
I recommend to read Differences between File Source
Excerpt:
Normal Files: These files are created by your app using fs, or fetch API, you can do any operation on these files.
Asset Files: Compiled into the app bundle so generally they're on
readonly mode

DiskCache non-image files without checking directory

I'm using ImageResizer to resize profile pictures (uploaded by users) on the fly. The profile pictures are stored with the filename being their ID, and without an extension. They are also in a directory that contains other files uploaded by users that may not be images. I reference the file in my cshtml file using something like this:
<img src="//localhost:34754/8FF479AC7724A82A001603EF1566A7EFD852D35561BC2E14B1A01D99CEC035C7F265A3FF7F2642098DD2999217EC7A94?width=100" />
I want ImageResizer to know not to ignore this request, even though it doesn't have an image extension. I found this page: http://imageresizing.net/docs/howto/cache-non-images
This describes how to solve an issue similar to mine, except it requires specifying a directory. But I don't want ImageResizer to handle all requests from this directory, since there are non-images stored there as well. Is there some other way I can tell ImageResizer not to ignore the URL? Maybe by adding something to the query string? Thanks for your help.
The sample event handler uses a directory and a file extension as an example; you are free to use a querystring key or any other kind of indicator as you wish; it's just an example.
Config.Current.Pipeline.PostAuthorizeRequestStart += delegate(IHttpModule sender2, HttpContext context) {
var query = Config.Current.Pipeline.ModifiedQueryString;
if (query["flag"] != "true") return;
Config.Current.Pipeline.SkipFileTypeCheck = true; //Skip the file extension check.
//Non-images will be served as-is
//Cache all file types, whether they are processed or not.
Config.Current.Pipeline.ModifiedQueryString["cache"] = ServerCacheMode.Always.ToString();
};

WinJS css file from local storage

Follow up to this question:
apply downloaded CSS on windows 8 metroUI app
So, yes, Windows says "for security reasons, you cannot navigate to HTML you have downloaded to this location and you cannot run any executable or potentially executable code, such as script or CSS. It is intended for media such as images or videos and the like."
But I really, really want to use that css file from my local storage. Shouldn't I be able to use the execUnsafeLocalFunction method to bypass this restriction like this?:
MSApp.execUnsafeLocalFunction(function () {
el["href"] = "ms-appdata:///local/style.css"
});
It still throws "An app can’t load remote web content in the local context."
I also tried just reading the file with localFolder.getFileAsync and readText, but nothing seems to help. Is there really no way to work around this?
I think I found a way to get the CSS to load.
I tested the code below by adding a css file that sets the body background to red in the local storage folder.
The code reads the contents of the file, creates a style tag in the head and adds the content of the css file to the style.
var url = new Windows.Foundation.Uri(filename);
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(url).then(function (file) {
Windows.Storage.FileIO.readTextAsync(file).then(function(text) {
var style = document.createElement("style");
style.innerText = text;
document.getElementsByTagName("head")[0].appendChild(style);
});
});

File object in WinJS - how to retrieve the containing folder

I have got a app with the getItemsAsync()-method returning a file-object for a picture chosen by the user with a file picker. Now I would like to get the folder-object of the folder which contains the image to make the user able to switch between the pictures in that folder without using the filepicker again.
The path is available upon return from the file picker. See:
Docs for StorageFile
You can in turn then call
Windows.Storage.StorageFolder.getFolderFromPathAsync(path)
.done( /* Your success and error handlers */ );
to get you the StorageFolder from that path.
Docs for GetFolderFromPathAsync()
if the app likely want to 'access' any file in the select folder, using FolderPicker is probably right. otherwise, the app will likely not have access to all files in the folder.