CODEWITHSUNDEEP
node.jsmeteorangular-meteor
Nicholaus Chipping
Nicholaus Chipping

Reputation: 324

ostrio:files package is working, but can’t access image

I got the ostrio:files package working in my application, so my images are uploading to the server (as far as I know) and the DB has a reference to them, but I don’t know how to actually serve them up. For example, I uploaded an image this morning. The DB contains the original name, and the file path that it exists at now:

assets/app/uploads/Images/twLXDmCTiqyGy4Yq7.jpg

The problem is, when I put that into the url, it just returns my app’s homepage. I tried changing the upload directory to be /images/ but still have the same issue. I can’t seem to find a clear answer in Meteor’s documentation on how to open up a path for images, aside from including them when you build the package, but that defeats the purpose of user-input.

I also have noticed that the programs/web.browser/program.json file in my application seems to control what is allowed to be visible, but ideally, I would just like to open up my /images directory to view any image (only direct paths, of course - I don’t want a directory listing). Is that a possibility?

Furthermore, I found the config.public configuration option in the documentation, and set it to true, as well as setting the storagePath and downloadRoute paths. The paths I set are coming from the base of my server (using / for the start of the paths) but I still cannot seem to view any of the images that I upload - it just loads my default home page for my app

----EDIT----

Adding more detail for help in figuring this out.

I set up my FileCollection in my /imports/api/images.js file, like this:

export const Images = new FilesCollection({

Later on, in another file, I import that api and do the upload, using Images.insert({ and then use the upload.on('end', function to get it uploaded. I'm guessing that is where I'm missing saving the file to my filesystem? Hopefully this helps and provides more detail for debugging. Also, when I do have a FileCursor object, I try the link() method and it just returns link is not a function. I basically just followed the Meteor Files GitHub Example.

--- EDIT 2 ---

As pointed out by @Rolljee, I had other packages that were still in my project that I hadn't removed. They were interfering and causing this to not work.

Upvotes: 3

Views: 1073

Answers (2)

Rolljee
Rolljee

Reputation: 143

When you store a new record in the FilesCollection collection, it automatically create the link() method you can use to get the path where it serve your file.

You should be able to get it like so:

const theUrl = MyFilesCollection.findOne(someId).link();

it is also possible to create the like yourself, it follow this simple naming convention:

link: `${Meteor.absoluteUrl() + file._downloadRoute}/${file._collectionName}/${file._id}/original/${file._id}.${file.extension}`,

Upvotes: 2

Mikkel
Mikkel

Reputation: 7777

Usually static assets are kept under public in your app structure, so public/images/picture.jpg is available as /images/picture.jpg in your HTML.

Unfortunately you can't save uploaded files to this directory (you probably know that), so another strategy is needed.

You don't say whether your problem is in development or production.

The sample code uses <img src={{file.link}}< - which means that the package will provide a url for you, based on the configuration. Does this not work? If you are formulating your own url, and you are going to deploy to mobile, the URL will need to be absolute, not relative, because of the way mobile apps run with a local web server for local assets.

This may not be a complete answer (yet), but if you can provide more information we can get there

Upvotes: 0

Related Questions