Meteor-files: Image does not appears in the project after upload

[allddarrass]

Hi! I tried to change collection FS on ours mteor-react project to Meteor-Files, but i have some problems with images upload. Here is my code:

//Collection
var Images = new FilesCollection({
collectionName: 'Images'
});

//Inssert method
Images.insert({
file: fileFromTheInput,
streams: 'dynamic',
chunkSize: 'dynamic'
}, true);

I assumed that this one should:
1) create an object, which discribes an image
2) upload file into the default directory

My problem is: The object appears as well (it has "path" prop), but there is no such image on the server.
What i am doing wrong? Sorry if question is stupid. Thank you.

[bvodola]

The same is happening to me. I am using Meteor+React as well.
The meteor mongo shell is showing the Images collection populated. But I can't find the uploaded image file anywhere.

Here's my code:

//lib/images.js

import Meteor from 'meteor/meteor';
let Images = new FilesCollection({
    collectionName: 'Images'
});

if (Meteor.isClient) {
    Meteor.subscribe('files.images.all');
}

if (Meteor.isServer) {
    Meteor.publish('files.images.all', function () {
        return Images.collection.find({});
    });
}

export default Images;

//imports/ui/FileUpload.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Images from '../../lib/images.js';

class FileUpload extends Component {

    handleSubmit(event) {
        event.preventDefault();
        if(ReactDOM.findDOMNode(this.refs.testfile).files && ReactDOM.findDOMNode(this.refs.testfile).files[0]) {

            let upload = Images.insert({
                file: ReactDOM.findDOMNode(this.refs.testfile).files[0],
                streams: 'dynamic',
                chunkSize: 'dynamic'
            }, false);

            upload.on('start', function() {
                console.log('upload.on.start');
            });

            upload.on('end', function(error, fileObj) {
                if(error) {
                    alert('Error during upload: ' + error);
                } else {
                    alert('File '+fileObj.name+' successfully uploaded');
                }
            });

            upload.start();
        }
    }

    render() {
        return(
            <form method="post" enctype="multipart/form-data" onSubmit={this.handleSubmit.bind(this)}>
                <input type="file" ref="testfile" size="50" />
                <input type="submit" />
            </form>
        )
    }

}

export default FileUpload;

[dr-dimitru]

Hi @bvodola and @allddarrass ,

Could you post server logs with enabled debug flag?

[dr-dimitru]

@bvodola @allddarrass have you seen #74?

[dr-dimitru]

Hi guys @allddarrass and @bvodola ,
Any news on your end?
I'm about to publish new release and would like to close all current issues, let me know if this one is solved.

[allddarrass]

@dr-dimitru , Hi! I already tried to debug with enabled debug flag and there are no errors. Here is my screenshot.

But there is no such file or directory.

[dr-dimitru]

Try to use /data/UploadedFiles/ or assets/app/images/, do not forget to create this folder(s) first and set right permissions, or 777 to test it out. Also take a look on #72

[dr-dimitru]

BTW which version you're on? What if you will use version from dev branch?

[bvodola]

@dr-dimitru thanks for the replies.
I'm using version 1.5.6.

Don't know If this is something that was already happening (cause I always check to console), but I checked my browser console today and I'm getting the following error (and it's stack trace below):

Uncaught TypeError: upload.start is not a function

handleSubmit @ FileUpload2.jsx:29
ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:70
executeDispatch @ EventPluginUtils.js:87
executeDispatchesInOrder @ EventPluginUtils.js:110
executeDispatchesAndRelease @ EventPluginHub.js:42
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:53
forEachAccumulated @ forEachAccumulated.js:24
processEventQueue @ EventPluginHub.js:215
runEventQueueInBatch @ ReactEventEmitterMixin.js:18
handleTopLevel @ ReactEventEmitterMixin.js:29
handleTopLevelImpl @ ReactEventListener.js:73
perform @ Transaction.js:136
batchedUpdates @ ReactDefaultBatchingStrategy.js:63
batchedUpdates @ ReactUpdates.js:98
dispatchEvent @ ReactEventListener.js:150

and this is the upload object logged in the console.

FileUpload {
_events:Object
config:Object
estimateSpeed:ReactiveVar
estimateTime:ReactiveVar
file:File
onPause:ReactiveVar
progress:ReactiveVar
state:ReactiveVar
__proto__:EventEmitter

It has no start method indeed. What am I missing here?

_Don't know if this issue is still related to @allddarrass question, so let me know if you think I should open a new one._

[dr-dimitru]

Change FileUpload to something else here:

class FileUpload extends Component

Namespace FileUpload is used by FilesCollection

[dr-dimitru]

@bvodola any news?

[rusffer]

Hi @bvodola and @allddarrass ,
Have you looked in .meteor/local/build/programs/server/ directory?
I assumed that the files are saved in project-root/assets/app/uploads/Images, but surprisingly found it at project-root/.meteor/local/build/programs/server/assets/app/uploads/Images/.

Maybe you just missed it, as I am and there is no issue.

[dr-dimitru]

@rusffer it's true for dev-stage

[allddarrass]

@dr-dimitru, thank you. Now it uploads into .meteor/local/build/programs/server/assets/app/images/. But still not clear why path property for the image does not direct to the correct location.

<img src={image.path}></img>

[dr-dimitru]

@allddarrass ,

What browser inspector shows in src of this img element?

[allddarrass]

@dr-dimitru ,

assets/app/images/c8gWHAzdEQNKAxxGi.jpg

[dr-dimitru]

@allddarrass use fileURL helper:

<img src="{{fileURL image}}"></img>

[allddarrass]

@dr-dimitru , is it possible to do this without template helper? We use react instead of templates.

[dr-dimitru]

Yes, use .link() method

[allddarrass]

@dr-dimitru , sorry, but there is no such method.

[dr-dimitru]

var Images = new FilesCollection({
  collectionName: 'Images'
});

var fileRef = Images.collection.findOne(_id);
Images.link(fileRef); // <--

[allddarrass]

@dr-dimitru , thanks a lot, it works.

[dr-dimitru]

Guys @allddarrass , @bvodola ,
Can we assume this thread as solved? And close this issue?

[allddarrass]

@dr-dimitru , yes.

[dr-dimitru]

@allddarrass thank you
Waiting for @bvodola

[bvodola]

@dr-dimitru thanks. The files were in a different folder, .meteor/local/build/programs/server/˜/tmp/meteor/imgs/. Thanks to @rusffer answer I could find them. And I also changed FileUpload to FileUploaderand it works fine now. Thanks for your kind attention!